# Table of Contents - [Introductie | WebOntwikkeling 2025](#introductie-webontwikkeling-2025) - [Inleiding | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#inleiding-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Welkom | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#welkom-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Benodigdheden | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#benodigdheden-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Afspraken oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#afspraken-oefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Mee helpen? | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#mee-helpen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Afspraken code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#afspraken-code-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Nuttige extras | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#nuttige-extras-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Dankwoord | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#dankwoord-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H0: Werken met Visual Studio | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h0-werken-met-visual-studio-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H1: Variabelen en datatypes | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h1-variabelen-en-datatypes-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Je eerste programma | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#je-eerste-programma-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Fouten in je code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#fouten-in-je-code-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Introductie tot C# | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#introductie-tot-c-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H2: Tekst in code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h2-tekst-in-code-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Kleuren in Console | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#kleuren-in-console-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Input verwerken met ReadLine | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#input-verwerken-met-readline-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Uitbreidingsoefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#uitbreidingsoefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Werken met Visual Studio | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#werken-met-visual-studio-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Unicode tonen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#unicode-tonen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Input verwerken en omzetten | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#input-verwerken-en-omzetten-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H3: Werken met data | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h3-werken-met-data-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Beslissingen intro | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#beslissingen-intro-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Strings samenvoegen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#strings-samenvoegen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H4: Beslissingen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h4-beslissingen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Strings en chars | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#strings-en-chars-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Random | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#random-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Debuggen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#debuggen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Math-library en berekeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#math-library-en-berekeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Variabelen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#variabelen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [De essentie van C# | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#de-essentie-van-c-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Expressies en operators | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#expressies-en-operators-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Casting, conversie en parsing | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#casting-conversie-en-parsing-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Datatypes | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#datatypes-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H5: Loops | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h5-loops-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Switch | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#switch-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Loops intro | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#loops-intro-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Nesting | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#nesting-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Scope van variabelen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#scope-van-variabelen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H6: Methoden | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h6-methoden-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [If | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#if-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Bibliotheken | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#bibliotheken-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [H7: Arrays | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#h7-arrays-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Booleanse logica en operators | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#booleanse-logica-en-operators-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [For | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#for-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Uitbreidingsoefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#uitbreidingsoefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen deel 1 | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-deel-1-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Programma flow analyse | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#programma-flow-analyse-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Oefeningen deel 2 | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren](#oefeningen-deel-2-experimentalmerge5-old-g-pro-programmeren-en-oo-programmeren) - [Text Search | WebOntwikkeling 2025](#text-search-webontwikkeling-2025) - [Sessions | WebOntwikkeling 2025](#sessions-webontwikkeling-2025) - [Delete | WebOntwikkeling 2025](#delete-webontwikkeling-2025) - [CRUD | WebOntwikkeling 2025](#crud-webontwikkeling-2025) - [Hashing & Encryptie | WebOntwikkeling 2025](#hashing-encryptie-webontwikkeling-2025) - [Environment Variables | WebOntwikkeling 2025](#environment-variables-webontwikkeling-2025) - [Cookies | WebOntwikkeling 2025](#cookies-webontwikkeling-2025) - [Session Based Login | WebOntwikkeling 2025](#session-based-login-webontwikkeling-2025) - [JWT Tokens | WebOntwikkeling 2025](#jwt-tokens-webontwikkeling-2025) - [Tokens veilig opslaan | WebOntwikkeling 2025](#tokens-veilig-opslaan-webontwikkeling-2025) - [JWT NPM package | WebOntwikkeling 2025](#jwt-npm-package-webontwikkeling-2025) - [Token Based Login | WebOntwikkeling 2025](#token-based-login-webontwikkeling-2025) - [Testing | WebOntwikkeling 2025](#testing-webontwikkeling-2025) - [BMI Calculator Multi | WebOntwikkeling 2025](#bmi-calculator-multi-webontwikkeling-2025) - [16. CRUD | WebOntwikkeling 2025](#16-crud-webontwikkeling-2025) - [14. Mongo Queries | WebOntwikkeling 2025](#14-mongo-queries-webontwikkeling-2025) - [18. Session based login | WebOntwikkeling 2025](#18-session-based-login-webontwikkeling-2025) - [10. Post Request | WebOntwikkeling 2025](#10-post-request-webontwikkeling-2025) - [15. Mongo + Express | WebOntwikkeling 2025](#15-mongo-express-webontwikkeling-2025) - [12. Herhaling | WebOntwikkeling 2025](#12-herhaling-webontwikkeling-2025) - [19. Token based login | WebOntwikkeling 2025](#19-token-based-login-webontwikkeling-2025) - [Voorbereiding (devcontainer + github) | WebOntwikkeling 2025](#voorbereiding-devcontainer-github-webontwikkeling-2025) - [4. Interfaces & functies | WebOntwikkeling 2025](#4-interfaces-functies-webontwikkeling-2025) - [Extra oefeningen | WebOntwikkeling 2025](#extra-oefeningen-webontwikkeling-2025) - [17. Session & Cookies | WebOntwikkeling 2025](#17-session-cookies-webontwikkeling-2025) - [Semester 2 | WebOntwikkeling 2025](#semester-2-webontwikkeling-2025) - [21. Herhaling | WebOntwikkeling 2025](#21-herhaling-webontwikkeling-2025) - [13. Mongo Basics | WebOntwikkeling 2025](#13-mongo-basics-webontwikkeling-2025) - [11. Router en Middleware | WebOntwikkeling 2025](#11-router-en-middleware-webontwikkeling-2025) - [7. Express | WebOntwikkeling 2025](#7-express-webontwikkeling-2025) - [9. Get Request | WebOntwikkeling 2025](#9-get-request-webontwikkeling-2025) - [8. EJS + Static | WebOntwikkeling 2025](#8-ejs-static-webontwikkeling-2025) - [20. Testing | WebOntwikkeling 2025](#20-testing-webontwikkeling-2025) - [3. Arrays | WebOntwikkeling 2025](#3-arrays-webontwikkeling-2025) - [6. Modules en NPM Packages | WebOntwikkeling 2025](#6-modules-en-npm-packages-webontwikkeling-2025) - [5. Async & fetch | WebOntwikkeling 2025](#5-async-fetch-webontwikkeling-2025) - [Interest Calculator | WebOntwikkeling 2025](#interest-calculator-webontwikkeling-2025) - [Hello Query | WebOntwikkeling 2025](#hello-query-webontwikkeling-2025) - [Pet Shelter | WebOntwikkeling 2025](#pet-shelter-webontwikkeling-2025) - [Users CRUD | WebOntwikkeling 2025](#users-crud-webontwikkeling-2025) - [Pet Shelter Express | WebOntwikkeling 2025](#pet-shelter-express-webontwikkeling-2025) - [Math Module | WebOntwikkeling 2025](#math-module-webontwikkeling-2025) - [Pokedex Express Sessions | WebOntwikkeling 2025](#pokedex-express-sessions-webontwikkeling-2025) - [School API | WebOntwikkeling 2025](#school-api-webontwikkeling-2025) - [Wisselgeld | WebOntwikkeling 2025](#wisselgeld-webontwikkeling-2025) - [Redirect Form | WebOntwikkeling 2025](#redirect-form-webontwikkeling-2025) - [Hello Express | WebOntwikkeling 2025](#hello-express-webontwikkeling-2025) - [Maaltafels | WebOntwikkeling 2025](#maaltafels-webontwikkeling-2025) - [Puntenboek | WebOntwikkeling 2025](#puntenboek-webontwikkeling-2025) - [Som van getallen | WebOntwikkeling 2025](#som-van-getallen-webontwikkeling-2025) - [Text Box | WebOntwikkeling 2025](#text-box-webontwikkeling-2025) - [Uren en Minuten | WebOntwikkeling 2025](#uren-en-minuten-webontwikkeling-2025) - [Pet Shelter | WebOntwikkeling 2025](#pet-shelter-webontwikkeling-2025) - [Name from Email | WebOntwikkeling 2025](#name-from-email-webontwikkeling-2025) - [DNA Match | WebOntwikkeling 2025](#dna-match-webontwikkeling-2025) - [Unix Timestamp API | WebOntwikkeling 2025](#unix-timestamp-api-webontwikkeling-2025) - [Cocktails API | WebOntwikkeling 2025](#cocktails-api-webontwikkeling-2025) - [Fake Fetch | WebOntwikkeling 2025](#fake-fetch-webontwikkeling-2025) - [Shopping Cookie | WebOntwikkeling 2025](#shopping-cookie-webontwikkeling-2025) - [Interfaces | WebOntwikkeling 2025](#interfaces-webontwikkeling-2025) - [Rate Limiter | WebOntwikkeling 2025](#rate-limiter-webontwikkeling-2025) - [Milestone 3 - MongoDB | WebOntwikkeling 2025](#milestone-3-mongodb-webontwikkeling-2025) - [Twitter | WebOntwikkeling 2025](#twitter-webontwikkeling-2025) - [Beerster | WebOntwikkeling 2025](#beerster-webontwikkeling-2025) - [JWT Sign | WebOntwikkeling 2025](#jwt-sign-webontwikkeling-2025) - [At Least Two | WebOntwikkeling 2025](#at-least-two-webontwikkeling-2025) - [View Counter Cookies | WebOntwikkeling 2025](#view-counter-cookies-webontwikkeling-2025) - [Utility Middleware | WebOntwikkeling 2025](#utility-middleware-webontwikkeling-2025) - [Login Express JWT | WebOntwikkeling 2025](#login-express-jwt-webontwikkeling-2025) - [Youtube Favorites | WebOntwikkeling 2025](#youtube-favorites-webontwikkeling-2025) - [Guestbook | WebOntwikkeling 2025](#guestbook-webontwikkeling-2025) - [Bitcoin current | WebOntwikkeling 2025](#bitcoin-current-webontwikkeling-2025) - [Pokemon Team Express | WebOntwikkeling 2025](#pokemon-team-express-webontwikkeling-2025) - [MoviesDB | WebOntwikkeling 2025](#moviesdb-webontwikkeling-2025) - [Newspaper Search | WebOntwikkeling 2025](#newspaper-search-webontwikkeling-2025) - [Math Test | WebOntwikkeling 2025](#math-test-webontwikkeling-2025) - [Cat GPT | WebOntwikkeling 2025](#cat-gpt-webontwikkeling-2025) - [Cowsay Module | WebOntwikkeling 2025](#cowsay-module-webontwikkeling-2025) - [Hello Express EJS | WebOntwikkeling 2025](#hello-express-ejs-webontwikkeling-2025) - [Math Service | WebOntwikkeling 2025](#math-service-webontwikkeling-2025) - [Word Guess | WebOntwikkeling 2025](#word-guess-webontwikkeling-2025) - [Steam | WebOntwikkeling 2025](#steam-webontwikkeling-2025) - [Games DB | WebOntwikkeling 2025](#games-db-webontwikkeling-2025) - [Milestone 2 - Express | WebOntwikkeling 2025](#milestone-2-express-webontwikkeling-2025) - [Todo List String | WebOntwikkeling 2025](#todo-list-string-webontwikkeling-2025) - [Pokemon Team | WebOntwikkeling 2025](#pokemon-team-webontwikkeling-2025) - [Milestone 1 - Terminal App | WebOntwikkeling 2025](#milestone-1-terminal-app-webontwikkeling-2025) - [Newspaper | WebOntwikkeling 2025](#newspaper-webontwikkeling-2025) - [Todo List Fetch | WebOntwikkeling 2025](#todo-list-fetch-webontwikkeling-2025) - [Slow Sum | WebOntwikkeling 2025](#slow-sum-webontwikkeling-2025) - [Login Express | WebOntwikkeling 2025](#login-express-webontwikkeling-2025) - [View Counter | WebOntwikkeling 2025](#view-counter-webontwikkeling-2025) - [Pokemon Team | WebOntwikkeling 2025](#pokemon-team-webontwikkeling-2025) - [Milestone 4 - Security | WebOntwikkeling 2025](#milestone-4-security-webontwikkeling-2025) - [View Counter Sessions | WebOntwikkeling 2025](#view-counter-sessions-webontwikkeling-2025) - [DadJoke Express | WebOntwikkeling 2025](#dadjoke-express-webontwikkeling-2025) - [Form Express Test | WebOntwikkeling 2025](#form-express-test-webontwikkeling-2025) - [Cat Static | WebOntwikkeling 2025](#cat-static-webontwikkeling-2025) - [Pet Shelter Express Test | WebOntwikkeling 2025](#pet-shelter-express-test-webontwikkeling-2025) - [Export Interfaces | WebOntwikkeling 2025](#export-interfaces-webontwikkeling-2025) - [Math Express Test | WebOntwikkeling 2025](#math-express-test-webontwikkeling-2025) - [String Test | WebOntwikkeling 2025](#string-test-webontwikkeling-2025) - [Contact Form | WebOntwikkeling 2025](#contact-form-webontwikkeling-2025) - [Rainbow Chalk | WebOntwikkeling 2025](#rainbow-chalk-webontwikkeling-2025) - [Hogwarts Express CRUD | WebOntwikkeling 2025](#hogwarts-express-crud-webontwikkeling-2025) - [Newspaper Route | WebOntwikkeling 2025](#newspaper-route-webontwikkeling-2025) - [Router Combi | WebOntwikkeling 2025](#router-combi-webontwikkeling-2025) - [Guestbook Express | WebOntwikkeling 2025](#guestbook-express-webontwikkeling-2025) - [Tick Tac Toe | WebOntwikkeling 2025](#tick-tac-toe-webontwikkeling-2025) - [Rot13 | WebOntwikkeling 2025](#rot13-webontwikkeling-2025) - [Functies | WebOntwikkeling 2025](#functies-webontwikkeling-2025) - [Cocktails Promise All | WebOntwikkeling 2025](#cocktails-promise-all-webontwikkeling-2025) - [Pokedex | WebOntwikkeling 2025](#pokedex-webontwikkeling-2025) - [Bitcoin API | WebOntwikkeling 2025](#bitcoin-api-webontwikkeling-2025) - [Promise All | WebOntwikkeling 2025](#promise-all-webontwikkeling-2025) - [Joke API | WebOntwikkeling 2025](#joke-api-webontwikkeling-2025) - [Todo List Objects | WebOntwikkeling 2025](#todo-list-objects-webontwikkeling-2025) - [Recepten | WebOntwikkeling 2025](#recepten-webontwikkeling-2025) - [Filter Numbers | WebOntwikkeling 2025](#filter-numbers-webontwikkeling-2025) - [Movies Functions | WebOntwikkeling 2025](#movies-functions-webontwikkeling-2025) - [Array Sum | WebOntwikkeling 2025](#array-sum-webontwikkeling-2025) - [Math Fun | WebOntwikkeling 2025](#math-fun-webontwikkeling-2025) - [Short Notation | WebOntwikkeling 2025](#short-notation-webontwikkeling-2025) - [Movies Objects | WebOntwikkeling 2025](#movies-objects-webontwikkeling-2025) --- # Introductie | WebOntwikkeling 2025 Welkom in de cursus WebOntwikkeling. In deze cursus gaan we ons verdiepen in het ontwikkelen van webapplicaties in TypeScript. TypeScript is een variant van JavaScript die het mogelijk maakt om nog beter gestructureerde code te schrijven. We zullen zien hoe we strong typed variabelen kunnen gebruiken, hoe we interfaces kunnen gebruiken en hoe we asynchroon kunnen programmeren. Nadat we deze basis onder de knie hebben gaan we ons verdiepen in Express, een webframework voor NodeJS. We zullen zien hoe we een webserver kunnen opzetten, hoe we routes kunnen gebruiken en hoe we middleware kunnen implementeren. We zullen ook zien hoe we een template engine kunnen gebruiken om dynamische webpagina's te maken. We zullen ook zien hoe we data kunnen ophalen uit een externe API en hoe we data kunnen opslaan in een MongoDB database. In het laatste deel zullen we ons verdiepen in secure coding. We zullen zien hoe we best practices kunnen toepassen in een reële programmeeropdracht. We zullen ook zien hoe we encryptie en hashing kunnen toepassen en hoe we cookies, sessions en tokens kunnen gebruiken. We zullen ook zien hoe we HTTPS en SSL kunnen toepassen. We verwachten in deze cursus een basiskenis van JavaScript die je kan opdoen in de cursus Web Technologie. We verwachten ook dat je een basis kennis hebt van HTML en CSS. ### [](https://apwt.gitbook.io/webontwikkeling-2025#leerinhoud) Leerinhoud De cursus is opgebouwd uit 4 verschillende delen: #### [](https://apwt.gitbook.io/webontwikkeling-2025#typescript-en-nodejs) Typescript en NodeJS * Wat is TypeScript * Strongly typed variables * Typed Methodes * Interfacing * Werken met API's in TypeScript: * Data uit API m.b.v. TS ophalen * Uitlezen van data uit API in webapplicatie * Uitgebreide kennis van JS/TS-frameworks: * Gebruik maken van Node.js #### [](https://apwt.gitbook.io/webontwikkeling-2025#express) Express * Een webserver opzetten in Express.js * Gebruik maken van een template engine (e.js) in Express.js * Routes gebruiken * Middleware implementeren #### [](https://apwt.gitbook.io/webontwikkeling-2025#data-ophalen-en-opslaan) Data ophalen en opslaan * Geavanceerde web-API's gebruiken * Zelf een MongoDB opzetten * Een MongoDB koppelen aan een eigen webapplicatie #### [](https://apwt.gitbook.io/webontwikkeling-2025#secure-coding) Secure coding * Basiskennis en -principes van secure coding (OWASP): * Encryptie, hashing * Cookies, sessions, tokens * HTTPS, SSL * Misuse/abuse cases [VolgendeDevcontainers](https://apwt.gitbook.io/webontwikkeling-2025/tooling/devcontainers) Laatst bijgewerkt 1 jaar geleden --- # Inleiding | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Benodigdheden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/benodigdheden) [Afspraken code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode) [Afspraken oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen) [Nuttige extras](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras) [Dankwoord](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/dankwoord) [Mee helpen?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/helpen) [PreviousWelkom](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5) [NextBenodigdheden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/benodigdheden) Last updated 5 years ago Was this helpful? Was this helpful? --- # Welkom | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#zie-scherp) Zie scherp --------------------------------------------------------------------------------------- Deze cursus wordt gebruikt als handboek binnen de [graduaatsopleiding programmeren van de AP Hogeschool](https://www.ap.be/graduaat/programmeren) . Concreet is dit het handboek voor de eerste 2 semesters omtrent 'leren programmeren met C#': * Deel 1: Programming Principles, eerste semester * Deel 2: Object Oriented Programming, tweede semester Deze cursus is gebaseerd op [de overeenkomstige cursus van de bacheloropleiding toegepaste informatica](https://github.com/v-nys/cursusprogrammeren/tree/510d00d79aebbd03a181c553277afa1c8c85916f/apwt.gitbook.io) . Veel leer-en leesplezier, De lectoren programmeren PS Besef dat goed kunnen programmeren enkel kan geleerd worden indien je ook effectief veel programmeert. Je kan ook niet leren fietsen door enkel een handboek "Fietsen met Merckx" te lezen, je zal op de fiets moeten springen! En vallen...véél vallen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#licensed-under-creative-commmons-attribution-noncommercial-4.0-international-cc-by-nc-4.0) Licensed under Creative Commmons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ![Licenicon](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpO1jXRyXjJMRovPx%252Fccicon.png%3Fgeneration%3D1567089865552922%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=c6f5b449&sv=2) ![Licenicon](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpO1lF6t4Ow0bLDC_%252Fccat.png%3Fgeneration%3D1567089863789826%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=1c7aa375&sv=2) ![Licenicon](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpO1o6n8jsoKVEUtd%252Fccnc.png%3Fgeneration%3D1567089865485820%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=f76426de&sv=2) Licensed under CC-BY-NC 4.0 as shown [here](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/LICENSE.MD) . This is a human-readable summary of (and not a substitute for) the [license](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/LICENSE.MD) . ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#you-are-free-to) You are free to **Share** : copy and redistribute the material in any medium or format **Adapt** : remix, transform, and build upon the material The licensor cannot revoke these freedoms as long as you follow the license terms. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#under-the-following-terms) Under the following terms **Attribution** : You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. **NonCommercial** : You may not use the material for commercial purposes. **No additional restrictions** : You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. [NextInleiding](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding) Last updated 5 years ago Was this helpful? * [Zie scherp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#zie-scherp) * [Licensed under Creative Commmons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#licensed-under-creative-commmons-attribution-noncommercial-4.0-international-cc-by-nc-4.0) * [You are free to](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#you-are-free-to) * [Under the following terms](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5#under-the-following-terms) Was this helpful? --- # Benodigdheden | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren In alle lessen (hoorcollege en practica) hebben we 2 zaken nodig: 1. Deze cursus 2. Een laptop met daarop **Visual Studio 2019 Community** editie geïnstalleerd. [PreviousInleiding](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding) [NextAfspraken code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode) Last updated 5 years ago Was this helpful? Was this helpful? --- # Afspraken oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Voor de graduaatsopleiding hanteren we een vaste structuur voor de oefeningen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#vorm-van-de-oefeningen) vorm van de oefeningen --------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#unieke-titel) unieke titel Elke oefening begint met een unieke titel. Deze gebruik je voor de organisatie van je bestanden. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#korte-toelichting) korte toelichting Eerst krijg je een omschrijving in tekst van wat de algemene bedoeling is van je programma. Deze bevat niet noodzakelijk elk detail, maar geeft je een _big picture_. Bijvoorbeeld: > In deze oefening maak je een echo. Dit is een programma dat tekst inleest vanaf het toetsenbord en deze tekst dan op het scherm toont. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#vertrekpunt) vertrekpunt Je hoeft niet altijd alle code zelf te schrijven. Code die je nog niet verondersteld wordt zelf te kunnen schrijven, of code die gewoon veel tijd in beslag neemt, krijg je. Bij de stukken code staat telkens de naam van het bestand waarin ze thuishoort. Commentaar bij de te wijzigen stukken code geeft aan welke aanpassingen je moet doen. Bijvoorbeeld: #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#program.cs) Program.cs Copy using System; namespace Programmeren { class Program { public static void Main(string[] args) { // zorg er zelf voor dat een regel tekst die gebruiker intypt weer verschijnt string message; Console.WriteLine(message); } } } ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#voorbeeldinteractie) voorbeeldinteractie Ten slotte worden één of meerdere voorbeelden getoond van hoe je programma zich gedraagt. In deze voorbeelden stellen regels die niet beginnen met `>` iets voor dat op het scherm verschijnt. Regels die wel beginnen met `>` stellen iets voor dat door de gebruiker zelf wordt ingetypt. Bijvoorbeeld, voor het programma dat we hier als leidraad gebruiken: We gebruiken de speciale syntax `` om aan te geven dat er een end-of-file signaal wordt gestuurd. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#organisatie-van-je-bestanden) organisatie van je bestanden --------------------------------------------------------------------------------------------------------------------------------------------------------- Voor de eenvoud zorgen we dat elke oefening op zichzelf staat. Dit betekent dat sommige code herhaald wordt in je bestanden, maar het vermijdt dat iets dat je in week 1 geschreven hebt in week 5 plots niet meer werkt. Concreet doen we dat zo: * Je maakt ergens op je machine één map voor alle oefeningen van het vak Programmeren (in semester 1) of Objectgericht programmeren (in semester 2). Het maakt niet uit waar, maar je kiest één map en je blijft deze heel het semester gebruiken. * Voor elke oefening in het eerste semester maak je in die map een submap. De naam van deze submap is **letterlijk** de unieke titel van de oefening, inclusief gebruik van hoofdletters, leestekens,... Je voegt **geen** andere structuur toe, dus geen mapjes per labosessie,... * Wanneer een oefening verderbouwt op een eerdere oefening, kopieer en hernoem je de map van die eerdere oefening. Daarna werk je dan voort in die nieuwe map. [PreviousAfspraken code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode) [NextNuttige extras](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras) Last updated 5 years ago Was this helpful? * [vorm van de oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#vorm-van-de-oefeningen) * [unieke titel](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#unieke-titel) * [korte toelichting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#korte-toelichting) * [vertrekpunt](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#vertrekpunt) * [voorbeeldinteractie](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#voorbeeldinteractie) * [organisatie van je bestanden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen#organisatie-van-je-bestanden) Was this helpful? Copy > Hallo, wereld! Hallo, wereld! --- # Mee helpen? | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Als je aanpassingen wil voorstellen _specifiek voor de graduaatsopleiding_, dan wordt aangeraden een fork van _deze_ repository te maken op Github. De verschillen tussen de cursus voor de graduaatsopleiding en de bachelor hebben bijna uitsluitend betrekking tot de oefeningen. Als je aanpassingen wil doen met betrekking tot de inhoud, zie dan [de overeenkomstige pagina in de cursus van de bachelor](https://apwt.gitbook.io/project/inleiding/helpen) . [PreviousDankwoord](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/dankwoord) [NextH0: Werken met Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio) Last updated 5 years ago Was this helpful? Was this helpful? --- # Afspraken code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Voor de graduaatsopleiding volgen we een reeks afspraken (ook "conventies" genoemd) die bepalen welke code wel en niet aanvaardbaar is. Wanneer een groep programmeurs dezelfde afspraken volgt, is het voor iedereen makkelijker code uit te wisselen. Als je deze pagina voor de eerste keer ziet, zullen de meeste van deze afspraken je nog niet veel zeggen. Dat is logisch. We zullen je tijdens de les wijzen op de afspraken die horen bij een nieuw concept, maar hier heb je een handig overzicht: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#naamgeving) naamgeving --------------------------------------------------------------------------------------------------------------- Onderstaande richtlijnen zijn gebaseerd op [deze algemeen aanvaarde richtlijnen](https://github.com/ktaranov/naming-convention/blob/master/C%23%20Coding%20Standards%20and%20Naming%20Conventions.md) . We beperken ons tot de zaken die we tijdens de cursus zien. Soort data Notatie Enkelvoud? Vorm Default zichtbaarheid Klasse PascalCase altijd \[A-z\]+\[0-9\] `public` Methode PascalCase meervoud toegestaan \[A-z\]+\[0-9\] `public` Argument camelCase meervoud toegestaan \[A-z\]+\[0-9\] niet van toepassing Lokale variabele camelCase meervoud toegestaan \[A-z\]+\[0-9\] niet van toepassing Constante PascalCase altijd \[A-z\]+\[0-9\] `public` Veld camelCase meervoud toegestaan \[A-z\]+\[0-9\] `private` Property PascalCase meervoud toegestaan \[A-z\]+\[0-9\] `public` Enum type PascalCase altijd \[A-z\]+ `public` Waarde enum PascalCase altijd \[A-z\]+ niet van toepassing * We kiezen namen in het Engels. Enkel tekst die aan de gebruiker getoond wordt, schrijven we in het Nederlands. * Merk op dat het verschil tussen PascalCase en camelCase samenhangt met de default zichtbaarheid. Wanneer afgeweken wordt van de default zichtbaarheid, kan de conventie voor de notatie ook veranderen. Wij zullen ons in deze cursussen voor de eenvoud strikt aan de default zichtbaarheid houden. * "meervoud toegestaan" betekent dat we iets noteren als een meervoud als de data ook meerdere objecten voorstelt. Bijvoorbeeld een lokale variabele met naam `studenten` en datatype `Student[]`, maar een lokale variabele `student` met datatype `Student`. * We beginnen niet elke identifier voor een `private` member met een underscore. Sommige programmeurs doen dit wel, maar wij volgen één richtlijn. * Namen van klassen voor custom exceptions eindigen op `Exception`. * Vermijd afkortingen in namen. * Uitzondering: algemeen aanvaarde afkortingen zoals `ID`, `HTML`,... * Afkortingen van één of twee letters * Andere talen hebben soms andere conventies! [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#codeerstijl) codeerstijl ----------------------------------------------------------------------------------------------------------------- We baseren ons op [de afspraken van Microsoft](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/inside-a-program/coding-conventions) . Je hoeft deze conventies niet te lezen. Hieronder volgt een vereenvoudigd overzicht van de afspraken die aan bod kunnen komen in de cursus en enkele eigen conventies: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#using-directieven) `using` directieven * Deze komen alleen vooraan in het bestand voor en worden steeds gevolgd door de declaratie van de namespace. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#namespaces) namespaces * In het eerste semester groeperen we al onze code in de namespace `Programmeren`, in het tweede semester in de namespace `ObjectgerichtProgrammeren`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#een-datatype-per-bestand) een datatype per bestand * Elk zelf gedefinieerd datatype (klasse, struct, interface, enum type, later ook delegate) plaatsen we in een afzonderlijk bestand met dezelfde naam als dat datatype. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#strings-bouwen) strings bouwen * In de eerste twee lessen mag dit met behulp van `+`. * Gebruik stringinterpolatie om kleine aantallen strings aan elkaar te hangen of data weer te geven in stringformaat. * Gebruik een `StringBuilder` om strings aan elkaar te hangen in een lus. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#types-declareren) types declareren * Gebruik steeds een expliciet, statisch type. * Dat wil zeggen: geen variabelen declareren als `var`. Dat doe je pas later. * Dat wil zeggen: geen variabelen declareren als `dynamic`. Dat doe je pas later. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#arrays) arrays * Gebruik de kortste syntax voor arrays van literals, dus `string[] vowels1 = { "a", "e", "i", "o", "u" };` en niet `string[] vowels2 = new string[] { "a", "e", "i", "o", "u" };`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#static-members) `static` members * Plaats voor een `static` member altijd uitdrukkelijk de naam van de klasse waarin dat `static` member gedefinieerd is. * Klassen die uitsluitend `static` members bevatten ("library classes") maken we ook `static` met de syntax `static class`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#vergrendelen-van-data) vergrendelen van data * Klassen die niet bedoeld zijn om van over te erven maken we `final`. * Als iets een constante is voor een bepaald programme, gebruiken we ook de access modifier `const`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#algemeen) algemeen **We gebruiken alleen zaken die in de les aan bod zijn gekomen.** We zien geen lambda's, delegates, LINQ,... dus je gebruikt deze ook niet, zelfs als je ze al ergens anders gezien hebt. [PreviousBenodigdheden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/benodigdheden) [NextAfspraken oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen) Last updated 5 years ago Was this helpful? * [naamgeving](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#naamgeving) * [codeerstijl](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#codeerstijl) * [using directieven](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#using-directieven) * [namespaces](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#namespaces) * [een datatype per bestand](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#een-datatype-per-bestand) * [strings bouwen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#strings-bouwen) * [types declareren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#types-declareren) * [arrays](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#arrays) * [static members](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#static-members) * [vergrendelen van data](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#vergrendelen-van-data) * [algemeen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode#algemeen) Was this helpful? --- # Nuttige extras | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#nuttige-extras) Nuttige extra's ------------------------------------------------------------------------------------------------------------------------ [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#boeken) Boeken ------------------------------------------------------------------------------------------------------- Er zijn quasi oneindig veel boeken over C# geschreven, althans zo lijkt het. Hier een selectie van boeken met een korte bespreking waarom ik denk dat ze voor jou een meerwaarde kunnen zijn bij het leren programmeren in C#: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#beginner-boeken) Beginner boeken * [C# Programming](https://ineasysteps.com/products-page/all_books/c-sharp-programming-in-easy-steps/) van Mike McGrath: een uiterst compact, maar zeer helder en kleurrijk boekje dat ik ten stelligste aanbeveel als je wat last hebt met de materie van de eerste weken. * [Microsoft Visual C# 2015: An introduction to OOP](https://www.amazon.com/Microsoft-Visual-2015-Introduction-Object-Oriented/dp/1285860233) van Joyce Farrell: Niet het meest sexy boek, maar wel het meest volledige qua overlap met de leerstof van deze cursus. Aanrader voor zij die wat meer in detail willen gaan en op zoek zijn naar oneindig veel potentiele examenvragen ;) * [Head First C#](https://www.bol.com/nl/f/head-first-c/37019965/?country=BE) van Andrew Stellman & Jennifer Greene: laat de ietwat bizarre, bijna kleuterachtige look and feel van de head first boeken je niet afschrikken. Ieder boek in deze serie is goud waar. De head first boeken zijn d� ideale manier als je zoekt naar een alternatieve manier om complexe materie te begrijpen. Bekijk zeker ook de Head First Design Patterns en Head First Sql boeken in de reeks! ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#geavanceerd) Geavanceerd * [C# Unleashed](https://www.bol.com/nl/f/c-5-0-unleashed/9200000009902560/?country=BE) van Bart De Smet: in mijn opinie dé referentie om C# tot op het bot te begrijpen. Geschreven door een Belg die bij Microsoft in Redmond aan C# werkt. * [Code Complete](https://www.amazon.de/Code-Complete-Practical-Construction-Costruction/dp/0735619670) van Steve McConnell: een referentiewerk over 'programmeren in het algemeen'. Het boek is al jaar en dag het te lezen boek als je je als programmeur wilt verdiepen in wat nu 'correct programmeren' behelst. Als je op je CV kunt zetten dat je dit boek door en door kent dan zal elk IT-bedrijf je stante pede aannemen ;) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#online) Online ------------------------------------------------------------------------------------------------------- Leren programmeren door enkele de opdrachten in deze cursus te maken zal je niet ver (genoeg) brengen. Onze dikke vriend het Internet heeft echter tal van schitterende bronnen. Hier een overzicht. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#cheat-sheet) Cheat sheet Volgende document bevat een overzicht van de basis C# syntax zaken van het eerste en (deel van het) tweede semester: [download hier](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/assets/0_intro/cheat-sheet.pdf) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NgvgZgvYwJhUkwAK%252Fcheatprev.jpg%3Fgeneration%3D1583826010211795%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=9311f350&sv=2) Cheat sheet preview ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#game-based-programmeren) Game-based programmeren Ideale manier om programmeren meer in de vingers te krijgen op een speelse manier: #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#apps) Apps * [SoloLearn](https://play.google.com/store/apps/details?id=com.sololearn) : Verplichte app! Simple as that! * [Enki](https://play.google.com/store/apps/details?id=com.enki.insights&hl=en) Net zoals SoloLearn maar dan anders. * [Memrise](https://www.memrise.com/course/700046/learn-c/) (aanrader!) Origineel vooral bedoeld om spreektalen te leren, maar bevat ook tal van andere zaken. Hoofdzakelijk nuttig om nieuwe aspecten te 'drillen'. Enkel dus nuttig indien je de basismaterie eerst hebt verwerkt. Bekijk zeker ook de tal van andere cursussen die er staan. Let er op dat je bij de filter Engels instelt, er zijn nog niet veel (goede) Nederlandstalige C# cursussen naar mijn weten. **Opgelet: je kan je enkel via de browser inschrijven op niet-spreektaal-cursussen. De app toont enkel spreektaalcursussen**. * [Mimo](https://play.google.com/store/apps/details?id=com.getmimo) Speels en vrij beperkt in gratis versie, maar ideale aanvulling op SoloLearn. * [Screeps](https://screeps.com/) Een steam spel om te leren programmeren. Weliswaar Javascript (nuttig voor Web Programming) maar het concept is te cool om niet hier te vermelden en zoals je zal ontdekken: leren programmeren kan je in eender welke taal, en het zal ook je andere programmeer-ervaring verbeteren. Give it a go! #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#websites) Websites * [Exercism](https://exercism.io/tracks/csharp) * [Coding game](https://www.codingame.com/start) zeer vet * [Code Combat](https://codecombat.com/) * [Pex For Fun](https://pexforfun.com/) (specifiek voor C#!) * [Code Academy](https://www.codecademy.com/) * [RPG Game in C#](http://scottlilly.com/learn-c-by-building-a-simple-rpg-index/) (behandelt leerstof van volledig eerste jaar en meer) * [Advent of code](https://adventofcode.com/) Pittige programmeeroefeningen die jaarlijks in december verschijnen. * [Free Programming Book](https://books.goalkicker.com/) Handig vorm gegeven gratis ebooks met tal van onderwerpen waaronder ook C# en het .NET Framework. * [Tutorials teacher](https://www.tutorialsteacher.com/csharp/csharp-tutorials) : De uitgebreidere, Engelstalige variant van deze cursus zeg maar. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#tutorials) Tutorials * [Dotnet beginning](http://dot.net/videos) * [C# Getting started interactive quickstart tutorials](https://docs.microsoft.com/en-us/dotnet/csharp/quick-starts/) : Aanrader. * [Online video c# cursus](https://channel9.msdn.com/Series/C-Sharp-Fundamentals-Development-for-Absolute-Beginners) : Zeer aan te raden indien je een bepaald concept uit de les niet begrijpt. * [C-sharp.be](http://www.c-sharp.be/) : Nederlandstalige cursus met veel toffe oefeningen waarvan je sommige zelfs in deze cursus zal terugvinden. * [Microsoft Virtual Academy](https://mva.microsoft.com/en-us/training-courses/c-fundamentals-for-absolute-beginners-16169?l=Lvld4EQIC_2706218949) : Microsoft heeft een virtual academy cursus "C# fundamentals" uitgebracht. Ik kan deze cursus zeer erg aanbevelen. * [Rob Miles's The C# Programming Yellow book](http://www.robmiles.com/c-yellow-book/) : Zeer vermakelijk, vlot geschreven C# boek(je) * [Open Source Game Clones](https://osgameclones.com/) : "This site tries to gather open-source remakes of great old games in one place." Je vindt er ook tal van C# projecten terug zoals [GTA 2](https://code.google.com/archive/p/gta2net/) .Klik bovenaan op "languages" en filter maar eens op C#. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#oefenvragen) Oefenvragen * [Een lijst met oude oefenvragen uit 2010](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/assets/docs/oefenvragen2010.pdf) : nog steeds relevant. * [Veel kleine, fijne oefeningen](https://www.w3resource.com/csharp-exercises/) * [Een dagelijkse programmeeruitdaging op reddit](https://www.reddit.com/r/dailyprogrammer/) * Pittige vragen van de jaarlijkse Vlaamse Programmeerwedstrijd: * [2013](http://www.vlaamseprogrammeerwedstrijd.be/2013/opgaven.php) * [2014](http://www.vlaamseprogrammeerwedstrijd.be/2014/opgaven.php) * [2015](http://www.vlaamseprogrammeerwedstrijd.be/2015/opgaven.php) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#streaming-programmeurs) Streaming programmeurs Ja hoor, ze bestaan. Meer en meer professionele én beginnende programmeurs streamen terwijl te programmeren. Dit is een ideale manier om te zien hoe andere mensen problemen aanpakken. De meeste programming streamers kan je terugvinden op youtube, maar ook op Twitch zijn er steeds meer. Enkele aanraders (bekijk zeker de filmpjes uit de archieven eens): * [Handmade Hero](https://handmadehero.org/watch#EpisodeGuide) : deze programmeur heeft een volledige RPG gemaakt en het hele proces gestreamd. * [CSharpFrits](http://youtube.com/csharpfritz) * [DevChatter](https://www.twitch.tv/devchatter) * [Visual Studio Twitch](https://www.twitch.tv/visualstudio) * [NoopKat](https://www.twitch.tv/noopkat) * [The Coding train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw) [PreviousAfspraken oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakenoefeningen) [NextDankwoord](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/dankwoord) Last updated 5 years ago Was this helpful? * [Nuttige extra's](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#nuttige-extras) * [Boeken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#boeken) * [Beginner boeken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#beginner-boeken) * [Geavanceerd](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#geavanceerd) * [Online](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#online) * [Cheat sheet](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#cheat-sheet) * [Game-based programmeren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#game-based-programmeren) * [Tutorials](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#tutorials) * [Oefenvragen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#oefenvragen) * [Streaming programmeurs](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras#streaming-programmeurs) Was this helpful? --- # Dankwoord | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Deze cursus is een fork van [die van de richting toegepaste informatica](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/_intro/apwt.gitbook.io) . We zijn Tim Dams en al zijn co-auteurs dank verschuldigd voor de stevige basis. Je mag veronderstellen dat alles Tims werk is, wij hebben vooral de vorm van de oefeningen aangepast voor een meer beroepsgerichte opleiding. [PreviousNuttige extras](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/nuttigeextras) [NextMee helpen?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/helpen) Last updated 5 years ago Was this helpful? Was this helpful? --- # H0: Werken met Visual Studio | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Introductie tot C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs) [Werken met Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs) [Je eerste programma](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram) [Input verwerken met ReadLine](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console) [Fouten in je code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten) [Kleuren in Console](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad) [PreviousMee helpen?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/helpen) [NextIntroductie tot C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs) Last updated 5 years ago Was this helpful? Was this helpful? --- # H1: Variabelen en datatypes | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [De essentie van C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials) [Datatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes) [Variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen) [Expressies en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica) [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad) [NextDe essentie van C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials) Last updated 5 years ago Was this helpful? Was this helpful? --- # Je eerste programma | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#console-applicaties) Console-applicaties -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Een console-applicatie is een programma dat zijn in- en uitvoer via een klassiek commando/shell-scherm toont. Een console-applicatie draait in dezelfde omgeving als wanneer we in Windows een command-prompt openen (via Start-> Uitvoeren-> `cmd` \[enter\] ). We zullen in deze cursus enkel console-applicaties leren maken. Grafische frontends (bv WPF) komen in deze cursus niet aan bod. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#readline-en-writeline) ReadLine en WriteLine Console-applicaties maken in C# vereist dat je minstens twee belangrijke C# methoden leert gebruiken: Via `**Console.WriteLine()**` kunnen we tekst op het scherm tonen en met behulp van `**Console.ReadLine()**` kunnen we input van de gebruiker inlezen en in ons programma verwerken. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#je-eerste-console-programma) Je eerste console programma ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Maak een nieuw console-project aan (noem het Demo1) en open het Program.cs bestand (indien het nog niet open is). **Veeg de code die hier reeds staat niet weg!** Voeg onder de lijn `Console.WriteLine("Hello World!");` volgende code toe: Copy Console.WriteLine("Hoi, ik ben het!"); Zodat je dus volgende code krijgt: Copy using System; namespace Demo1 { class Program { static void Main(string[] args) { Console.WriteLine("Hello World!"); Console.WriteLine("Hoi, ik ben het"); } } } Compileer deze code en voer ze uit: \*\*druk hiervoor op het groene driehoekje. Of via het menu Debug en dan Start Debugging. **Let erop dat je iedere 'zin' eindigt met een puntkomma.** ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#moet-ik-niets-bewaren) Moet ik niets bewaren? Neen. Telkens je op de groene "build en run" knop duwt worden al je aanpassingen bewaard. Trouwens: **Kies nooit voor "save as..."**!!!! Dit zal aardig wat problemen in je project veroorzaken, geloof me maar. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#analyse-van-de-code) Analyse van de code We gaan nu iedere lijn code kort bespreken. Sommige lijnen code zullen lange tijd niet belangrijk zijn. Onthoud nu alvast dat: **alle belangrijke code staat tussen de accolades onder de lijn** `**static void Main(string[] args)**`! * `using System;` : Alle `Console`\-commando's die we verderop gebruiken zitten in de `System` bibliotheek. Als we deze lijn (een zogenaamde **directive**) niet zouden schrijven dan moesten we `System.Console.WriteLine` i.p.v. `Console.WriteLine` schrijven verderop in de code. * `namespace Demo1`: Dit is de unieke naam waarbinnen we ons programma zullen steken, en het is niet toevallig de naam van je project. Verander dit nooit tenzij je weet wat je aan het doen bent. * `class Program{}`: Hier start je echte programma. Alle code binnen deze Program accolades zullen gecompileerd worden naar een uitvoerbaar bestand. * `static void Main(string[] args)`: Het startpunt van iedere console-applicatie. Wat hier gemaakt wordt is een **methode** genaamd `Main`. Je programma kan meerdere methoden (of functies) bevatten, maar enkel degene genaamd `Main` zal door de compiler als het startpunt van het programma gemaakt worden. * `Console.WriteLine("Hello world");`: Dit is een **statement** dat de WriteLine-methode aanroept van de `Console`\-klasse. Het zal alle tekst die tussen de aanhalingstekens staat op het scherm tonen. * `Console.WriteLine("Hoi ik ben het");`: en ook deze lijn komt op het scherm. * Sluitende accolades: vervolgens moet voor iedere openende accolade eerder in de code nu ook een bijhorende sluitende volgen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#say-what-now) Say what now?! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfo2IIcqz9LEuU0k%252Fcare.jpg%3Fgeneration%3D1583826017218034%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=e89f89f3&sv=2) Oh boy...Wat was dit allemaal?! We hebben al aardig wat vreemde code zien passeren en het is niet meer dan normaal dat je nu denkt "dit ga ik nooit kunnen". Wees echter niet bevreesd: je zal sneller dan je denkt bovenstaande code als 'kinderspel' gaan bekijken. Een tip nodig? Test en experimenteer met wat je al kunt! Laat deze info rustig inzinken en onthoudt alvast volgende belangrijke zaken: * Al je code komt binnen de `Main` accolades. * Eindig iedere lijn code daar met een puntkomma ( ; ). ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#writeline-tekst-op-het-scherm) WriteLine: Tekst op het scherm De WriteLine-methode is een veelgebruikte methode in Console-applicaties. Het zorgt ervoor dat we tekst op het scherm kunnen tonen. Voeg volgende lijn toe na de vorige WriteLine-lijn in je project: `Console.WriteLine("Wie ben jij?!");` De WriteLine methode zal alle tekst tonen die tussen de " " staan tussen de haakjes van de methode. **De aanhalingstekens aan het begin en einde van de tekst zijn uiterst belangrijk! Alsook het puntkomma helemaal achteraan.** Je programma is nu: Kan je ook deze code uitvoeren?! Make it happen en ga dan gezwind naar het volgende hoofdstuk! [PreviousWerken met Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs) [NextInput verwerken met ReadLine](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console) Last updated 5 years ago Was this helpful? * [Console-applicaties](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#console-applicaties) * [ReadLine en WriteLine](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#readline-en-writeline) * [Je eerste console programma](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#je-eerste-console-programma) * [Analyse van de code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#analyse-van-de-code) * [Say what now?!](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#say-what-now) * [WriteLine: Tekst op het scherm](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram#writeline-tekst-op-het-scherm) Was this helpful? Copy using System; namespace Demo1 { class Program { static void Main(string[] args) { Console.WriteLine("Hello World!"); Console.WriteLine("Hoi, ik ben het"); Console.WriteLine("Wie ben jij?!"); } } } --- # Fouten in je code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcnP9Sjg_ri0kqQM%252Fattention.jpg%3Fgeneration%3D1583826014882936%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=738dd3a3&sv=2) Je code kan niet gecompileerd en uitgevoerd worden zolang er fouten in je code staan (dit bespraken we reeds in [een eerder hoofdstuk](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs) ). Indien je op de groene start knop duwt en volgende waarschuwing krijgt **KLIK DAN NOOIT OP YES EN DUID NOOIT DE CHECKBOX AAN**: > Lees de boodschap eens: wat denk je dat er gebeurt als je op 'yes' duwt? Inderdaad, VS zal de laatste goed gelukte code uitvoeren en dus niet de code die je nu hebt staan waarin nog fouten staan. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-vinden) Fouten vinden -------------------------------------------------------------------------------------------------------------------------------------------------------------------- Zolang er dus fouten in je code staan moet je deze eerst oplossen voor je verder kan. Gelukkig helpt VS je daarmee op 2 manieren: * Fouten in code worden met een rode squigly onderlijnt. * Onderaan zie je in de statusbalk of je fouten hebt. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NidiwFodtJb2dAQ5%252Ferror.PNG%3Fgeneration%3D1583826011829366%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=b5c6ef91&sv=2) Zie je de fout? [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-vinden-1) Fouten vinden ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- Uiteraard ga je vaak code hebben die meerdere schermen omvat. Je kan via de error-list snel naar al je fouten gaan. Open deze door op het error-icoontje onderaan te klikken: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NidkLzaKJL_G10Yy%252Ferrorlist.PNG%3Fgeneration%3D1583826006569641%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=1934787c&sv=2) De errorlist In deze list kan je nu op iedere error klikken om ogenblikkelijk naar de correcte lijn te gaan. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-oplossen) Fouten oplossen ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Wanneer je je cursor op een lijn met een fout zet dan zal je soms vooraan een geel error-lampje zien verschijnen: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NidmrWEAkI2UhxMT%252Ferrorlampje.png%3Fgeneration%3D1583826011751299%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=36574961&sv=2) Lampje Je kan hier op klikken en heel vaak krijg je dan ineens een mogelijke oplossing. **Wees steeds kritisch** hierover want VS is niet alomwetend en kan niet altijd raden wat je bedoelt. Neem dus het voorstel niet zomaar over zonder goed na te denken of het dat was wat je bedoelde. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#meest-voorkomende-fouten) Meest voorkomende fouten ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ De meest voorkomende fouten in deze eerste weken zullen zijn: * **Puntkomma** vergeten. * **Schrijffouten** in je code RaedLine i.p.v. ReadLine. * Geen rekening gehouden met **hoofdletter gevoeligheid** Readline i.p.v. ReadLine (zie volgende hoofdstuk). * Per ongeluk **accolades verwijderd**. * Code geschreven op plekken waar dat niet mag (je mag enkel binnen de accolades van `Main` schrijven). [PreviousInput verwerken met ReadLine](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console) [NextKleuren in Console](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren) Last updated 5 years ago Was this helpful? * [Fouten vinden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-vinden) * [Fouten vinden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-vinden-1) * [Fouten oplossen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#fouten-oplossen) * [Meest voorkomende fouten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten#meest-voorkomende-fouten) Was this helpful? --- # Introductie tot C# | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#introductie-tot-programmeren-met-c-sharp) Introductie tot programmeren met C-Sharp ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#het-algoritme) Het algoritme De essentie van een computerprogramma is het zogenaamde **algoritme** (het "recept" zeg maar). Dit is de reeks instructies die het programma moet uitvoeren telkens het wordt opgestart. Het algoritme van een programma moet je zelf verzinnen. De volgorde waarin de instructies worden uitgevoerd zijn uiteraard zeer belangrijk. Dit is exact hetzelfde als in het echte leven: een algoritme om je fiets op te pompen kan zijn: Copy 1. Haal dop van het ventiel 2. Plaats pomp op ventiel 3. Begin te pompen Eender welke andere volgorde van bovenstaande algoritme zal vreemde (en soms fatale) fouten geven. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#c-sharp) C-Sharp Om een algoritme te schrijven dat onze computer begrijpt dienen we een programmeertaal te gebruiken. Net zoals er ontelbare spreektalen in de wereld zijn, zijn er ook vele programmeertalen. **C#** (spreek uit _'siesjarp'_) is er een van de vele. In tegenstelling tot onze spreektalen moet een computertaal 'exact' zijn en moet het op ondubbelzinnige manier door de computer verstaan worden. C# is een taal die deel uitmaakt van de .NET (spreek uit _'dotnet'_) omgeving die meer dan 15 jaar geleden door Microsoft werd ontwikkeld (juli 2000). > Deze cursus werd geschreven in [Markdown](https://en.wikipedia.org/wiki/Markdown) > . Helaas ondersteunt deze geen # in titels. Daardoor heet dit hoofdstuk "C-Sharp" en niet "C#". Niets aan te doen. De geschiedenis en de hele .NET-wereld vertellen zou een cursus op zich betekenen en gaan we hier niet doen. Het is nuttig om weten dat er een gigantische bron aan informatie over .NET en C# online te vinden is, beginnende met [docs.microsoft.com](https://docs.microsoft.com/en-us/dotnet/csharp/getting-started/) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#microsoft-.net) Microsoft .NET -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bij de geboorte van .NET in 2000 zat dus ook de taal C#. .NET is een zogenaamd **framework**. Dit framework bestaat uit een grote groep van bibliotheken (**class libraries**) en een _virtual execution system_ genaamd de **Common Language Runtime (CLR)**. De CLR zal ervoor zorgen dat C#, of andere .NET talen (F#, VB.NET, etc.), kunnen samenwerken met de vele bibliotheken. Om een uitvoerbaar bestand te maken (**executable**, vandaar de extensie .exe bij uitvoerbare programma's in windows) zal de broncode die je hebt geschreven in C# worden omgezet naar **Intermediate Language** (IL) code. Op zich is deze IL code nog niet uitvoerbaar, maar dat is niet ons probleem. Wanneer een gebruiker een in IL geschreven bestand wil uitvoeren dan zal, achter de schermen, de CLR deze code ogenblikkelijk naar machine code omzetten (**Just -In-Time** of JIT compilatie) en uitvoeren. De gebruiker zal dus nooit dit proces merken (tenzij er geen .NET framework werd geïnstalleerd op het systeem). ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NjGaR8c61WKtXnIf%252Fcompiler.png%3Fgeneration%3D1583826013747929%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=5f196ec0&sv=2) Compiler process [(Bron afbeelding)](https://docs.microsoft.com/en-us/dotnet/csharp/getting-started/introduction-to-the-csharp-language-and-the-net-framework) Merk op dat we veel details van de compiler achterwege laten hier. De compiler is een uitermate complex element, maar in deze fase van je (prille) programmeursleven hoeven we enkel de kern van de compiler te begrijpen: **het omzetten van C# code naar een uitvoerbaar bestand geschreven in IL code**. > Deze cursus heeft als doel om je de programmeertaal C# aan te leren. Terwijl we dit doen zullen we ook geregeld andere .NET framework gerelateerde zaken aanraken. [PreviousH0: Werken met Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio) [NextWerken met Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs) Last updated 5 years ago Was this helpful? * [Introductie tot programmeren met C-Sharp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#introductie-tot-programmeren-met-c-sharp) * [Het algoritme](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#het-algoritme) * [C-Sharp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#c-sharp) * [Microsoft .NET](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs#microsoft-.net) Was this helpful? --- # H2: Tekst in code | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Strings en chars](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings) [Strings samenvoegen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation) [Unicode tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica) [Uitbreidingsoefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica) [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica) [NextStrings en chars](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings) Last updated 5 years ago Was this helpful? Was this helpful? --- # Kleuren in Console | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#kleuren-in-console) Kleuren in console ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Je kan in console-applicaties zelf bepalen in welke kleur nieuwe tekst op het scherm verschijnt. Je kan zowel de kleur van het lettertype instellen (via `ForegroundColor`) als de achtergrondkleur (`BackgroundColor`). Je kan met de volgende expressies de console-kleur veranderen, bijvoorbeeld de achtergrond in blauw en de letters in groen: Copy Console.BackgroundColor = ConsoleColor.Blue; Console.ForegroundColor = ConsoleColor.Green; Vanaf dan zal alle tekst die je na deze 2 expressies via `WriteLine` naar het scherm stuurt met deze kleuren werken. Een voorbeeld: Copy Console.WriteLine("Tekst in de standaard kleur"); Console.BackgroundColor = ConsoleColor.Blue; Console.ForegroundColor = ConsoleColor.Green; Console.WriteLine("Deze tekst komt in het groen met blauwe achtergrond"); Console.ForegroundColor = ConsoleColor.Red; Console.WriteLine("En deze in het rood met blauwe achtergrond"); Als je deze code uitvoert krijg je als resultaat: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfp_fwk1xOPsK_bD%252Fkleuren.PNG%3Fgeneration%3D1583826010635408%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=76bb73f7&sv=2) Resultaat voorgaande code Kleur in console gebruiken is nuttig om je gebruikers een minder eentonig en meer informatieve applicatie aan te bieden. Je zou bijvoorbeeld alle foutmeldingen in het rood kunnen laten verschijnen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#kleur-resetten) Kleur resetten ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Soms wil je terug de originele applicatie-kleuren hebben. Je zou manueel dit kunnen instellen, maar wat als de gebruiker slecht ziend is en in z'n besturingssysteem andere kleuren als standaard heeft ingesteld?! De veiligste manier is daarom de kleuren te resetten door de `Console.ResetColor()` methode aan te roepen zoals volgend voorbeeld toont: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#mogelijke-kleuren) Mogelijke kleuren ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Alle kleuren die beschikbaar zijn zijn beschreven in `ConsoleColor` deze zijn: * `ConsoleColor.Black` * `ConsoleColor.DarkBlue` * `ConsoleColor.DarkGreen` * `ConsoleColor.DarkCyan` * `ConsoleColor.DarkRed` * `ConsoleColor.DarkMagenta` * `ConsoleColor.DarkYellow` * `ConsoleColor.Gray` * `ConsoleColor.DarkGray` * `ConsoleColor.Blue` * `ConsoleColor.Green` * `ConsoleColor.Cyan` * `ConsoleColor.Red` * `ConsoleColor.Magenta` * `ConsoleColor.Yellow` ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252Fsync%252F46c1960f7b3ccd678a7ccc2ad94ab6c7b296cdca.jpg%3Fgeneration%3D1588682478713894%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=64676780&sv=2) Bron afbeelding : https://www.c-sharpcorner.com/article/change-console-foreground-and-background-color-in-c-sharp/ [PreviousFouten in je code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten) [NextOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad) Last updated 5 years ago Was this helpful? * [Kleuren in console](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#kleuren-in-console) * [Kleur resetten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#kleur-resetten) * [Mogelijke kleuren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren#mogelijke-kleuren) Was this helpful? Copy Console.ForegroundColor = ConsoleColor.Red; Console.WriteLine("Error!!!! Contacteer de helpdesk"); Console.ResetColor(); Console.WriteLine("Het programma sluit nu af"); --- # Input verwerken met ReadLine | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren We nemen terug ons eerste programma erbij en gaan hier aan verder werken: Copy using System; namespace Demo1 { class Program { static void Main(string[] args) { Console.WriteLine("Hello World!"); Console.WriteLine("Hoi, ik ben het"); Console.WriteLine("Wie ben jij?!"); } } } [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#readline-input-van-de-gebruiker-verwerken) ReadLine: Input van de gebruiker verwerken ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Met de console kan je met een handvol methoden reeds een aantal interessante dingen doen. Zo kan je bijvoorbeeld input van de gebruiker inlezen en bewaren in een variabele als volgt: Copy string result; result = Console.ReadLine(); Bespreking van deze code: `string result;` * Concreet zeggen we hiermee aan de compiler: maak in het geheugen een plekje vrij waar enkel data van het type string in mag bewaard worden; * Noem deze geheugenplek `result` zodat we deze later makkelijk kunnen in en uitlezen. `result = Console.ReadLine();` * Vervolgens roepen we de `ReadLine` methode aan. Deze methode zal de invoer van de gebruiker uitlezen tot de gebruiker op enter drukt. * Het resultaat van de ingevoerde tekst wordt bewaard in de variabele `result` (denk eraan dat de toekenning van rechts naar links gebeurt). Je programma zou nu moeten zijn: Start nogmaals je programma. Je zal merken dat je programma nu een cursor toont en wacht op invoer. Je kan nu eender wat intypen en van zodra je op enter duwt gaat het programma verder (in dit geval stopt het programma hierna dus). [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#input-gebruiker-verwerken-en-gebruiken) Input gebruiker verwerken en gebruiken ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- We kunnen nu invoer van de gebruiker, die we hebben bewaard in de variabele `result` gebruiken en tonen op het scherm. Op de tweede lijn hier gebruiken we de variabele `result` (waar de invoer van de gebruiker in bewaard wordt) als parameter in de `WriteLine`\-methode. Met andere woorden: de `WriteLine` methode zal op het scherm tonen wat de gebruiker even daarvoor heeft ingevoerd. Je volledige programma ziet er dus nu zo uit: Test het programma en voer je naam in wanneer de cursor knippert. Voorbeelduitvoer (lijn 3 is wat de gebruiker heeft ingetypt) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#aanhalingsteken-of-niet) Aanhalingsteken of niet? Wanneer je de inhoud van een variabele wil gebruiken in een methode zoals `WriteLine()` dan plaats je deze zonder aanhalingsteken! Bekijk zelf eens wat het verschil wordt wanneer je volgende lijn code `Console.Write(result);` vervangt door `Console.Write("result");`. De uitvoer wordt dan: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#write-en-writeline) Write en WriteLine ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- De `WriteLine`\-methode zal steeds een line break (een 'enter' ) aan het einde van de lijn zetten zodat de cursor naar de volgende lijn springt. De `Write`\-methode zal geen enter aan het einde van de lijn toevoegen. Als je dus vervolgens iets toevoegt (met een volgende `Write` of `WriteLine`) **dan zal dit aan dezelfde lijn toegevoegd worden.** Vervang daarom eens de laatste 3 lijnen code in je project door: Voer je programma uit en test het resultaat. Je krijgt nu: Wat is er verkeerd gelopen? Al je tekst van de laatste lijn plakt zo dicht bij elkaar? Inderdaad, we zijn spaties vergeten toe te voegen! Spaties zijn ook tekens die op scherm moeten komen (ook al zien we ze niet) en je dient dus binnen de aanhalingstekens spaties toe te voegen. Namelijk: Je uitvoer wordt nu: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#opletten-met-spaties) Opletten met spaties Spaties zijn ook tekens die op scherm moeten komen (ook al zien we ze niet) en je dient dus binnen de aanhalingstekens spaties toe te voegen. Indien je deze erbuiten plaats dan heeft dit geen effect (je wist al uit het eerste hoofdstuk dat C# alle witregels negeert die niet tussen aanhalingstekens staan). _In volgend voorbeeld zijn de spaties aangegeven als liggende streepjes ( \_ )_. Fout (de code zal werken maar je spaties worden genegeerd): Correct: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#zinnen-aan-elkaar-plakken) Zinnen aan elkaar plakken --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- We kunnen dit hele verhaal een pak korter tonen. De plus-operator (`+`) in C# kan je namelijk gebruiken om variabelen van het type string aan elkaar te plakken. De laatste 3 lijnen code kunnen korter geschreven worden als volgt: Merk op dat result dus NIET tussen aanhalingstekens staat, in tegenstelling de andere stukken zin. Waarom is dit? Aanhalingstekens in C# duiden aan dat een stuk tekst moet beschouwd worden als tekst van het type string. Als je geen aanhalingsteken gebruikt dan zal C# de tekst beschouwen als een variabele met die naam. Bekijk zelf eens wat het verschil wanneer je volgende lijn code vervangt door de lijn er onder: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#meer-input-vragen) Meer input vragen Als je meerdere inputs van de gebruiker tegelijkertijd wenst te bewaren dan zal je meerdere geheugenplekken nodig hebben om de invoer te bewaren. Bijvoorbeeld: Je mag echter ook de geheugenplekken al vroeger maken. In C# zet men de geheugenplek creatie zo dicht mogelijk bij de code waar je die plek gebruikt (zoals vorig voorbeeld), maar dat is geen verplichting. Dit mag dus ook: [PreviousJe eerste programma](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram) [NextFouten in je code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/4_fouten) Last updated 5 years ago Was this helpful? * [ReadLine: Input van de gebruiker verwerken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#readline-input-van-de-gebruiker-verwerken) * [Input gebruiker verwerken en gebruiken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#input-gebruiker-verwerken-en-gebruiken) * [Aanhalingsteken of niet?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#aanhalingsteken-of-niet) * [Write en WriteLine](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#write-en-writeline) * [Opletten met spaties](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#opletten-met-spaties) * [Zinnen aan elkaar plakken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#zinnen-aan-elkaar-plakken) * [Meer input vragen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/3_console#meer-input-vragen) Was this helpful? Copy namespace Demo1 { class Program { static void Main(string[] args) { Console.WriteLine("Hoi, ik ben het!"); Console.WriteLine("Wie ben jij?!"); string result; result = Console.ReadLine(); } } } Copy Console.WriteLine("Dag "); Console.WriteLine(result); Console.WriteLine(" hoe gaat het met je?"); Copy using System; namespace Demo1 { class Program { static void Main(string[] args) { Console.WriteLine("Hoi, ik ben het!"); Console.WriteLine("Wie ben jij?!"); string result; result = Console.ReadLine(); Console.WriteLine("Dag"); Console.WriteLine(result); Console.WriteLine("hoe gaat het met je?"); } } } Copy Hoi, ik ben het! Wie ben jij?! tim [enter] Dag tim hoe gaat het met je? Copy Hoi, ik ben het! Wie ben jij?! tim [enter] Dag result hoe gaat het met je? Copy Console.Write("Dag"); Console.Write(result); Console.Write("hoe gaat het met je?"); Copy Hoi, ik ben het! Wie ben jij?! tim [enter] Dagtimhoe gaat het met je? Copy Console.Write("Dag "); Console.Write(result); Console.Write(" hoe gaat het met je?"); Copy Hoi, ik ben het! Wie ben jij?! tim [enter] Dag tim hoe gaat het met je? Copy Console.Write("Dag"_); Console.Write(result_); Console.Write("hoe gaat het met je?"); Copy Console.Write("Dag_"); Console.Write(result); Console.Write("_hoe gaat het met je?"); Copy Console.WriteLine("Dag " + result + " hoe gaat het met je?"); Copy Console.WriteLine("Dag "+ result + " hoe gaat het met je?"); Console.Write("Dag "+ "result" + " hoe gaat het met je?"); Copy Console.WriteLine("Geef leeftijd"); string leeftijd; //eerste geheugenplekje aanmaken leeftijd = Console.ReadLine(); Console.WriteLine("Geef adres"); string adres; //tweede geheugenplekje aanmaken adres = Console.ReadLine(); Copy string leeftijd; //eerste geheugenplekje aanmaken string adres; //tweede geheugenplekje aanmaken Console.WriteLine("Geef leeftijd"); leeftijd = Console.ReadLine(); Console.WriteLine("Geef adres"); adres = Console.ReadLine(); --- # Uitbreidingsoefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Volgende oefeningen zijn al iets stevigers. Ze gebruiken concepten die nog niet aan bod gekomen zijn in de cursus en je wordt niet verondersteld ze te kunnen maken aan het begin van het semester. Je kan ze wel bekijken als je eerder al geprogrammeerd hebt of wanneer je aan het studeren bent voor het examen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#oefening-h2-systeem-informatie-pro) Oefening: H2-systeem-informatie-pro ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#leerdoelen) Leerdoelen * gebruik van string interpolation * gebruik van `System.IO` ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#functionele-analyse) Functionele analyse Je moet informatie over de harde schijven op je systeem weergeven. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#technische-analyse) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#voorbeeldinteractie-s) voorbeeldinteractie(s) Copy Vrije ruimte op jouw c-schijf: 10803744768 Totale ruimte van jouw c-schijf: 159671906304 ******************************************************************************** Geef met nummer 1 t/m 2 aan over welke harde schijf van jouw pc je info wenst: 1 De vrije ruimte van C:\ is 108 Gb ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#technische-hulp) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#programmaverloop) Programmaverloop Ook informatie over de harde schijven kan je verkrijgen (in bits). Dit vereist wel dat je bovenaan je programma volgende lijn bijschrijft: `using System.IO`. Vervolgens kan je in je programma schrijven: De lijn met `using` is om aan te geven dat we iets uit de `System.IO` bibliotheek nodig hebben, namelijk `DriveInfo`. Schrijven we dat niet dan moeten we in onze code DriveInfo aanroepen met z'n volledige path: `System.IO.DriveInfo....` De 0 tussen rechte haakjes is de index van welke schijf je informatie wenst. 0 is de eerste harde schijf, 1 de tweede, enzovoort. (Ter info: dit zijn arrays, zie later) Vraag aan de gebruiker het nummer van de harde schijf waar meer informatie over moet getoond worden. Opgelet: sta toe dat de gebruiker 1 voor de eerste harde schijf mag gebruiken, 2 voor de tweede, enzovoort. Je zal dus in code nog manueel 1 moeten aftrekken van de invoer van de gebruiken. Bv: #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#testscenarios) Testscenario's * wat gebeurt er wanneer je het datatype int zou wijzigen in string? ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#ondersteunend-materiaal) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#oefening-h2-weerstandsberekendaar-deel3) Oefening: H2-weerstandsberekendaar-deel3 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Deze bouwt voort op H2-weerstandsberekendaar-deel2. Kan je afhankelijk van de ringwaarde het getal in de tabel in de juiste kleur zetten conform de weerstandskleuren? (tip: je zal `Write` en `if` moeten leren gebruiken) [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica) [NextH3: Werken met data](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data) Last updated 5 years ago Was this helpful? * [Oefening: H2-systeem-informatie-pro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#oefening-h2-systeem-informatie-pro) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#technische-analyse) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#technische-hulp) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#ondersteunend-materiaal) * [Oefening: H2-weerstandsberekendaar-deel3](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica#oefening-h2-weerstandsberekendaar-deel3) Was this helpful? Copy long cDriveInBytes = DriveInfo.GetDrives()[0].AvailableFreeSpace; long totalSize = DriveInfo.GetDrives()[0].TotalSize; Copy int input= Convert.ToInt32(Console.ReadLine()) - 1 ; long totalSize = DriveInfo.GetDrives()[input].TotalSize; --- # Werken met Visual Studio | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#kennismaken-met-c-en-visual-studio) Kennismaken met C# en Visual Studio -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Visual Studio (VS) is een pakket dat een groot deel tools samenvoegt (debugger, code editor, compiler, etc) zodat je niet tientallen paketten moet gebruiken om software te schrijven. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf-mL2WouMuEQZ-f%252Fvslogo.png%3Fgeneration%3D1583826000548798%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=39c27cf5&sv=2) VS2019 Logo Visual Studio is een zogenaamde IDE("Integrated Development Environment") en is op maat gemaakt om C#.NET applicaties te ontwikkelen. Je bent echter verre van verplicht om enkel C# applicaties in VS te ontwikkelen, je kan gerust VB.NET, TypeScript, Python en andere talen gebruiken. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#de-compiler-en-visual-studio) De compiler en Visual Studio ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Jouw taak als programmeur in deze cursus is algoritmes in C# taal uitschrijven. We zouden dit in een eenvoudige tekstverwerker kunnen doen, maar dan maken we het onszelf lastig. Net zoals je tekst in notepad kunt schrijven, is het handiger dit in bijvoorbeeld Word te doen: je krijgt een spellingchecker en allerlei handige extra's. Ook voor het schrijven van computer code is het handiger om een zogenaamde IDE te gebruiken, een omgeving die ons zal helpen foutloze C# code te schrijven. Het hart van Visual Studio bestaat uit de **compiler** die we hiervoor besproken. De compiler zal je C# code omzetten naar de IL-code zodat jij (of anderen) je applicatie op een computer (of ander apparaat) kunnen gebruiken. Zolang de C# niet exact voldoet aan de C# syntax (zie verder) zal de compiler het vertikken een uitvoerbaar bestand voor je te genereren. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf-otpFPcpwreq6N%252Fcompilereenvoudig.png%3Fgeneration%3D1583826000863055%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=ed154a62&sv=2) Vereenvoudigd compiler overzicht In deze cursus zullen we steeds werken met Visual Studio. Niet met Visual Studio Code. Visual Studio code is een zogenaamde lightweight versie van VS die echter zeker ook z'n voordelen heeft (gratis, snel, compact, etc). Visual Studio vindt dankzij VS Code eindelijk ook z'n weg op andere platformen dan enkel die van Microsoft. Zoek je een lightweight versie dan moet je zeker eens [Visual Studio Code](https://code.visualstudio.com/) eens proberen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#visual-studio-installeren) Visual Studio Installeren ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- In deze cursus zullen de voorbeelden steeds met de **Community** editie van VS gemaakt zijn. Je kan deze als AP-student gratis downloaden en installeren via [visualstudio.microsoft.com/vs](https://visualstudio.microsoft.com/vs/) . Het is belangrijk bij de installatie dat je minimaal * de **.NET desktop development** en **.NET Core cross-platform development** workload selecteert als te installeren tools. ![VS Installeren](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252Fsync%252F64330394d3b80e1a7aaff89c294340da49d6bb82.png%3Fgeneration%3D1588682469550203%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=f115606e&sv=2) * Bij individual components de "Class Designer" aanduiden ![VS Installeren](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252Fsync%252F99f20399dc550b01d2488d09659019257b71281c.png%3Fgeneration%3D1588682478102348%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=e863b3c2&sv=2) * Uiteraard ben je vrij om meerdere zaken te installeren. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#visual-studio-opstarten) Visual studio opstarten --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Na het opstarten van VS krijg je het startvenster te zien van waaruit je verschillende dingen kan doen. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf-uqz2Mia8gTPPP%252Fvsstart.png%3Fgeneration%3D1583826000628644%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=36734806&sv=2) VS Opstarten ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#een-nieuw-project-aanmaken) Een nieuw project aanmaken We zullen nu een nieuw project aanmaken, kies hiervoor "Create a new project". Het "New Project" venster dat nu verschijnt geeft je hopelijk al een glimp van de veelzijdigheid van VS. In het rechterdeel zie je bijvoorbeeld alle Project Types staan. M.a.w. dit zijn alle soorten programma’s die je kan maken in VS. Naargelang de geïnstalleerde opties en bibliotheken zal deze lijst groter of kleiner zijn. Dit semester kiezen we steeds als Project Type **Console App (.NET Core)**. Kies dit type en klik 'Next'. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf-wlkvflvGZGMMH%252Fvsproject.png%3Fgeneration%3D1583826001434098%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=e52fc456&sv=2) VS Project maken Op het volgende scherm kan je een naam geven voor je project alsook de locatie op de harde schijf waar het project dient opgeslagen te worden. **Onthoudt waar je je project aanmaakt zodat je dit later terugvindt**. **De solution name blijf je af (deze moet momenteel dezelfde naam zijn als je project)** Geef je projectnamen ogenblikkelijk duidelijke namen zodat je niet opgezadeld geraakt met projecten zoals Project201. Geef je project de naam "MyFirstProject" en kies een goede locatie (ik raad je aan dit steeds in Dropbox of Onedrive te doen) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf-yrrNFvFpKW2yX%252Fvsprojectname.PNG%3Fgeneration%3D1583826000877635%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=edc98c42&sv=2) VS Project maken **Klik nu op create**. VS heeft nu reeds een aantal bestanden aangemaakt die je nodig hebt om een ‘Console Applicatie’ te maken. Een console applicatie is een programma dat alle uitvoer naar een zogenaamde ‘console’ stuurt, een shell. M.a.w., je kan enkel tekst (Unicode) als uitvoer genereren en dus geen multimedia elementen zoals afbeeldingen, geluid, etc. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#ide-layout) IDE Layout ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Wanneer je VS opstart zal je mogelijk overweldigd worden door de hoeveelheid menu's, knopjes, schermen, etc. Dit is normaal voor een IDE: deze wil zoveel mogelijk mogelijkheden aanbieden aan de gebruiker. Vergelijk dit met Word: afhankelijk van wat je gaat doen gebruikt iedere gebruiker andere zaken van Word. De makers van Word kunnen dus niet bepaalde zaken weglaten, ze moeten net zoveel mogelijk aanbieden. Laat je niet afschrikken door VS. Het is een imponerend programma, maar je zal er sneller dan je verwacht, je weg in terugvinden! We zullen nu eerst eens bekijken wat we allemaal zien in VS na het aanmaken van een nieuw programma. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf0-qvZjOHqf7avO%252Fvside.png%3Fgeneration%3D1583826015754692%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=e74e0641&sv=2) VS Ide Overzicht * Je kan meerdere bestanden tegelijkertijd openen in VS. Ieder bestand zal z'n eigen **tab** krijgen. De actieve tab is het bestand wiens inhoud je in het hoofdgedeelte eronder te zien krijgt. Merk op dat enkel open bestanden een tab krijgen. * De "**solution explorer**" toont alle bestanden en elementen die tot het huidige project behoren. Als we dus later nieuwe bestanden toevoegen dan kan je die hier zien (en openen). * Het **properties** venster (eigenschappen) is een belangrijk venster. Hier komen alle eigenschappen van het huidige geselecteerde element. Selecteer bijvoorbeeld maar eens Program.cs in de solution explorer en merk op dat er allerlei eigenschappen getoond worden. Onderaan het Properties venster wordt steeds meer informatie getoond over de huidig geselecteerde eigenschap. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#layout-kapot-kwijt-vreemd) Layout kapot/kwijt/vreemd De layout van VS kan je volledig naar je hand zetten. Je kan ieder (deel-)venster en tab verzetten, verankeren en zelfs verplaatsen naar een ander bureaublad. Experimenteer hier gerust mee en besef dat je steeds alles kan herstellen. Het gebeurt namelijk al eens dat je layout een beetje om zeep is: * Om eenvoudig een venster terug te krijgen, bijvoorbeeld het properties window of de solution explorer: klik bovenaan in de menubalk op "View" en kies dan het gewenste venster (soms staat dit in een submenu). * Je kan ook altijd je layout in z'n geheel **resetten**: ga naar "Window" en kies "Reset window layout". ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf01unXWgDxmKP18%252Fvsreset.png%3Fgeneration%3D1583826001783317%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=9cbed14b&sv=2) VS Layout resetten [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#je-programma-starten) Je programma starten --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- De code die VS voor je heeft gemaakt is reeds een werkend, maar weinig nuttig, programma. Je kan de code compileren en uitvoeren door op de groene driehoek bovenaan te klikken: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf03ljCOdm9lb1qb%252Fstartprogram.PNG%3Fgeneration%3D1583826017264988%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=52a9c380&sv=2) Command shell Als alles goed gaat krijg je nu "Hello world" te zien en wat extra informatie omtrent het programma dat net werd uitgevoerd: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nf05ASMV_D-oprXA%252Fvscmd.png%3Fgeneration%3D1583826000993873%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=ce036cba&sv=2) Command shell Veel doet je programma nog niet natuurlijk, dus sluit dit venster maar terug af door een willekeurige toets in te drukken. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#is-dit-alles) Is dit alles? Nee hoor. Visual Studio is lekker groot. Was bovenstaande uitleg toch niet zo verhelderend als ik hoopte? Bekijk dan volgende korte, maar zeer duidelijke uitleg over Visual Studio en de verschillende onderdelen (klik zeker op de chapters in het linkermenu om verder te lezen): [hier](https://tutorials.visualstudio.com/vs-get-started/intro) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#liever-vs-enterprise) Liever VS Enterprise? ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Als AP-student heb je ook recht op een Visual Studio Enterprise licentie. Wil je deze gebruiken, download deze dan via [https://visualstudio.microsoft.com/vs/](https://visualstudio.microsoft.com/vs/) en zorg ervoor dat je een key aanvraagt via de tab 'Software' op [Azure for education](https://azureforeducation.microsoft.com/devtools) . Je kan deze sleutel vervolgens via Help->Register in VS invoeren. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#kennisclip) Kennisclip ------------------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [De VS omgeving](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=7f6e9867-6b45-4c98-9255-aacd00880111) * [De folderstructuur van projecten](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=f021b918-db11-43e4-93bf-a969006a6868) [PreviousIntroductie tot C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/0_intrototcs) [NextJe eerste programma](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/2_firstprogram) Last updated 5 years ago Was this helpful? * [Kennismaken met C# en Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#kennismaken-met-c-en-visual-studio) * [De compiler en Visual Studio](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#de-compiler-en-visual-studio) * [Visual Studio Installeren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#visual-studio-installeren) * [Visual studio opstarten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#visual-studio-opstarten) * [Een nieuw project aanmaken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#een-nieuw-project-aanmaken) * [IDE Layout](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#ide-layout) * [Layout kapot/kwijt/vreemd](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#layout-kapot-kwijt-vreemd) * [Je programma starten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#je-programma-starten) * [Is dit alles?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#is-dit-alles) * [Liever VS Enterprise?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#liever-vs-enterprise) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/1_werkenmetvs#kennisclip) Was this helpful? --- # Unicode tonen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#unicode-tonen) Unicode tonen ---------------------------------------------------------------------------------------------------------------------------------------------------------- Niets is zo leuk als de vreemdste tekens op het scherm tonen. In oude console-games werden deze tekens vaak gebruikt om _complexe_ tekeningen op het scherm te tonen: om je filmpjes nog cooler te maken leggen we daarom uit hoe je dit kan doen, gebruikmakende van je kennis over converteren. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfyvf8uTUjQS1Qzp%252Fkerosenethunder_mockup.png%3Fgeneration%3D1583826018393035%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=a1b97bb&sv=2) Dwarven fortress ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#unicode-karakters-tonen) Unicode karakters tonen Zonder een uitleg te geven over het verschil tussen ASCII en Unicode is het vooral belangrijk te weten dat je best met Unicode werkt. 1. Zoek het teken(s) dat je nodig hebt in een Unicode-tabel ([deze is handig](https://unicode-table.com/en/) ) 2. Plaats bovenaan je Main: `Console.OutputEncoding = System.Text.Encoding.UTF8;` 3. Je kan nu op 2 manieren dit teken in console plaatsen #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#manier-1-copy-paste) Manier 1: copy/paste Kopieer het karakter zelf en plaats het in je code waar je het nodig hebt, bijvoorbeeld: #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#manier-2-hexadecimale-code-casten-naar-char) Manier 2: hexadecimale code casten naar char Noteer de hexadecimale code van het karakter dat in de tabel staat. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfyy8l_dg8-UJTDU%252Fletter.jpg%3Fgeneration%3D1583826025876429%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=2cdf1f0&sv=2) In dit geval is de code 0x02e7. Om dit teken te tonen schrijf je dan: In C# schrijf je hexadecimale getallen als volgt als je ze rechstreeks in een string wilt plaatsen: \\u02e7 Wil je dus bovenstaande teken schrijven dan kan dan ook als volgt: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#ascii-art-tonen) Ascii-art tonen -------------------------------------------------------------------------------------------------------------------------------------------------------------- Soms zou je multiline ASCII-art willen tonen in je C# applicatie. Dit kan je eenvoudig oplossen door gebruik te maken van het `@` teken voor een string. Stel dat je een toffe titel of tekening via een van volgende sites hebt gemaakt: * [Asciiflow.Com](http://asciiflow.com/) * [Ascii title generator](http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something) * [Ascii generator](http://www.network-science.de/ascii/) Je kan het resultaat eenvoudig naar je klembord kopiëren en vervolgens in je C#-code integraal copy pasten als literal voor een `string` op voorwaarde dat je het laat voorafgaan door `@"` en uiteraard eindigt met `";`. Bijvoorbeeld: [PreviousStrings samenvoegen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation) [NextOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica) Last updated 5 years ago Was this helpful? * [Unicode tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#unicode-tonen) * [Unicode karakters tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#unicode-karakters-tonen) * [Ascii-art tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode#ascii-art-tonen) Was this helpful? Copy Console.WriteLine("˧"); Copy char blokje = (char)0x02e7; Console.WriteLine(blokje); Copy Console.WriteLine("\u02e7"); Copy string myname=@" ___________________ \__ ___/\______ \ | | | | \ | | | ` \ |____| /_______ / \/ "; Console.WriteLine(myname); --- # Input verwerken en omzetten | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#input-van-de-gebruiker-verwerken) Input van de gebruiker verwerken ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Dit hoofdstuk is niet lang, maar het is wel een zeer belangrijk aspect van console-applicaties! En applicatie die geen input van de gebruiker vergt kan even goed een screensaver zijn. We hebben reeds gezien hoe we met `Console.ReadLine()` de gebruiker tekst kunnen laten invoeren en die we dan vervolgens kunnen verwerken om bijvoorbeeld z'n naam op het scherm te tonen. **De uitdaging met** `**ReadLine**` **is dat deze ALTIJD een string teruggeeft:** Copy string userInput= Console.ReadLine(); Willen we dat de gebruiker een getal invoert, bijvoorbeeld z'n leeftijd, dan zullen dit nog steeds als `string` moeten opvangen **en vervolgens CONVERTEREN**. User input verwerken (dat een andere type dan string moet zijn) bestaat dus uit 3 stappen: * Input **uitlezen** met `Console.ReadLine()` * Input **bewaren** in een `string` variabele * De variabele **converteren** met `Convert.` bibliotheek naar het gewenste type [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#input-converteren) Input converteren ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Om strings naar een ander type te converteren gebruiken we best de Convert.-bibliotheek (maar `.Parse()` kan ook). De volgende code zal je dus erg vaak moeten schrijven. Stel dat we aan de gebruiker z'n gewicht vragen, dan moeten we dus doen: Copy Console.WriteLine("Geef je gewicht"); string inputGewicht= Console.ReadLine(); double gewicht= Convert.ToDouble(inputGewicht); [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#foutloze-input) Foutloze input ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- Voorgaande code veronderstelt dat de gebruiker géén fouten invoert. De conversie zal namelijk mislukken indien de gebruiker bijvoorbeeld `IKWEEG10KG` invoert in plaats van `10,3`. De komende hoofdstukken **moet** je er altijd van uitgaan dat de gebruiker foutloze input geeft. **Opgelet**: de invoer van kommagetallen door de gebruiker is afhankelijk van de landinstellingen van je besturingssysteem. Staat deze in Belgisch/Nederlands dan moet je kommagetallen met een **KOMMA**(`,`) invoeren (dus `9,81`), staat deze in het Engels dan moet je een **PUNT**(`.`) gebruiken (`9.81`). **Opgelet 2**: In je C# code moet je doubles ALTIJD met een punt schrijven. Dit is onafhankelijk van je taalinstellingen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#fouten-in-input) Fouten in input ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ En wat als je toch foute invoer wilt opvangen? Dan is `TryParse` je vriend. We zullen dit bespreken wanneer we aan Methoden komen. Ongeduldig? [Lees hier alles over TryParse](https://www.dotnetperls.com/parse) . [PreviousCasting, conversie en parsing](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting) [NextMath-library en berekeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math) Last updated 5 years ago Was this helpful? * [Input van de gebruiker verwerken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#input-van-de-gebruiker-verwerken) * [Input converteren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#input-converteren) * [Foutloze input](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#foutloze-input) * [Fouten in input](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten#fouten-in-input) Was this helpful? --- # H3: Werken met data | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Casting, conversie en parsing](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting) [Input verwerken en omzetten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten) [Math-library en berekeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math) [Random](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random) [Debuggen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica) [PreviousUitbreidingsoefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica) [NextCasting, conversie en parsing](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting) Last updated 5 years ago Was this helpful? Was this helpful? --- # Beslissingen intro | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Nu we de elementaire zaken van C# en Visual Studio kennen is het tijd om onze programma's wat interessanter te maken. De ontwikkelde programma's tot nog toe waren steevast lineair van opbouw, ze werden lijn per lijn uitgevoerd zonder de mogelijkheid om de _flow_ van het programma aan te passen. Het programma doorliep de lijnen braaf na elkaar en wanneer deze aan het einde kwam sloot het programma zich af. Onze programma's waren met andere woorden niet meer dan een eenvoudige oplijstingen van opdrachten. Je kan het vergelijken met een lijst die je vertelt over hoe je een brood moet kopen: 1. Neem geld uit spaarpot 2. Wandel naar de bakker om de hoek 3. Vraag om een brood 4. Krijg het brood 5. Betaal het geld aan de bakker 6. Keer huiswaarts 7. Smullen maar Alhoewel dit algoritme redelijk duidelijk en goed zal werken, zal de realiteit echter zelden zo goed zijn. Een beter algoritme (dat foutgevoeliger is én interactieve voor de eindgebruiker) zal afhankelijk van de omstandigheden (bakker gesloten, geen geld meer, etc.) mogelijke andere stappen ondernemen. **Het programma zal beslissingen maken**. [PreviousH4: Beslissingen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen) [NextBooleanse logica en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator) Last updated 5 years ago Was this helpful? Was this helpful? --- # Strings samenvoegen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#strings-samenvoegen) Strings samenvoegen ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Je kan strings en variabelen samenvoegen tot een nieuwe string op verschillende manieren: * +-operator * $ string interpolation * Of de oude manier: `String.Format()` In deze cursus prefereren we **manier 2**, de string interpolatie. Dit is de meest moderne aanpak. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#in-dit-hoofdstuk) In dit hoofdstuk We gaan van volgende informatie uit: * Stel dat je 2 variabelen hebt `int age=13` en `string name="Finkelstein"`. * We willen de inhoud van deze variabelen samenvoegen in een nieuwe `string result` die zal bestaan uit de tekst: `Ik ben Finkelstein en ik ben 13 jaar oud.` Volgende 3 manieren tonen hoe je steeds tot voorgaande string zal komen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-1-string-samenvoegen-met-de--operator) Manier 1: String samenvoegen met de +-operator -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Je kan string en variabelen eenvoudig bij elkaar 'optellen'. Ze worden dan achter elkaar geplakt als het ware. Copy string result= "Ik ben "+ name + " en ik ben "+ age+ " jaar oud."; Let er op dat je tussen de aanhalingsteken (binnen de strings) spaties zet indien je het volgende deel niet tegen het vorige stringstuk wilt 'plakken'. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-2-string-interpolation-met-usd) Manier 2: String interpolation met $ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- In de oude dagen van C# gebruikten we `String.Format()` (zie hieronder) om meerdere strings en variabelen samen te voegen tot één string. Nu kan dat met string interpolation waarbij we het $-teken gebruiken. Door het $-teken **VOOR** de string te plaatsen geef je aan dat alle delen in de string die tussen accolades staan { } als code mogen beschouwd worden. Een voorbeeld maakt dit duidelijk: In dit geval zal dus de inhoud van de variabele `name` tussen de string op de plek waar nu `{name}` staat geplaatst worden. Idem voor `age`. Zoals je kan zien is dit veel meer leesbare code dan de eerste manier. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#berekeningen-doen-bij-string-interpolatie) Berekeningen doen bij string interpolatie Je mag eender welke _expressie_ tussen de accolades zetten bij string interpolation, denk maar aan: Alle expressies tussen de accolades zullen eerst uitgevoerd worden voor ze tussen de string worden geplaatst. De uitvoer wordt nu dus: `Ik ben Finkelstein en ik ben 17 jaar oud.` Eender welke expressie is toegelaten, dus je kan ook complexe berekeningen of zelfs andere methoden aanroepen: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#mooier-formatteren) Mooier formatteren Zowel bij manier string interpolation (manier 2) als de manier hierna kan je ook bepalen hoe de te tonen variabelen en expressies juist weergegeven moeten worden. Je geeft dit aan door na de expressie, binnen de accolades, een dubbelpunt te plaatsen gevolgd door de manier waarop moet geformatteerd worden: Wil je bijvoorbeeld een kommagetal tonen met maar 2 cijfers na de komma dan schrijf je: Nog enkele nuttige vormen: * D5: geheel getal bestaande uit 5 cijfers (`123` wordt `00123`) (werkt enkel op gehele getallen!) * E2: wetenschappelijke notatie met 2 cijfers precisie (`12000000` wordt `1,20E+007`) * C: geldbedrag (`12,34` wordt € 12,34: teken van valuta afhankelijk van instellingen pc) Alle format specifiers staan [hier opgelijst](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-3-string.format) Manier 3: String.Format() ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- String interpolatie met het $-teken is een nieuwe C# aanwinst. Je zal echter nog veel documentatie en online code tegenkomen die nog met `String.Format` werkt (ook zijn er nog zaken waar het te prefereren is om `String.Format` te gebruiken i.p.v. 1 van vorige manieren). Om die reden bespreken we dit nog in deze cursus. `String.Format` is een ingebouwde methode die string-interpolatie toe laat op een iets minder intuïtieve manier: Het getal tussen de accolades geeft aan de hoeveelste parameter na de string hier in de plaats moet gezet worden (0= de eerste, 1= de tweede, enz). Volgende code zal een ander resultaat geven: Namelijk: `Ik ben 13 en ik ben 13 jaar oud.` Wens je meer informatie over `string.Format`, kijk dan [hier](https://codevan1001nacht.wordpress.com/2013/11/05/placeholders-aka-string-formatters/) . [PreviousStrings en chars](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings) [NextUnicode tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode) Last updated 5 years ago Was this helpful? * [Strings samenvoegen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#strings-samenvoegen) * [In dit hoofdstuk](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#in-dit-hoofdstuk) * [Manier 1: String samenvoegen met de +-operator](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-1-string-samenvoegen-met-de--operator) * [Manier 2: String interpolation met $](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-2-string-interpolation-met-usd) * [Berekeningen doen bij string interpolatie](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#berekeningen-doen-bij-string-interpolatie) * [Mooier formatteren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#mooier-formatteren) * [Manier 3: String.Format()](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation#manier-3-string.format) Was this helpful? Copy string result= $"Ik ben {name} en ik ben {age} jaar oud."; Copy string result= $"Ik ben {name} en ik ben {age+4} jaar oud."; Copy string result= $"Ik ben {age*age+(3%2)} jaar oud."; Copy double number = 12.345; Console.WriteLine($"{number:F2}"); Copy string result= String.Format("Ik ben {0} en ik ben {1} jaar oud.",name,age); Copy string result= String.Format("Ik ben {1} en ik ben {1} jaar oud.",name,age); --- # H4: Beslissingen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Beslissingen intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_beslissingen_intro) [Booleanse logica en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator) [If](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if) [Scope van variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope) [enum](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/enum) [Switch](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/a_practica) [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica) [NextBeslissingen intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_beslissingen_intro) Last updated 5 years ago Was this helpful? Was this helpful? --- # Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-eerste-programma) Oefening: H0-eerste-programma ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen) Leerdoelen * een eigen programma kunnen uitvoeren * input en output via `Console.ReadLine` en `Console.WriteLine` ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse) Functionele analyse Binnen een zgn. dos-box wordt een titel weergegeven, nl. dit is mijn eerste c# programma. Vervolgens wordt gevraagd je naam te noteren. Wanneer je je naam hebt genoteerd en op enter hebt gedrukt, verschijnt de tekst “hallo \[en je ingegeven naam\]”. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#voorbeeldinteractie-s) voorbeeldinteractie(s) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-LokugJSuE5fEIs3iLGr%252Fimage.png%3Fgeneration%3D1583825996607405%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=87681a3f&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#programmaverloop) Programmaverloop Wat het lezen en schrijven van tekst betreft moet gebruik gemaakt worden `Console.WriteLine` en `Console.ReadLine`. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#testscenarios) Testscenario's * Probeer meer dan 200 tekens in te voeren * Probeer geen tekst in te voeren ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-eerste-programma-pro) Oefening: H0-eerste-programma-pro ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-1) Leerdoelen * een eigen programma kunnen uitvoeren * input en output via `Console.ReadLine` en `Console.WriteLine` * herhaling van de leerdoelen uit H0-eerste-programma ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-1) Functionele analyse Binnen een zgn. dos-box wordt een titel weergegeven, nl. dit is mijn eerste c# programma. Vervolgens wordt gevraagd je voornaam te noteren. Wanneer je je voornaam hebt genoteerd en op enter hebt gedrukt, wordt gevraagd je achternaam te noteren. Wanneer je je achternaam hebt genoteerd en op enter hebt gedrukt, verschijnt de tekst “dus je naam is: \[en je ingegeven achternaam en voornaam\]”. Op de regel daaronder verschijnt dan de tekst “of: \[en je ingegeven voornaam en achternaam\]”. Het is dus duidelijk dat we de naam zowel beginnend met de voor- als de achternaam kunnen tonen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-1) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ui-1) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#voorbeeldinteractie-s-1) voorbeeldinteractie(s) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-LokvYqwLJ9lRhC-vf_F%252Fimage.png%3Fgeneration%3D1583825997227054%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=ee3afaf&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-1) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#programmaverloop-1) Programmaverloop Wat het lezen en schrijven van tekst betreft moet gebruik gemaakt worden `Console.WriteLinea` en `Console.ReadLine`. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#testscenarios-1) Testscenario's * Probeer meer dan 200 tekens in te voeren * Probeer geen tekst in te voeren ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-1) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-rommelzin) Oefening: H0-rommelzin -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-2) Leerdoelen * een eigen programma kunnen uitvoeren * input en output via `Console.ReadLine` en `Console.WriteLine` * de computer leren zien als "domme verwerker" ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-2) Functionele analyse Dit programma verwerkt tekst die door de gebruiker wordt ingetypt. Het print nieuwe berichten die deze tekst bevatten uit. Het print niet de berichten die je verwacht: het zal de antwoorden door elkaar halen en je favoriete kleur tonen wanneer het beweert je favoriete eten te tonen, enzovoort. De verbanden worden duidelijk uit de voorbeeldinteractie. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-2) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ui-2) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#voorbeeldinteractie-s-2) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-2) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#programmaverloop-2) Programmaverloop Per regel die getoond wordt op het scherm, maak je gebruik van `Console.WriteLine`. Per regel die je zelf intypt, maak je gebruik van `Console.ReadLine`. Zorg zelf voor de juiste ondersteunende code. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#testscenarios-2) Testscenario's * Test uit met een héél lang stuk tekst (meer dan 200 tekens) voor je favoriete kleur. * Test uit met tekst met internationale karakters, bijvoorbeeld de ç. * Ga na wat er gebeurt als je een lege regel invoert, dus als je meteen op ENTER duwt wanneer gevraagd wordt om invoer. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-2) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-gekleurde-rommelzin) Oefening: H0-gekleurde-rommelzin ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-3) Leerdoelen * de kleur van tekst in de console aanpassen * herhaling van de leerdoelen uit H0-rommelzin ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-3) Functionele analyse Dit programma werkt net als H0-rommelzin, maar elke regel die aan de gebruiker wordt getoond, krijgt een andere kleur. De namen van de kleuren die je gebruikt (in deze volgorde) zijn: 1. `DarkGreen` 2. `DarkRed` 3. `DarkYellow` 4. `Blue` 5. `Cyan` 6. `Red` ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-3) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ui-3) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#voorbeeldinteractie-s-3) voorbeeldinteractie(s) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LoiuUlYlgvDisCb_poL%252F-Loiu_nHjFADVEfOJL20%252Fgekleurde-rommelzin.png%3Falt%3Dmedia%26token%3D47fb4564-4497-4d0f-a412-f7d65e92a2f9&width=768&dpr=4&quality=100&sign=aff92bee&sv=2) De eerste regel behoort niet tot het programma. De rest moet er bij jou hetzelfde uitzien. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-3) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#programmaverloop-3) Programmaverloop Voor elke regel die in kleur getoond wordt, wissel je de voorgrondkleur. Op de juiste plaatsen in de code herstel je de oorspronkelijke kleuren van de terminal. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#testscenarios-3) Testscenario's * Test opnieuw uit met een kleur, maaltijd, auto, film en boek naar keuze. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-3) Ondersteunend materiaal Hou het voorlopig op de cursus. [PreviousKleuren in Console](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/5_kleuren) [NextH1: Variabelen en datatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes) Last updated 5 years ago Was this helpful? * [Oefening: H0-eerste-programma](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-eerste-programma) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal) * [Oefening: H0-eerste-programma-pro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-eerste-programma-pro) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-1) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-1) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-1) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-1) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-1) * [Oefening: H0-rommelzin](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-rommelzin) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-2) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-2) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-2) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-2) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-2) * [Oefening: H0-gekleurde-rommelzin](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#oefening-h0-gekleurde-rommelzin) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#leerdoelen-3) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#functionele-analyse-3) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-analyse-3) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#technische-hulp-3) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h0-werken-met-visual-studio/a_practica_grad#ondersteunend-materiaal-3) Was this helpful? Copy Wat is je favoriete kleur? > blauw Wat is je favoriete eten? > spaghetti Wat is je favoriete auto? > Toyota Aygo Wat is je favoriete film? > Robocop 2 Wat is je favoriete boek? > The Gone-Away World Je favoriete kleur is spaghetti. Je eet graag Toyota Aygo. Je lievelingsfilm is The Gone-Away World en je favoriete boek is Robocop 2. --- # Strings en chars | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#char) Char ---------------------------------------------------------------------------------------------------------------------------------------------- Een **enkel karakter** (cijfer, letter, leesteken, etc.) als 'tekst' opslaan kan je doen door het `char`\-type te gebruiken. Zo kan je bijvoorbeeld een enkel karakter als volgt tonen: Copy char eenLetter = 'X'; Console.WriteLine("eenLetter=" + eenLetter); Het is belangrijk dat je de apostrof (`'` ) niet vergeet voor en na het karakter dat je wenst op te slaan daar dit de literal voorstelling van `char`\-literals is (zie ook [hier](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes) ). Je kan eender welk [UNICODE-teken](https://en.wikipedia.org/wiki/Unicode) in een `char` bewaren, namelijk letters, cijfers en speciale tekens zoals `%`, `$`, `*`, `#`, etc. Merk dus op dat volgende lijn: `char eenGetal = '7';` weliswaar een getal als teken opslaat, maar dat intern de compiler deze variabele steeds als een character zal gebruiken. Als je dit cijfer zou willen gebruiken als effectief cijfer om wiskundige bewerkingen op uit te voeren, dan zal je dit eerst moeten converteren naar een getal (zie [Convert en Casting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting) ). [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#string) String -------------------------------------------------------------------------------------------------------------------------------------------------- Een string is een reeks van 0, 1 of meerdere `char`\-elementen, zoals je ook kan zien als je even met je muis boven een string keyword _hovert_ in je code: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NeUkiD51_cgo-xH7%252Fstringenchars.png%3Fgeneration%3D1583825999664716%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=bf1a2bcd&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#strings-declareren) Strings declareren Merk op dat we bij een string literal gebruik maken van aanhalingstekens (`"`) terwijl bij chars we een apostrof gebruiken (`'`). Dit is de manier om een string van een char te onderscheiden. Volgende code geeft dus drie keer het cijfer 1 onder elkaar op het scherm, maar de eerste keer behelst het een char (enkelvoudig teken), dan een een string (reeks van tekens) en dan een int (effectief getal): De output van dit programma zal dan zijn: Fout gebruik van strings en chars zal code geven die niet zal gecompileerd worden: 1. In de eerste toekenning proberen we dus een literal van het type **string** toe te kennen een variabele van het type **char**. 2. In de tweede toekenning proberen we een literal van het type **char** toe te kennen een variabele van het type **string**. 3. In de laatste toekenning proberen we een literal van het type **char** toe te kennen aan een variabele van het type **int**. [PreviousH2: Tekst in code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code) [NextStrings samenvoegen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/6_stringinterpolation) Last updated 5 years ago Was this helpful? * [Char](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#char) * [String](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#string) * [Strings declareren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings#strings-declareren) Was this helpful? Copy char eenKarakter = '1'; string eenString = "1"; int eenGetal = 1; Console.WriteLine(eenKarakter); Console.WriteLine(eenString); Console.WriteLine(eenGetal); Copy 1 1 1 Copy char eenKarakter = "1"; //fout string eenString = '1'; //fout int eenGetal = '1'; //fout --- # Random | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#random-getallen-genereren) Random getallen genereren --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Random getallen genereren in je code kan leuk zijn om de gebruiker een interactievere ervaring te geven. Beeld je in dat je monsters steeds dezelfde weg zouden bewandelen of dat er steeds op hetzelfde tijdstip een orkaan op je stad neerdwaalt. **SAAI**! [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#random-generator) Random generator --------------------------------------------------------------------------------------------------------------------------------------------------------------- De `Random`\-klasse laat je toe om eenvoudig willekeurige gehele en komma-getallen te maken. Je moet hiervoor twee zaken doen: 1. Maak _eenmalig_ een Random-generator aan: `Random randomgen= new Random();` (wat dit juist wil zeggen zien we in [Semester 2](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-2-oop/h8-klassen-en-objecten/0_oop_intro) ). 2. Roep de `Next` methode aan telkens je een nieuw getal nodig hebt, bijvoorbeeld: `int mijnGetal= randomgen.Next();` De aanroep van de methode `Next()` zal een geheel getal willekeurig genereren. De eerste stap dien je dus maar 1 keer te doen. Vanaf dan kan je telkens aan de generator een nieuw getal vragen m.b.v. `Next`. Volgende code toont bijvoorbeeld 3 random getallen op het scherm: Copy Random mygen= new Random(); int getal1= mygen.Next(); int getal2= mygen.Next(); int getal3= mygen.Next(); Console.WriteLine(getal1); Console.WriteLine(getal2); Console.WriteLine(getal3); [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#next-mogelijkheden) Next mogelijkheden ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Je kan de `Next` methode ook 2 parameters meegeven, namelijk de grenzen waarbinnen het getal moet gegenereerd worden. De tweede parameter is exclusief dit getal zelf. Wil je dus een getal tot en met 10 dan schrijf je 11, niet 10. Enkele voorbeelden: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#genereer-kommagetallen-met-nextdouble) Genereer kommagetallen met NextDouble --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Met de `NextDouble` methode kan je kommagetallen genereren tussen `0.0` en `1.0` (1.0 zal niet gegenereerd worden). Wil je een groter kommagetal dan zal je dit gegenereerde getal moeten vermenigvuldigen naar de range die je nodig hebt. Stel dat je een getal tussen 0.0 en 10.0 nodig hebt, dan schrijf je: **Ik krijg dezelfde random getallen? Wat nu?** [Zie hier voor meer informatie indien je dezelfde random nummers genereert.](http://csharpindepth.com/Articles/Chapter12/Random.aspx) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#kennisclip) Kennisclip --------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Random toepassen](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=ffa0ea68-0b47-4446-9922-a91100d3f61e) [PreviousMath-library en berekeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math) [NextDebuggen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen) Last updated 5 years ago Was this helpful? * [Random getallen genereren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#random-getallen-genereren) * [Random generator](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#random-generator) * [Next mogelijkheden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#next-mogelijkheden) * [Genereer kommagetallen met NextDouble](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#genereer-kommagetallen-met-nextdouble) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random#kennisclip) Was this helpful? Copy Random somegenerator = new Random(); int a= somegenerator.Next(0,10); //getal tussen 0 tot en met 9 int b= somegenerator.Next(5,101); //getal tussen 5 tot en met 100 int c= somegenerator.Next(0,b); //getal tussen 0 tot en met het getal dat de lijn ervoor werd gegenereerd. Copy Random myran= new Random(); double randomgetal= myran.NextDouble() * 10.0; --- # Debuggen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen#debuggen) Debuggen --------------------------------------------------------------------------------------------------------------------------------------------------- **Debugging is een ESSENTIËLE SKILL**. Zorg dat je vlot breakpoints kunt plaatsen om zo tijdens de uitvoer te pauzeren om de inhoud van je variabelen te bekijken (via het zogenaamde watch-venster). Gebruik vervolgens de "step"-buttons om door je code te 'stappen', lijn per lijn. Neem volgende korte demonstratie van debugging door: [Debugging in Visual Studio](https://tutorials.visualstudio.com/vs-get-started/debugging) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen#kennisclip) Kennisclip ------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Debuggen in VS](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=a78b3bf5-ef96-4c2a-8248-a976006fabd1) [PreviousRandom](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random) [NextOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica) Last updated 5 years ago Was this helpful? * [Debuggen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen#debuggen) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen#kennisclip) Was this helpful? --- # Math-library en berekeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#berekeningen) Berekeningen -------------------------------------------------------------------------------------------------------------------------------------------------------- Een groot deel van je leven als ontwikkelaar zal bestaan uit het bewerken van variabelen in code. Meestal zullen die bewerkingen voorafgaan van berekeningen. De `Math` bibliotheek zal ons hier bij kunnen helpen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#de-math-bibliotheek) De Math bibliotheek De Math bibliotheek bevat aardig wat handige methoden. Deze bibliotheek bevat methoden voor een groot aantal typische wiskundige methoden (sinus, cosinus, vierkantswortel, macht, afronden, etc.) en kan je dus helpen om leesbaardere expressies te schrijven. Stel dat je de derde macht van een variabel `getal` wenst te berekenen. ZONDER de Math-bibliotheek zou dat er zou uitzien: Copy double result= getal*getal*getal; //SLECHTE MANIER MET de bibliotheek kunnen we schrijven: Copy double result= Math.Pow(getal, 3); #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#de-math-bibliotheek-ontdekken) De Math bibliotheek ontdekken Als je in Visual Studio `Math` schrijft, gevolgd door een punt `.` krijg je alles te zien wat de Math-bibliotheek kan doen: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nk-hD3gtWT9t3yJ0%252Fmethoden3.png%3Fgeneration%3D1583826011001854%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=c6f7685d&sv=2) Een doosje voor een naam wil zeggen dat het om een **Methode** gaat (zoals `Console.ReadLine()`). Een vierkantje met twee streepjes in zijn constanten (zoals `Pi`(`π`) en `e`). #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#methoden-gebruiken) Methoden gebruiken De meeste methoden zijn zeer makkelijk in gebruik en werken op dezelfde manier. Meestal moet je 1 of meerdere "argumenten" tussen de haken meegeven en het resultaat moet je altijd in een nieuwe variabele opvangen. Enkele voorbeelden: Twijfel je over de werking van een methode, gebruik dan de help als volgt: 1. Schrijf de Methode zonder argumenten. Bijvoorbeeld `Math.Pow()` (je mag de rode error negeren). ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nk-jrz_rkMBeCZ22%252Fmath.png%3Fgeneration%3D1583826013711893%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=e89ae24c&sv=2) 2. Plaats je cursor op `Pow`. 3. Druk op `F1` op je toetsenbord. 4. Je krijgt nu de help-files te zien van deze methode op MDSDN. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#pi-p) PI (π) Ook het getal Pi (`3.141...`) is beschikbaar in de Math-library. Het witte icoontje voor PI bij Intellisense toont aan dat het hier om een ‘field’ gaat; een eenvoudige variabele met een specifieke waarde. In dit geval gaat het zelfs om een const field, met de waarde van Pi van het type double. Je kan deze als volgt gebruiken in berekeningen: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#lopende-som) Lopende som Een vaak voorkomende oefening is deze waarbij je een bepaalde variabele continue moet bijpassen. Stel bijvoorbeeld dat je aan de gebruiker de temperatuur van iedere dag vraagt om zo vervolgens het gemiddelde te berekenen. Dit kan je doen door middel van een lopende som: je gaat telkens het ingevoerde getal toevoegen aan wat je reeds hebt bewaard. Meestal dus met behulp van de += operator. Wanneer we met loops leren werken zullen lopende sommen zéér nuttig worden. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#kennisclip) Kennisclip ---------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [De Math-bibliotheek](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=4d790ab9-e3b9-4e4b-bf59-a976007197fa) [PreviousInput verwerken en omzetten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten) [NextRandom](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/random) Last updated 5 years ago Was this helpful? * [Berekeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#berekeningen) * [De Math bibliotheek](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#de-math-bibliotheek) * [Lopende som](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#lopende-som) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4c_math#kennisclip) Was this helpful? Copy double sineHoekA= Math.Sin(345); //IN RADIALEN! double DerdeMachtVan20= Math.Pow(20, 3); double complex= 3+ DerdeMachtVan20 * Math.Round(sineHoekA); Copy public const double PI; Copy double straal= 5.5; double omtrek= Math.PI * 2 * straal; Copy double totaal= 0.0; Console.WriteLine("Geef temperatuur dag 1"); double inp= Convert.ToDouble(Console.ReadLine()); totaal+=inp; Console.WriteLine("Geef temperatuur dag 2"); inp= Convert.ToDouble(Console.ReadLine()); totaal+=inp; //enz Console.WriteLine($"Gemiddelde temperatuur deze week was: {totaal/7}"); --- # Variabelen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#variabelen) Variabelen ------------------------------------------------------------------------------------------------------------------------------------------------------------------ In het vorige hoofdstuk zagen we dat er verschillende soorten datatypes bestaan. Deze types hebben we nodig om **variabelen** aan te maken. De data die we in een programma gebruiken bewaren we namelijk in een **variabele van een bepaald type**. Een variabele is een plekje in het geheugen dat in je programma zal gereserveerd worden om daarin data te bewaren van het type dat je aan de variabele hebt toegekend. Een variabele zal intern een geheugenadres hebben (waar de data in het geheugen staat) maar dat zou lastig programmeren zijn indien je steeds dit adres moet gebruiken. Daarom moeten we ook steeds een naam oftewel **identifier** aan de variabele geven zodat we makkelijk de geheugenplek kunnen aanduiden. > De naam (identifier) van de variabele moet voldoen aan de identifier regels onder "Inleiding -> Afspraken code". [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#variabelen-aanmaken-en-gebruiken) Variabelen aanmaken en gebruiken -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Om een variabele te maken moeten we deze **declareren**, door een type en naam te geven. Vanaf dan zal de computer een hoeveelheid geheugen voor je reserveren waar de inhoud van deze variabele in kan bewaard worden. Hiervoor dien je minstens op te geven: 1. Het **datatype** (bv `int`, `double`). 2. Een **identifier** zodat de variabele uniek kan geïdentificeerd worden ([volgens de naamgevingsregel van C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials) ). 3. (optioneel) Een **beginwaarde** die de variabele krijgt bij het aanmaken ervan. Een variabele declaratie heeft als syntax: Copy datatype identifier; Bijvoorbeeld: `int leeftijd;` Je mag ook meerdere variabelen van het zelfde datatype in 1 enkele declaratie aanmaken door deze met komma's te scheiden: Copy datatype identifier1, identifier2, identifier3; Bijvoorbeeld `string voornaam, achternaam, adres;` Indien je reeds weet wat de beginwaarde moet zijn van de variabele dan mag je de variabele ook reeds deze waarde toekennen bij het aanmaken: Copy int mijnLeeftijd = 37; ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#waarden-toekennen-aan-variabelen) Waarden toekennen aan variabelen Vanaf dit punt kunnen we dus ten allen tijde deze variabele gebruiken om een waarde aan toe te kennen, de bestaande waarde te overschrijven, of de waarde te gebruiken, zoals: * Waarde toekennen: `mijnGetal= 15;`. **Toekenning gebeurt steeds van rechts naar links: het deel rechts van het gelijkheidsteken wordt toegewezen aan het deel links er van.** * Waarde tonen op scherm: `Console.WriteLine(mijnGetal);` Met de **toekennings-operator (=)** kan je een waarde toekennen aan een variabele. Hierbij kan je zowel een literal toekennen oftewel het resultaat van een expressie. Je kan natuurlijk ook een waarde uit een variabele uitlezen en toewijzen aan een andere variabele: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#literal-toewijzen) Literal toewijzen Literals zijn expliciet ingevoerde waarden in je code. Als je in je code expliciet de waarde 4 wilt toekennen aan een variabele dan is het getal 4 in je code een zogenaamde literal. Wanneer we echter data bijvoorbeeld eerst uitlezen of berekenen (via bijvoorbeeld invoer van de gebruiker of als resultaat van een berekening) en het resultaat hiervan toekennen aan een variabele dan is dit geen literal. Voorbeelden van een literal toekennen: Het is belangrijk dat het type van de literal overeenstemt met dat van de variabele waaraan je deze zal toewijzen. Een string-literal (zie verder) stel je voor door aanhalingstekens. Volgende code zal dan ook een compiler-fout generen, daar je een string-literal aan een int-variabele wil toewijzen, en vice versa. Als je bovenstaande probeert te compileren dan krijg je volgende error-boodschappen: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsMDKJCRkvrSKWD%252Ferrorliteraltoekenning.png%3Fgeneration%3D1583826024975610%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=5bc9e600&sv=2) #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#literal-bepaald-het-datatype) Literal bepaald het datatype De manier waarop je een literal schrijft in je code zal bepalen wat het datatype van de literal is: * **Gehele getallen** worden standaard als `int` beschouwd, vb: `125`. * **Kommagetallen** (met punt `.`) worden standaard als `double` beschouwd, vb: `12.5`. * Via een **suffix** na het getal kan je aangeven als het om andere types gaat: * `U` of `u` voor `uint`, vb: `125U`. * `L` of `l` voor `long`, vb: `125L`. * `UL` of `ul` voor `ulong`, vb: `125ul`. * `F` of `f` voor `float`, vb: `12.5f`. * `M` of `m` voor `decimal`, vb: `12.5M`. * Voor `**bool**` (zie verder) is dit enkel `true` of `false`. * Voor `**char**` (zie verder) wordt dit aangeduid met een enkele apostrof voor en na de literal, vb: `'q'`. * Voor `**string**` (zie verder) wordt dit aangeduid met aanhalingsteken voor en na de literal, vb: `"pikachu"`. De overige types `sbyte`, `short` en `ushort` hebben geen literal aanduiding. Er wordt vanuit gegaan wanneer je een literal probeert toe te wijzen aan een van deze types dat dit zonder problemen zal gaan (ze worden impliciet geconverteerd). **Hexadecimale en binaire notatie** Je kan ook hexadecimale notatie (starten met `0x` of `0X`) gebruiken wanneer je bijvoorbeeld met `int` of `byte` werkt: Ook binaire notatie (starten met `0b` of `0B`) kan: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#nieuwe-waarden-overschrijven-oude-waarden) Nieuwe waarden overschrijven oude waarden Wanneer je een reeds gedeclareerde variabele een **nieuwe waarde toekent** dan zal de oude waarde in die variabele onherroepelijk verloren zijn. Probeer dus altijd goed op te letten of je de oude waarde nog nodig hebt of niet. Wil je de oude waarde ook nog bewaren dan zal je een nieuwe, extra variabele moeten aanmaken en daarin de nieuwe waarde moeten bewaren: In dit voorbeeld zal er dus voor gezorgd worden dat de oude waarde van temperatuurGisteren, `20`, overschreven zal worden met `25`. Volgende code toont hoe je bijvoorbeeld eerst de vorige waarde kunt bewaren en dan overschrijven: We hebben dus aan het einde van het programma zowel de temperatuur van eergisteren, `20`, als die van vandaag, `25`. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#kennisclip) Kennisclip ------------------------------------------------------------------------------------------------------------------------------------------------------------------ ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Variabelen en datatypes](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=22d326cf-b619-4cf0-80fc-a966007ffef5) [PreviousDatatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes) [NextExpressies en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies) Last updated 5 years ago Was this helpful? * [Variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#variabelen) * [Variabelen aanmaken en gebruiken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#variabelen-aanmaken-en-gebruiken) * [Waarden toekennen aan variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#waarden-toekennen-aan-variabelen) * [Literal toewijzen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#literal-toewijzen) * [Nieuwe waarden overschrijven oude waarden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#nieuwe-waarden-overschrijven-oude-waarden) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen#kennisclip) Was this helpful? Copy int eenAndereLeeftijd = mijnLeeftijd; Copy int temperatuurGisteren = 20; int temperatuurVandaag = 25; Copy string eenTekst; int eenGetal; eenTekst = 4; eenGetal = "4"; Copy int myAge= 0x0024; byte myByteValue = 0x00C9; Copy int myAge= 0b00010110001101000010‬; //Vanaf C# 7.2 mag je ook schrijven: 0b0001_0110_0011_0100_0010 byte myByteValue = 0b‭00100100‬9; Copy int temperatuurGisteren = 20; temperatuurGisteren = 25; Copy int temperatuurGisteren= 20; //Doe vanalles //... //1 dag later int temperatuurEerGisteren= temperatuurGisteren; //Vorige temperatuur in eergisteren bewaren temperatuurGisteren = 25; //temperatuur nu overschrijven --- # De essentie van C# | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#statements-en-de-c-syntax) Statements en de C# syntax ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Om een werkend C#-programma te maken moeten we de C#-taal beheersen. Net zoals iedere taal, bestaat ook C# uit enerzijds grammatica, in de vorm van de **C# syntax** en anderzijds vocabulair in de vorm van de te gebruiken **keywords**. Een C#-programma bestaat uit een opeenvolging van instructies ook wel **statements** genoemd. **Deze eindigen steeds met een puntkomma (**`**;**`**)** (zoals ook in het Nederlands een zin eindigt met een punt). De volgorde van de woorden (keywords, variabelen, etc.) zijn niet vrijblijvend en moeten aan (grammaticale) regels voldoen. Enkel indien alle statements correct zijn zal het programma gecompileerd worden naar een werkend en uitvoerbaar programma (zoals in een vorige sectie besproken). Enkele belangrijke regels van C#: * **Hoofdletter-gevoelig**: C# is hoofdlettergevoelig. Dat wil zeggen dat hoofdletter `T` en kleine letter `t` totaal verschillende zaken zijn voor C#. `Reinhardt` en `reinhardt` zijn dus ook niet hetzelfde. * **Statements afsluiten met puntkomma**: Iedere C# statement wordt afgesloten moet een puntkomma ( `**;**` ). Doe je dat niet dan zal C# denken dat de regel gewoon op de volgende lijn doorloopt en deze als één (fout) geheel proberen te compileren. * **Witruimtes**: Spaties, tabs en enters worden door de C# compiler genegeerd. Je kan ze dus gebruiken om de layout van je code (_bladspiegel_ zeg maar) te verbeteren. De enige plek waar witruimtes wél een verschil geven is tussen aanhalingstekens `" "` die we later (bij string) zullen leren gebruiken. * **Commentaar toevoegen kan**: met behulp van `//` voor een enkele lijn en `/* */` voor meerdere lijnen commentaar. Alles dat in commentaar staat zal door de compiler genegeerd worden. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#keywords-de-woordenschat) Keywords: de woordenschat ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- C# bestaat zoals gezegd niet enkel uit grammaticale regels. Grammatica zonder woordenschat is nutteloos. Er zijn binnen C# dan ook 80 woorden, zogenaamde **reserved keywords** die de woordenschat voorstellen. In deze cursus zullen we stelselmatig deze keywords leren kennen en gebruiken op een correcte manier om zo werkende code te maken. Deze keywords zijn: _abstract_ _as_ _base_ **bool** **break** **byte** **case** catch **char** checked _class_ **const** continue **decimal** _default_ delegate **do** **double** **else** **enum** event explicit extern **false** finally fixed **float** **for** _foreach_ goto **if** implicit _in_ **int** _interface_ internal _is_ lock **long** **namespace** _new_ _null_ _object_ _operator_ **out** _override_ params _private_ _protected_ _public_ readonly **ref** **return** **sbyte** _sealed_ **short** sizeof stackalloc _static_ **string** _struct_ **switch** _this_ throw **true** try typeof **uint** **ulong** unchecked unsafe **ushort** using using static _virtual_ **void** volatile **while** De keywords in vet zijn keywords die we dit semester zullen kennen. Die in cursief in het tweede semester. De overige zal je zelf moeten leren ;). Indien je deze tabel in pdf bekijkt zal deze om zeep zijn. Onze gitbook gnomes proberen dit op te lossen maar voorlopig vinden ze helaas geen oplossing, waarvoor onze excuses. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#variabelen-identifiers-en-naamgeving) Variabelen, identifiers en naamgeving ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- We hebben variabelen nodig om (tijdelijke) data in op te slaan. Wanneer we een statement schrijven dat bijvoorbeeld input van de gebruiker moet vragen, dan willen we ook die input bewaren zodat we verderop in het programma (het algoritme) iets met deze data kunnen doen. We doen hetzelfde in ons hoofd wanneer we bijvoorbeeld zegen "tel 3 en 4 op en vermenigvuldig dat resultaat met 5". Eerst zullen we het resultaat van 3+4 in een variabele moeten bewaren. Vervolgens zullen we de inhoud van die variabele vermenigvuldigen met 5 en dat nieuwe resultaat ook in een nieuwe variabele opslaan (om vervolgens bijvoorbeeld naar het scherm te sturen). Wanneer we een variabele aanmaken zal deze moeten voldoen aan enkele afspraken. Zo moeten we minstens 2 zaken meegeven: * Het type van de variabele: het **datatype** dat aangeeft wat voor data we wensen op te slaan (tekst, getal, afbeelding, etc.). * De naam van de variabele: de **identifier** waarmee we snel aan de variabele-waarde kunnen. De verschillende datatypes bespreken we in een volgend [hoofdstuk](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes) . ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#regels-voor-identifiers) Regels voor identifiers De code die we gaan schrijven moet voldoen aan een hoop regels. Wanneer we in onze code zelf namen (**identifiers**) moeten geven aan **variabelen** (en later ook methoden, objecten, etc.) dan moeten we een aantal regels volgen: * **Hoofdlettergevoelig**: de identifiers `tim` en `Tim` zijn verschillend zoals reeds vermeld. * **Geen keywords**: identifiers mogen geen gereserveerde C# keywords zijn. De keywords van hierboven mogen dus niet. Varianten waarbij de hoofdletters anders zijn mogen wel, bijvoorbeeld: `gOTO` en `stRINg` mogen dus wel, maar niet `goto` of `string` daar beide een gereserveerd keyword zijn maar dankzij de hoofdlettergevoelig-regel is dit dus toegelaten. `INT` mag ook ook, maar niet `int`. * **Eerste karakter-regel**: het eerste karakter van de identifier mag enkel zijn: * kleine of grote letter * liggend streepje (`_`) * **Alle andere karakters-regels**: de overige karakters mogen enkel zijn: * kleine of grote letter * liggend streepje * een cijfer (`0` tot en met `9`) * **Lengte**: Een legale identifier mag zo lang zijn als je wenst, maar je houd het best leesbaar. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#enkele-voorbeelden) Enkele voorbeelden Enkele voorbeelden van toegelaten en niet toegelaten identifiers: identifier toegelaten? uitleg indien niet toegelaten werknemer ja kerst2018 ja pippo de clown neen geen spaties toegestaan 4dPlaats neen mag niet starten met getal \_ILOVE2019 ja Tor+Bjorn neen enkel cijfers, letters en liggende streepjes toegestaan ALLCAPSMAN ja B\_A\_L ja class neen gereserveerd keyword WriteLine ja ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#naamgeving-afspraken) Naamgeving afspraken Er zijn geen vaste afspraken over hoe je je variabelen moet noemen toch hanteren we enkele **coding guidelines** die doorheen je opleiding moeten gevolgd worden. Naarmate we meer C# leren zullen er extra guidelines bijkomen (zie [deze pagina met richtlijnen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/inleiding/afsprakencode) ). * **Duidelijke naam**: de identifier moet duidelijk maken waarvoor de identifier dient. Schrijf dus liever `gewicht` of `leeftijd` in plaats van `a` of `meuh`. * **Camel casing**: gebruik camel casing indien je meerdere woorden in je identifier wenst te gebruiken. Camel casing wil zeggen dat ieder nieuw woord terug met een hoofdletter begint. Een goed voorbeeld kan dus zijn `leeftijdTimDams` of `aantalLeerlingenKlas1EA`. Merk op dat we liefst het eerste woord met kleine letter starten. Uiteraard zijn er geen spaties toegelaten. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#commentaar) Commentaar ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Soms wil je misschien extra commentaar bij je code zetten. Als je dat gewoon zou doen (bv `Dit deel zal alles verwijderen`) dan zal je compiler niet begrijpen wat die zin doet. Hij verwacht namelijk C# en niet een Nederlandstalige zin. Om dit op te lossen kan je in je code op twee manieren aangeven dat een stuk tekst gewoon commentaar is en mag genegeerd worden door de compiler: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#enkele-lijn-commentaar) Enkele lijn commentaar Eén lijn commentaar geef je aan door de lijn te starten met twee voorwaartse slashes `//`. Uiteraard mag je ook meerdere lijnen op deze manier in commentaar zetten. Zo wordt dit ook vaak gebruikt om tijdelijk een stuk code "uit te schakelen". Ook mogen we commentaar _achter_ een stuk C# code plaatsen (zie voorbeeld hieronder). ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#blok-commentaar) Blok commentaar We kunnen een stuk tekst als commentaar aangeven door voor de tekst `/*` te plaatsen en `*/` achteraan. Een voorbeeld: [PreviousH1: Variabelen en datatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes) [NextDatatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes) Last updated 5 years ago Was this helpful? * [Statements en de C# syntax](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#statements-en-de-c-syntax) * [Keywords: de woordenschat](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#keywords-de-woordenschat) * [Variabelen, identifiers en naamgeving](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#variabelen-identifiers-en-naamgeving) * [Regels voor identifiers](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#regels-voor-identifiers) * [Naamgeving afspraken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#naamgeving-afspraken) * [Commentaar](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#commentaar) * [Enkele lijn commentaar](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#enkele-lijn-commentaar) * [Blok commentaar](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials#blok-commentaar) Was this helpful? Copy //De start van het programma int getal=3; //Nu gaan we rekenen int result = getal * 5; // result= 3*5; Console.WriteLine(result); //We tonen resultaat op scherm: 15 Copy /* Veel commentaar. Een heel verhaal Mooi he. Is dit een haiku? */ int leeftijd= 0; leeftijd++; --- # Expressies en operators | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressies-en-operators) Expressies en operators ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Zonder expressies is programmeren saai: je kan dan enkel variabelen aan elkaar toewijzen. Expressies zijn als het ware eenvoudige tot complexe sequenties van bewerkingen die op 1 resultaat uitkomen. De volgende code is bijvoorbeeld een expressie: `3+2`. Het resultaat van deze expressie is 5. Over expressies in C# is véél te vertellen, maar niet aan de orde in deze cursus. Bekijk [zeker volgende tekst](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/expressions) indien je meer interesse hebt. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressie-resultaat-toewijzen) Expressie-resultaat toewijzen Meestal zal je expressies schrijven waarin je bewerkingen op en met variabelen uitvoert. Vervolgens zal je het resultaat van die expressie willen bewaren voor verder gebruik in je code. Voorbeeld van **expressie**\-resultaat toekennen: Copy int temperatuursVerschil = temperatuurGisteren - temperatuurVandaag; Hierbij zal de temperatuur uit de rechtse 2 variabelen worden uitgelezen, van elkaar wordt afgetrokken en vervolgens bewaard worden in temperatuursVerschil. De voorgaande code kan ook langer geschreven worden als: Copy int tussenResultaat = temperatuurGisteren - temperatuurVandaag; int temperatuursVerschil = tussenResultaat; Een ander voorbeeld van een **expressie**\-resultaat toewijzen maar nu met literals (stel dat we temperatuursVerschil reeds hebben gedeclareerd eerder): Copy temperatuursVerschil = 21 - 25; Uiteraard mag je ook combinaties van literals en variabelen gebruiken in je expressies: Copy int breedte = 15; int hoogte = 20 * breedte; [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#operators) Operators --------------------------------------------------------------------------------------------------------------------------------------------------------------- Operators in C# zijn de welgekende 'wiskundige bewerkingen' zoals optellen (`+`), aftrekken (`-`), vermenigvuldigen (`*`) en delen (`/`). Deze volgen de wiskundige regels van **volgorde van berekeningen**: 1. **Haakjes** 2. **Vermenigvuldigen, delen en modulo**: `*` (vermenigvuldigen), `/` (delen) en `%` (rest na deling, ook module genoemd) 3. **Optellen en aftrekken**: `+` en `-` (etc.) Net zoals in de wiskunde kan je in C# met behulp van de haakjes verplichten het deel tussen de haakjes eerst te doen, ongeacht de andere operators en hun volgorde van berekeningen: Je kan nu complexe berekeningen doen door literals, operators en variabelen samen te voegen. Bijvoorbeeld om te weten hoeveel je op Mars zou wegen: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#modulo-operator) Modulo operator `%` De modulo operator die we in C# aanduiden met `%` verdient wat meer uitleg. Deze operator zal als resultaat de gehele rest teruggeven wanneer we het linkse getal door het rechtse getal delen: De modulo-operator zal je geregeld gebruiken om bijvoorbeeld te weten of een getal een veelvoud van iets is. Als de rest dan 0 is weet je dat het getal een veelvoud is van het getal waar je het door deelde. Bijvoorbeeld om te testen of getal even is gebruiken we `%2`: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#verkorte-operator-notaties) Verkorte operator notaties Heel vaak wil je de inhoud van een variabele bewerken en dan terug bewaren in de variabele zelf. Bijvoorbeeld een variabele vermenigvuldigen met 10 en het resultaat ervan terug in de variabele plaatsen. Hiervoor zijn enkele verkorte notaties in C#. Stel dat we een variabele `int getal` hebben: **Verkorte notatie** **Lange notatie** **Beschrijving** `getal++;` `getal= getal+1;` variabele met 1 verhogen `getal--;` `getal= getal-1;` variabele met 1 verlagen `getal+=3;` `getal= getal+3;` variabele verhogen met een getal `getal-=6;` `getal= getal-6;` variabele verminderen met een getal `getal*=7;` `getal= getal*7;` variabele vermenigvuldigen met een getal `getal/=2;` `getal= getal/2;` variabele delen door een getal Je zal deze verkorte notatie vaak tegenkomen. Ze zijn identiek aan elkaar en zullen dus je code niet versnellen. Ze zal enkel compacter zijn om te lezen. Bij twijfel, gebruik gewoon de lange notatie. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressiedatatypes) Expressiedatatypes --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcnP9Sjg_ri0kqQM%252Fattention.jpg%3Fgeneration%3D1583826014882936%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=738dd3a3&sv=2) De types die je in je berekeningen gebruikt bepalen ook het type van het resultaat. Als je bijvoorbeeld twee `int` variabelen of literals optelt zal het resultaat terug een `int` geven. Je kan echter geen kommagetallen aan `int` toewijzen. Als je dus twee `double` variabelen deelt is het resultaat terug een `double` en zal deze lijn een fout geven daar je probeert een `double` aan een `int` toe te wijzen: **Let hier op!** But wait... it gets worse! Wat als je een `int` door een `int` deelt? Het resultaat is terug een `int`. Je bent gewoon alle informatie na de komma kwijt. Kijk maar: Er zal `4` op het scherm verschijnen! (niet `4.5` daar dat geen `int` is). Wat als je datatypes mengt? Als je een berekening doet met een `int` en een `double` dan zal C# het 'grootste' datatype kiezen. In dit geval een double. Volgende code zal dus werken: Volgende niet: Wil je dus het probleem oplossen om 9 te delen door 2 dan zal je minstens 1 van de 2 literals of variabelen door een double moeten omzetten. Het voorbeeld van hierboven herschrijven we dan naar: En nu krijgen we wel `4.5`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#en-complexer) En complexer? Het kan subtiel en ambetant worden in grotere berekeningen. Stel dat ik afspreek dat je van mij de helft van m'n salaris krijgt. Ik verdien (fictief) 10000 euro per maand. Ik gebruik volgende formule: Hoeveel krijg je van me? **0.0 euro, MUHAHAHAHA!!!** De volgorde van berekeningen zal eerst het gedeelte tussen de haakjes doen: 1 delen door 2 geeft 0, daar we een `int` door een `int` delen en dus terug een `int` als resultaat krijgen. Vervolgens zullen we deze `0` vermenigvuldigen met `10000.0` waarvan ik zo slim was om deze in `double` te zetten. Niet dus. We vermenigvuldigen weliswaar een `double` (het salaris) met een `int` maar die `int` is reeds `0` en we krijgen dus `0.0` als resultaat. Wil je het dus eerlijk spelen dan zal je de formule moeten aanpassen naar: Nu krijgt het gedeelte tussen de haakjes een `double` als resultaat, namelijk `0.5` dat we dan kunnen vermenigvuldigen met het salaris om `5000.0` te krijgen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#kennisclip) Kennisclip ----------------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Expressies](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=3a0370ef-b3da-4642-aeaa-a9660083e329) [PreviousVariabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen) [NextOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica) Last updated 5 years ago Was this helpful? * [Expressies en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressies-en-operators) * [Expressie-resultaat toewijzen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressie-resultaat-toewijzen) * [Operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#operators) * [Modulo operator %](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#modulo-operator) * [Verkorte operator notaties](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#verkorte-operator-notaties) * [Expressiedatatypes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#expressiedatatypes) * [En complexer?](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#en-complexer) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies#kennisclip) Was this helpful? Copy 3+5*2 => zal 13 als resultaat geven (3+5)*2 => zal 16 geven Copy double gewichtOpAarde= 80.3; //kg double zwaartekrachtAarde= 9.81; //m/s² double zwaartekrachtMars= 3.711; //m/s² double gewichtOpMars= (gewichtOpAarde/zwaartekrachtAarde) * zwaartekrachtMars; //kg Console.WriteLine("Je weegt op Mars" + gewichtOpMars + " kg"); Copy 7%2 => zal 1 geven, daar 7 gedeeld door 2, 3 met rest 1 geeft 10%5 => zal 0 geven, daar 10 gedeeld door 5, 2 met rest 0 geeft Copy int getal= 1234234; int rest= getal%2; Console.WriteLine($"Indien het getal als rest 0 geeft weten we dat het even is. De rest is: {rest}"); Copy int result= 3+4; Copy int otherResult= 3.1/45.2; Copy int getal1= 9; int getal2= 2; int result= getal1/getal2; Console.WriteLine(result); Copy double result= 3/5.6; Copy int result= 3/5.6; Copy int getal1= 9; double getal2= 2.0; double result= getal1/getal2; Console.WriteLine(result); Copy double helft= 10000.0 * (1/2); Copy double helft = 10000.0 * (1.0/2); --- # Casting, conversie en parsing | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Wanneer je de waarde van een variabele wil toekennen aan een variabele van een ander type mag dit niet zomaar. Volgende code zal bijvoorbeeld een dikke error geven: Copy int age = 4.3; Je kan geen appelen in peren veranderen zonder magie: in het geval van C# zal je moeten **converteren of casten**. Dit kan op 3 manieren: * Via casting: de (klassieke) manier die ook werkt in veel andere programmeertalen. * Via de Convert bibliotheek van .NET. Deze staat omzettingen toe die handig zijn, maar niet op het niveau van de taal zijn vastgelegd. * Via _parsing_ die we enkel terloops bespreken, maar die niet bij de leerstof van deze cursus hoort. Parsing betekent dat je tekst met een bepaalde vorm omzet naar data en werkt dus alleen op strings. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#casting) Casting ------------------------------------------------------------------------------------------------------------------------------------------------------------ Het is uiteraard onmogelijk om een kommagetal aan een geheel getal toe te wijzen zonder dat er informatie verloren zal gaan. Toch willen we dit soms doen. **Van zodra we een variabele van het ene type willen toekennen aan een variabele van een ander type en er dataverlies zal plaatsvinden dan moeten we aan casting doen.** Hierbij dien je aan de compiler te zeggen: _"Volgende variabele die van het type x is, moet aan deze variabele van het type y toegekend worden._ _**Ik besef dat hierbij data verloren kan gaan, maar zet de variabele toch maar om naar het nieuwe type, ik draag alle verantwoordelijkheid voor het verlies.**__"_. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#wat-is-casting) Wat is casting Casting heb je nodig om een variabele van een bepaald type voor een ander type te laten doorgaan. Stel dat je een complexe berekening hebt waar je werkt met verschillende types (bijvoorbeeld int, double en float). Door te casten voorkom je dat je vreemde resultaten krijgt. Je gaat namelijk bepaalde types even als andere types gebruiken. Het is belangrijk in te zien dat het casten van een variabele naar een ander type enkel een gevolg heeft TIJDENS het uitwerken van de expressie waarbinnen je werkt. De variabele in het geheugen zal voor eeuwig en altijd het type zijn waarin het origineel gedeclareerd werd. > **Je dient voornamelijk aan casting te doen wanneer je aan** _**narrowing**_ **doet: een datatype omzetten naar een ander datatype dat een verlies aan data met zich zal meebrengen.** Casting duid je aan door voor de variabele of literal het datatype tussen haakjes te plaatsen naar wat het omgezet moet worden: Copy int mijngetal = (int)3.5; of ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#narrowing) Narrowing Casting doe je dus wanneer je een variabele wilt toekennen aan een andere variabele van een ander type dat daar eigenlijk niet inpast. We moeten dan aan **narrowing** doen, letterlijk het versmallen van de data. Bekijk eens het volgende voorbeeld: Dit zal niet gaan. Je probeert namelijk een waarde van het type double in een variabele van het type int te steken. Dat gaat enkel als je informatie weggooit. Je moet aan _narrowing_ doen. Dit gaat enkel als je expliciet aan de compiler zegt: het is goed, je mag informatie weggooien, ik begrijp dat en zal er rekening mee houden. Dit proces van narrowing noemen we casting. En je lost dit op door voor de variabele die tijdelijk dienst moet doen als een ander type, het nieuwe type, tussen ronde haakjes te typen, als volgt: Het resultaat in `var2` zal `20` zijn (alles na de komma wordt bij casting van een double naar een int weggegooid). > Merk op dat `var1` nooit van datatype is veranderd; enkel de inhoud ervan (`20.4`) werd eruit gehaald, omgezet ("gecast") naar `20` en dan aan `var2` toegewezen dat enkel `int` aanvaardt. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#narowing-in-de-praktijk) Narowing in de praktijk Stel dat temperatuurGisteren en temperatuurVandaag van het type int zijn, maar dat we nu de gemiddelde temperatuur willen weten. De formule voor gemiddelde temperatuur over 2 dagen is: Test dit eens met de waarden 20 en 25. Wat zou je verwachten als resultaat? Inderdaad: 22,5 (omdat (20+25)/2 = 22.5) _Nochtans krijg je 22 op scherm te zien en zal de variabele temperatuurGemiddeld ook effectief de waarde 22 bewaren en niet 22.5._ Het probleem is dat het gemiddelde van 2 getallen niet noodzakelijk een geheel getal is. **Omdat de expressie enkel integers bevat (temperatuurGisteren, temperatuurVandaag en 2) zal ook het resultaat een integer zijn.** In dit geval wordt alles na de komma gewoon _weggegooid_, vandaar de uitkomst. Hoe krijgen we de correctere uitslag te zien? Door temperatuurGemiddeld als kommagetal te declareren (bijvoorbeeld door het type double): Als we dit testen zal nog steeds de waarde 22 aan temperatuurGemiddeld toegewezen worden. De expressie rechts bevat enkel integers en de computer zal dus ook de berekening en het resultaat als integer beschouwen ([lees hier hoe dit nu weer zat](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies) ). We moeten dus ook de rechterkant van de toekenning als double beschouwen. _We doen dit, zoals eerder vermeld, door middel van_ _**casting**_, als volgt: Nu zal temperatuurGemiddeld wel de waarde 22.5 bevatten. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#widening) Widening Casting is echter niet nodig als je aan **widening** doet (een kleiner type in een groter type steken), als volgt: Deze code zal zonder problemen gaan. `var2` zal de waarde `20.0` bevatten. De inhoud van `var1` wordt _verbreed_ naar een `double`, eenvoudigweg door er een kommagetal van te maken. Er gaat **geen** inhoud verloren echter. Je hoeft dus niet expliciet de casting-notatie zoals `(double)var1` te doen, de computer ziet zelf dat hij de inhoud van `var1` zonder dataverlies kan toekennen aan `var2`. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#conversie) Conversie ---------------------------------------------------------------------------------------------------------------------------------------------------------------- Casting is een in de taal ingebakken manier van data omzetten, die vooral zeer nuttig is daar deze ook werkt in andere C#-related programmeertalen zoals C, C++ en Java. Echter, .NET heeft ook ingebouwde conversie-methoden die je kunnen helpen om data van het ene type naar het andere te brengen. Het nadeel is dat ze iets meer typwerk (en dus meer code) verwachten dan bij casting. Al deze methoden zitten binnen de **Convert**\-bibliotheek van .NET. Het gebruik hiervan is zeer eenvoudig. Enkele voorbeelden: Je plaatst tussen de ronde haakjes de variabele of literal die je wenst te converteren naar een ander type. Merk op dat naar een `int` converteren met `.ToInt32()` moet gebeuren. Om naar een `short` te converteren is dit met behulp van `.ToInt16()`. > `Convert.ToBoolean` verdient extra aandacht: Wanneer je een getal, eender welk, aan deze methode meegeeft zal deze altijd naar `True` geconverteerd worden. Enkel indien je `0`, (`int`) of `0.0` ingeeft, dan krijg je `False`. In quasi alle andere gevallen krijg je altijd `True`. Opgelet: de convert zal zelf zo goed mogelijk de data omzetten en dus indien nodig widening of narrowing toepassen. Zeker bij het omzetten van een string naar een ander type kijk je best steeds de documentatie na om te weten wat er intern juist zal gebeuren. Je kan [alle conversie-mogelijkheden hier bekijken](https://msdn.microsoft.com/en-us/library/system.convert.aspx) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#ter-info-parsing) Ter info: Parsing ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- > Voorlopig zullen we parsing niet nodig hebben. Voor de volledigheid plaatsen we deze informatie hier echter. Naast conversie en casting bestaat er ook nog parsing. Parsing is anders dan conversie en casting. Parsing zal je enkel nodig hebben dit jaar om tekst naar getallen om te zetten. Ieder ingebouwd type heeft een .Parse() methode die je kan aanroepen om strings om te zetten naar het gewenste type. Parsing zal je echter minder vaak nodig hebben. Gebruik deze enkel wanneer 1. Je een string hebt waarvan je weet dat deze altijd van een specifiek type zal zijn, bv een int, dan kan je `Int32.Parse()` gebruiken. 2. Je input van de gebruiker vraagt (bv via Console.ReadLine) en niet 100% zeker bent dat deze een getal zal bevatten, gebruik dan `Int32.TryParse()`. ([info](https://msdn.microsoft.com/en-us/library/f02979c7.aspx) ) Er zijn nog subtiele verschillen die we hier niet behandelen ([zie](https://stackoverflow.com/questions/199470/whats-the-main-difference-between-int-parse-and-convert-toint32) ). Voorbeeld van parsing: [PreviousH3: Werken met data](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data) [NextInput verwerken en omzetten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4b_inputconverten) Last updated 5 years ago Was this helpful? * [Casting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#casting) * [Wat is casting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#wat-is-casting) * [Narrowing](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#narrowing) * [Narowing in de praktijk](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#narowing-in-de-praktijk) * [Widening](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#widening) * [Conversie](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#conversie) * [Ter info: Parsing](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/4_converteren_casting#ter-info-parsing) Was this helpful? Copy double kommagetal = 13.8; int kommaNietWelkom = (int)kommagetal; Copy double var1; int var2; var1 = 20.4; var2 = var1; Copy double var1; int var2; var1 = 20.4; var2 = (int)var1; Copy int temperatuurGemiddeld = (temperatuurGisteren + temperatuurVandaag)/2; Copy double temperatuurGemiddeld = (temperatuurGisteren + temperatuurVandaag)/2; Copy double temperatuurGemiddeld = ((double)temperatuurGisteren + (double)temperatuurVandaag)/2; Copy int var1; double var2; var1 = 20; var2 = var1; Copy int getal= Convert.ToInt32(3.2); //double to int double anderGetal= Convert.ToDouble(5); //int to double bool isWaar= Convert.ToBoolean(1); //int to bool int userAge= Convert.ToInt32("19"); //string to int int ageOther= Convert.ToInt32(anderGetal); //double to int Copy int numVal = Int32.Parse("-105"); Console.WriteLine(numVal); --- # Datatypes | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Een essentieel onderdeel van C# is kennis van datatypes. Binnen C# zijn een aantal types gedefinieerd die je kan gebruiken om data in op te slaan. Wanneer je data wenst te bewaren in je applicatie dan zal je je moeten afvragen wat voor soort data het is. Gaat het om een getal, een geheel getal, een kommagetal, een stuk tekst of misschien een binaire reeks? Ieder datatype in C# kan één welbepaald soort data bewaren en dit zal telkens een bepaalde hoeveelheid computergeheugen vereisen. Er zijn tal basistypes in C# gedeclareerd (zogenaamde **primitieve datatypes**). Dit semester leren we werken met datatypes voor: * Gehele getallen: `sbyte, byte, short, ushort, int, uint, long` * Kommagetallen: `double, float, decimal` * Tekst: `char, string` * Booleans: `bool` Het datatype `string` heb je al gezien in het vorig hoofdstuk. Je hebt toen al een variabele aangemaakt van het type string door de zin `string result;`. Verderop plaatsten we dan iets waar de gebruiker iets kan intypen in die variabele (toekenning in C# gaat van rechts naar links): Copy result = Console.ReadLine(); [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#basistypen-voor-getallen) Basistypen voor getallen -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Alhoewel een computer digitaal werkt en enkel 0'n en 1'n bewaard zou dat voor ons niet erg handig werken. C# heeft daarom een hoop datatypes gedefinieerd om te werken met getallen zoals wij ze kennen, gehele en kommagetallen. Intern zullen deze getallen nog steeds binair bewaard worden, maar dat is tijdens het programmeren zelden een probleem. Onthoudt echter dat onderaan je programma steeds hardware zal draaien die binair werkt. De basistypen van C# om getallen in op te slaan zijn: * Voor gehele getallen: `sbyte, byte, short, ushort, int, uint, long` * Voor kommagetallen: `double, float, decimal` Ieder type hierboven heeft een bepaald bereik en hoeveelheid geheugen nodig. Je zal dus steeds moeten afwegen wat je wenst. Op een high-end pc met ettelijke gigabytes aan werkgeheugen (RAM) is geheugen zelden een probleem waar je rekening mee moet houden...Of toch: zoals met real-time shooters die miljoenen berekeningen (3D) per seconde moeten uitvoeren. Daar zal iedere byte tellen. Op andere apparaten (smartphone, arduino, smart fridges, etc.) is iedere byte geheugen nog kostbaarder. **Kortom: kies steeds bewust het datatype dat het beste 'past' voor je probleem qua bereik, precisie en geheugengebruik.** Deze datatypes hebben allemaal een bepaald bereik, wat een rechtstreeks gevolg is van de hoeveelheid geheugen die ze innemen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#gehele-getallen) Gehele getallen Voor de gehele getallen: **Type** **Geheugen** **Bereik** **Meer info** `sbyte` 8 bits \-128 tot 127 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/sbyte) `byte` 8 bits 0 tot 255 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/byte) `short` 16 bits \-32768 tot 32767 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/short) `ushort` 16 bits 0 tot 65535 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/ushort) `int` 32 bits \-2 147 483 648 tot 2 147 483 647 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/int) `uint` 32 bits 0 tot 4294967295 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/uint) `long` 64 bits \-9 223 372 036 854 775 808 tot 9 223 372 036 854 775 807 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/long) `ulong` 64 bits 0 tot 18 446 744 073 709 551 615 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/long) `char` 16 bits 0 tot 65535 [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/char) **We raden aan dat je de 'info' urls bekijkt om te ontdekken hoe je de literals van datatypes moet schrijven in C#.** Enkele opmerkingen bij deze tabel: * De `s` vooraan `sbyte` types staat voor `signed`: m.a.w. 1 bit wordt gebruikt om het + of - teken te bewaren. * De `u` vooraan `ushort`, `uint` en `ulong` staat voor `unsigned`. Het omgekeerde van signed dus. Kwestie van het ingewikkeld te maken. Deze twee datatypes hebben dus geen teken en zijn **altijd positief**. * `char` bewaard karakters. We zullen verderop dit datatype uitspitten en ontdekken dat karakters (alle tekens op het toetsenbord, inclusief getallen, leesteken, etc.) als gehele, binaire getallen worden bewaard. Daarom staat `char` in deze lijst. * Het grootste getal bij `long` is 2 tot de 63ste ( negen triljoen tweehonderddrieëntwintig biljard driehonderd tweeënzeventig biljoen zesendertig miljard achthonderdvierenvijftig miljoen zevenhonderdvijfenzeventigduizend achthonderd en zeven). Dit zijn maar 63 bits?! Inderaad, de laatste bit wordt gebruikt om het teken te bewaren. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#kommagetallen) Kommagetallen Voor de kommagetallen zijn er maar 3 mogelijkeden. Ieder datatype heeft een 'voordeel' tegenover de 2 andere, dit voordeel staat vet in de tabel: **Type** **Geheugen** **Bereik** **Precisie** `float` **32 bits** ±1.5 x 10-45 to ±3.4 x 1038 7 digits [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/float) `double` 64 bits **±5.0 x 10-324 to ±1.7 x 10308** 15 digits [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/double) `decimal` 128 bits ±1.0 x 10-28 to ±7.9228 x 1028 **28-29 digits** [info](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/decimal) Zoals je ziet moet je bij kommagetallen een afweging maken tussen 3 even belangrijke criteria. Heb je ongelooflijk grote precisie nodig dan ga je voor een `decimal`. Wil je vooral erg grote of erg kleine getallen kies je voor `double`. De precisie van een getal is het aantal beduidende of significante cijfers. Het getal 12,45 heeft een precisie van 4. Zoals je merkt zal je dus zelden `decimal` nodig hebben, deze zal vooral nuttig zijn in wetenschappelijke programma's waar met erg exacte cijfers moet gewerkt worden. Bij twijfel opteren we meestal voor kommagetallen om het `**double**` datatype te gebruiken. Bij gehele getallen kiezen we meestal voor `**int**`. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#boolean-datatype) Boolean datatype ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Het `bool` (**boolean**) is het eenvoudigste datatype van C#. Het kan maar 2 mogelijke waarden bevatten: `true` of `false`. 0 of 1 met andere woorden. Het gebeurt vaak dat beginnende programmeurs een `int` variabele gebruiken terwijl ze toch weten dat de variabele maar 2 mogelijke waarden zal hebben. Om dus geen onnodig geheugen te verbruiken is het aan te raden om in die gevallen steeds met een `bool` variabele te werken. We zullen het `bool` datatype erg veel nodig hebben wanneer we met [beslissingen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_beslissingen_intro) zullen werken, specifiek de [if statements](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if) die afhankelijk van de uitslag van een `bool` bepaalde code wel of niet zullen doen uitvoeren. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#tekst-string-datatype) Tekst/String datatype -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- We besteden verderop een heel apart hoofdstuk aan tonen hoe je tekst en enkele karakters kan bewaren in variabelen. Sneak preview: * Tekst kan bewaard worden in het `string` datatype * Een enkel karakter wordt bewaard in het `char` datatype dat we ook hierboven al even hebben zien passeren. Meer info vind je later in [dit hoofdstuk](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/5_chars_strings) . [PreviousDe essentie van C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/0_csharpessentials) [NextVariabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1b_variabelen) Last updated 5 years ago Was this helpful? * [Basistypen voor getallen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#basistypen-voor-getallen) * [Gehele getallen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#gehele-getallen) * [Kommagetallen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#kommagetallen) * [Boolean datatype](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#boolean-datatype) * [Tekst/String datatype](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/1_datatypes#tekst-string-datatype) Was this helpful? --- # Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-string-interpolation) Oefening: H2-string-interpolation -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen) Leerdoelen * gebruik van string interpolation ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse) Functionele analyse Oefening H1-maaltafels en H1-ruimte dienen we te herschrijven volgens de principes van string interpolation. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#voorbeeldinteractie-s) voorbeeldinteractie(s) Zie oefening H1-maaltafels en H1-ruimte. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#programmaverloop) Programmaverloop Pas string interpolatie mbv `$` (manier 2) toe. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#testscenarios) Testscenario's * Zie oefening H1-maaltafels en H1-ruimte. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-systeem-informatie) Oefening: H2-systeem-informatie ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-1) Leerdoelen * gebruik van string interpolation * gebruik van `Environment` class ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-1) Functionele analyse Maak een applicatie die de belangrijkste computer-informatie (geheugen, etc) aan de gebruiker toont. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse-1) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ui-1) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#voorbeeldinteractie-s-1) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-1) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#programmaverloop-1) Programmaverloop Pas string interpolatie mbv `$` (manier 2) toe. De computerinformatie kan je verkrijgen mbv de Environment-klasse. Hier enkele voorbeelden (kijk zelf of er nog nuttige properties over je computer in staan en voorzie deze ook binnen jouw code): > **WorkingSet** geeft terug hoeveel geheugen het programma van windows toegewezen krijgt. Als je dus op 'run' klikt om je code te runnen dan zal dit programma geheugen krijgen en via WorkingSet kan het programma dus zelf zien hoeveel het krijgt. (wat een vreemde lange zin). Zoals je ziet wordt het geheugen in bytes teruggegeven. Zorg ervoor dat het geheugen steeds in mega of gigabytes op het scherm wordt getoond. **Formatteer de informatie met behulp van de $-notatie zodat deze deftig getoond worden en de gebruiker snel de belangrijke informatie over z'n systeem te zien krijgt.** #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#testscenarios-1) Testscenario's * wat gebeurt er wanneer je het datatype string zou wijzigen in int? ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-1) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-weerstandberekenaar-deel1) Oefening: H2-weerstandberekenaar-deel1 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-2) Leerdoelen * gebruik van math class ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-2) Functionele analyse Stel dat je in het labo een weerstand vastneemt en je kent de kleurcodes van de streepjes wel, maar niet hoe je die kunt omzetten naar de effectieve weerstandswaarde. In dit programma kunnen we de gebruiker helpen. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpP6CULtCaqTB60Z6%252Fcolors.jpg%3Fgeneration%3D1567089864651719%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=9fa0e437&sv=2) (Bron afbeelding: [https://www.esdsite.nl](https://www.esdsite.nl/) ) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse-2) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ui-2) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#voorbeeldinteractie-s-2) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-2) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#programmaverloop-2) Programmaverloop Maak een programma dat de weerstandwaarde berekent gebaseerd op: * Ring 1: die de tientallen voorstelt * Ring 2: die de eenheden voorstel * Ring 3: die de exponent (10 tot de macht) voorstelt. (tip:`Math.Pow(10,ring3`)) Gebruik drie variabelen van het type `int`. (we veronderstellen dus dat de gebruiker de kleurcode heeft omgezet naar een getal en dat toewijst aan de variabele) Test dat je "formule/berekening" klopt om gebaseerd op 2 (of 3) ringen de weerstandswaarde te berekenen. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#testscenarios-2) Testscenario's * wat gebeurt er wanneer je een hoger getal dan 9 zou invoeren? ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-2) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-weerstandberekenaar-deel2) Oefening: H2-weerstandberekenaar-deel2 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-3) Leerdoelen * gebruik van UNICODE ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-3) Functionele analyse Zie deel 1. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-3) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#programmaverloop-3) Programmaverloop Zie deel 1 en plaats het geheel in een mooie UNICODE-tabel. Hier enkele nuttige tekens: Gebruik $-string interpolatie om de informatie in de tabel te tonen zodat je volgende uitvoer kunt genereren: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpP6EfFLssKmQhED4%252Ftabel.png%3Fgeneration%3D1567089872114231%26alt%3Dmedia&width=300&dpr=4&quality=100&sign=c232e6fb&sv=2) of: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-LnSpKnbSfJoNnim_ViI%252F-LnSpP6G1kH9iIp_2C37%252Ftabel2.png%3Fgeneration%3D1567089862817952%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=79b2419b&sv=2) #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#testscenarios-3) Testscenario's * wat gebeurt er wanneer je een waarde van circle 1, 2 of 3 uit meer dan twee cijfers bestaat? ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-3) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-shell-starter) Oefening: H2-shell-starter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-4) Leerdoelen * gebruik van `Process.Start()` * verwerken van uitvoer ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-4) Functionele analyse Je kan de output van een `Process.Start()` programma naar je console scherm sturen. Dit vereist wat meer code. Volgende voorbeeld zal de output van het commando `ipconfig /all` op het scherm tonen: Onder macOS heb je een ander commando nodig. Gebruik daar `"ifconfig"` voor het (uitvoerbaar) bestand en geef een lege string mee voor de argumenten. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-4) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#programmaverloop-4) Programmaverloop Maak enkele kleine C# programma's die bepaalde shell-commando's zullen uitvoeren en die de uitvoer in hoofdletters weergeven in plaats van in de gewone vorm. Enkele nuttige shell-commando's in de netwerk-sfeer zijn bijvoorbeeld: #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#testscenarios-4) Testscenario's * Probeer van bovenstaande programma's al die, die compatibel zijn met je besturingssysteem. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-4) Ondersteunend materiaal Hou het voorlopig op de cursus. [PreviousUnicode tonen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/7_unicode) [NextUitbreidingsoefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/b_practica) Last updated 5 years ago Was this helpful? * [Oefening: H2-string-interpolation](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-string-interpolation) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal) * [Oefening: H2-systeem-informatie](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-systeem-informatie) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-1) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-1) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse-1) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-1) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-1) * [Oefening: H2-weerstandberekenaar-deel1](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-weerstandberekenaar-deel1) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-2) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-2) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-analyse-2) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-2) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-2) * [Oefening: H2-weerstandberekenaar-deel2](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-weerstandberekenaar-deel2) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-3) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-3) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-3) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-3) * [Oefening: H2-shell-starter](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#oefening-h2-shell-starter) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#leerdoelen-4) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#functionele-analyse-4) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#technische-hulp-4) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code/a_practica#ondersteunend-materiaal-4) Was this helpful? Copy Uw computer heeft een 64-bit besturingssysteem: True De naam van uw pc is: LAPTOP Uw pc heeft 4 processorkernen. ikke is uw gebruikersnaam. Je gebruikt 11 megabytes aan geheugen Copy bool is64bit = Environment.Is64BitOperatingSystem; string pcName = Environment.MachineName; int procCount = Environment.ProcessorCount; string userName = Environment.UserName; long memory = Environment.WorkingSet; //zal ongeveer 11 MB teruggeven. Copy Geef de waarde (uitgedrukt in een getal van 0 tot 9) van de eerste ring: 2 Geef de waarde (uitgedrukt in een getal van 0 tot 9) van de tweede ring: 2 Geef de waarde (uitgedrukt in een getal van -2 tot 7) van de derde ring (exponent): 2 Resultaat is 2200 Ohm, ofwel 22x100. Copy ╔═══════════════╦═══════════════╗ ║ ╟───────────────╫───────────────╢ ║ ╚═══════════════╩═══════════════╝ Copy System.Diagnostics.Process process = new System.Diagnostics.Process(); process.StartInfo.FileName = "ipconfig"; process.StartInfo.Arguments = "/all"; process.StartInfo.UseShellExecute = false; process.StartInfo.RedirectStandardOutput = true; process.StartInfo.RedirectStandardError = true; process.Start(); //start process // Read the output (or the error) string output = process.StandardOutput.ReadToEnd(); Console.WriteLine(output); string err = process.StandardError.ReadToEnd(); Console.WriteLine(err); //Continue Console.WriteLine("Klaar"); Copy hostname arp -a getmac (enkel onder Windows) nslookup google.com --- # H5: Loops | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Loops intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro) [While en Do While](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/1_while_dowhile) [For](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for) [Nesting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting) [Programma flow analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow) [Oefeningen deel 1](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica) [Oefeningen deel 2](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica) [Oefeningen deel 3](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/b_practica) [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/a_practica) [NextLoops intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro) Last updated 5 years ago Was this helpful? Was this helpful? --- # Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren **Gebruik je kennis van debuggen om vanaf dit hoofstuk problemen op te lossen. Gebruik niet** `**Console.WriteLine()**` **om de waarde van een variabele te controleren at-runtime, maar gebruik daarentegen breakpoints!** [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-geometric-fun) Oefening: H3-geometric-fun -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen) Leerdoelen * gebruik van de `Math` namespace ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse) Functionele analyse Je moet verschillende vaakgebruikte meetkundige berekeningen uitvoeren. Vraag aan de gebruiker een hoek in graden. Zet deze om naar radialen. Gebruik vervolgens de verschillende geometrische functies in de `Math` namespace om de sinus, cosinus en tangens van de hoek aan de gebruiker te tonen. Je moet eerst omzetten naar radialen omdat deze functies dat formaat verwachten. Toon alle resultaten tot twee cijfers na de komma. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse) Technische analyse Omzetting van graden naar radialen werkt als volgt, als `rad` een aantal radialen is en `deg` een aantal graden: rad=deg \* (Π/180). De verschillende wiskundige functies die je nodig hebt, vind je [hier](https://docs.microsoft.com/en-us/dotnet/api/system.math.sin?view=netcore-3.0) (zie "Methods" in de linkerbalk). Het getal Π vind je (bij benadering) onder `Math.PI`. Zie het hoofdstuk rond werken met tekst om twee cijfers na de komma te tonen. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#voorbeeldinteractie-s) voorbeeldinteractie(s) Copy Geef een hoek, uitgedrukt in graden. > 45 45 graden is 0.79 radialen. De sinus is 0.71. De cosinus is 0.71. De tangens is 1.00. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#h3-bmi-berekenaar) H3-BMI-berekenaar --------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-1) Leerdoelen * gebruik van de `Math` namespace * je programma's delen met anderen * kommagetallen parsen * stringinterpolatie en formattering ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-1) Functionele analyse Maak een programma dat aan de gebruiker z'n lengte en gewicht vraagt en vervolgens z'n berekende BMI (Body Mass Index) toont. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-1) Technische analyse De formule voor de BMI is BMI = kg / m², waarbij kg het de massa van een persoon voorstelt en m zijn lengte in meter (dus typisch als kommagetal tussen 1 en 2). Je vindt een functie om getallen af te ronden in de `Math` namespace. Je kan hieraan als eerste waarde aan getal meegeven dat je wil afronden en als tweede een aantal cijfers na de komma. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#ui-1) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#voorbeeldinteractie-s-1) voorbeeldinteractie(s) > Bekijk de volgende [kennisclip](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=6381a023-ae87-4662-91ed-a969006d3d9b) > en geef je uitvoerbaar bestand van het programma aan een klasgenoot. Kijk of hij het kan uitvoeren. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-op-de-poef) Oefening: H3-op-de-poef -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-2) Leerdoelen * tussenresultaten bijhouden * werken met de `Math` namespace ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-2) Functionele analyse Een vaste klant in je café bestelt altijd "op de poef". Dat wil zeggen dat hij niet betaalt en dat z'n rekeningen worden neergeschreven. Ooit zal de klant dan gevraagd worden de hele som te betalen. Schrijf een programma dat 5 keer na elkaar aan de barman vraagt om een bedrag in te voeren. Het ingevoerde bedrag wordt opgeteld bij wat er reeds op de rekening staat. Na 5 keer wordt de totale som getoond alsook hoeveel weken het duurt indien de klant wekelijks 10 euro afbetaalt. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-2) Technische analyse Gebruik een variabele om de totale som van de rekeningen bij te houden. De bedragen zullen "vrij klein" zijn, dus nooit meer dan €100. Het zijn ook gehele getallen. Je hoeft geen interest aan te rekenen. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#ui-2) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#voorbeeldinteractie-s-2) voorbeeldinteractie(s) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-feestkassa) Oefening: H3-feestkassa -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-3) Leerdoelen * tussenresultaten bijhouden ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-3) Functionele analyse De plaatselijke voetbalclub organiseert een mosselfestijn. Naast mosselen met frietjes (20 EUR) bieden ze voor de kinderen de mogelijkheid om een koninginnehapje (10 EUR) te kiezen. Verder is er een ijsje als nagerecht voorzien (3 EUR). Om het gemakkelijk te maken kosten alle dranken 2 EUR. Ontwerp een applicatie zodat de vrijwilliger aan de kassa alleen maar de juiste aantallen moet ingeven ,lijn per lijn. (frietjes, koninginenhapje, ijsje, drank) om de totaal te betalen prijs te berekenen. Het resultaat wordt als volgt weergegeven: `Het totaal te betalen bedrag is x EURO`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-3) Technische analyse Je gebruikt best een variabele om de voorlopig som bij te houden. Zo moet je minder code herhalen. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#ui-3) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#voorbeeldinteractie-s-3) voorbeeldinteractie(s) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#h3-orakeltje) H3-orakeltje ----------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-4) Leerdoelen * werken met willekeurige getallen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-4) Functionele analyse Maak een orakel/waarzegger, namelijk de kleine broer of zus van het [Orakel van Delphi](https://nl.wikipedia.org/wiki/Orakel_van_Delphi) . Het programma zal aan de gebruiker vertellen hoe lang deze nog zal leven. Bijvoorbeeld: "Je zal nog 15 jaar leven.". Het orakel zal enkel realistische getallen geven. Maw, getallen tussen de 5 en 125 jaar (onder de 5 zou grof zijn). > We gaan geregeld een oefening in een later hoofdstuk verder uitbreiden. Het orakeltje van Delphi is er zo eentje. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-4) Technische analyse Je moet hier een willekeurig getal bepalen en dat dan in een mooie vorm presenteren aan de gebruiker. Gebruik hiervoor de klasse `Random`. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#ui-4) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#voorbeeldinteractie-s-4) voorbeeldinteractie(s) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-random-invoer) Oefening: H3-random-invoer -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Pas oefening H3-op-de-poef aan zodat de gebruiker vervangen wordt door een randomgenerator en de gebruiker op de hoogte brengt van de gegenereerde getallen (tussen 1 en 50 inclusief). Dit levert een output als volgt: [PreviousDebuggen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/5_debuggen) [NextH4: Beslissingen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen) Last updated 5 years ago Was this helpful? * [Oefening: H3-geometric-fun](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-geometric-fun) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse) * [H3-BMI-berekenaar](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#h3-bmi-berekenaar) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-1) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-1) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-1) * [Oefening: H3-op-de-poef](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-op-de-poef) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-2) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-2) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-2) * [Oefening: H3-feestkassa](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-feestkassa) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-3) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-3) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-3) * [H3-orakeltje](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#h3-orakeltje) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#leerdoelen-4) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#functionele-analyse-4) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#technische-analyse-4) * [Oefening: H3-random-invoer](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h3-werken-met-data/a_practica#oefening-h3-random-invoer) Was this helpful? Copy Hoe veel weeg je in kg? > 69.0 Hoe groot ben je in m? > 1.78 Je BMI bedraagt 21.78. Copy Voer bedrag in? > 12 De poef staat op 12 euro Voer bedrag in? > 14 De poef staat op 26 euro Voer bedrag in? > 3 De poef staat op 29 euro Voer bedrag in? > 8 De poef staat op 37 euro Voer bedrag in? > 2 De poef staat op 39 euro ************************* Het totaal van de poef is 39 euro. Dit zal 4 afbetalingen vragen. Copy Mosselen met frietjes? > 3 Koninginnenhapjes? > 5 Ijsjes? > 2 Dranken? > 5 Het totaal te betalen bedrag is 126 EURO Copy Je zal nog 7 jaar leven. Copy Je zal nog 64 jaar leven. Copy Voer bedrag in? Automatisch gegenereerd: 12 De poef staat op 12 euro Voer bedrag in? Automatisch gegenereerd: 14 De poef staat op 26 euro Voer bedrag in? Automatisch gegenereerd: 3 De poef staat op 29 euro Voer bedrag in? Automatisch gegenereerd: 8 De poef staat op 37 euro Voer bedrag in? Automatisch gegenereerd: 2 De poef staat op 39 euro ************************* Het totaal van de poef is 39 euro. Dit zal 4 afbetalingen vragen. --- # Switch | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#switch) Switch ------------------------------------------------------------------------------------------------------------------------------------------ Een `switch` statement is een program-flow element om een veelvoorkomende constructie van `if`/`if else`...`else` elementen eenvoudiger te tonen. Vaak komt het voor dat we bijvoorbeeld aan de gebruiker vragen om een keuze te maken (bijvoorbeeld een getal van 1 tot 10, waarbij ieder getal een ander menu-item uitvoert van het programma), zoals: Copy int option; Console.WriteLine("Kies 1 voor afbreken, 2 voor opslaan, 3 voor laden:"); option = Convert.ToInt32(Console.ReadLine()); if (option == 1) Console.WriteLine("Afbreken gekozen"); else if (option == 2) Console.WriteLine("Opslaan gekozen"); else if (option == 3) Console.WriteLine("Laden gekozen"); else Console.WriteLine("Onbekende keuze"); Met een `switch` kan dit eenvoudiger. De syntax van een `switch` is een beetje specialer dan de andere programma flow-elementen (`if`, `while`, etc.), namelijk als volgt: Copy switch (value) { case constant: statements break; case constant: statements break; default: statements break; } `value` is de waarde of variabele (beide mogen) die wordt gebruikt als test in de switch. Iedere case begint met het `case` keyword gevolgd door de waarde die value moet hebben om in deze case te _springen_. Na het dubbelpunt volgt vervolgens de code die moet uitgevoerd worden in deze `case`. De `case` zelf mag eender welke code bevatten (methoden, nieuwe program flow elementen, etc.), maar moet zeker afgesloten worden met het `break` keyword. Tijdens de uitvoer zal het programma `value` vergelijken met iedere case constant van boven naar onder. Wanneer een gelijkheid wordt gevonden dan wordt die case uitgevoerd. Indien geen case wordt gevonden die gelijk is aan value dan zal de code binnen de `default`\-case uitgevoerd worden (de `else` achteraan indien alle vorige `if else`\-tests negatief waren). Het menu van zonet kunnen we nu herschrijven naar een `switch`: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#opgelet) Opgelet: De case waarden moeten literals zijn. Dit zijn waarden die je letterlijk uitschrijft, d.w.z. die je niet voorstelt als variabele (`1`, `"1"`, `1.0`, `1.d`, `'1'`, etc.) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#falthrough) Falthrough -------------------------------------------------------------------------------------------------------------------------------------------------- Soms wil je dat dezelfde code uitgevoerd wordt bij 2 of meer cases. Je kan ook zogenaamde fallthrough cases beschrijven wat er als volgt uit ziet: In dit geval zullen zowel de waarden `2` en `3` resulteren in de zin "Laden of opslaan gekozen" op het scherm. [Previousenum](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/enum) [NextOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/a_practica) Last updated 5 years ago Was this helpful? * [Switch](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#switch) * [Opgelet:](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#opgelet) * [Falthrough](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/2_switch#falthrough) Was this helpful? Copy int option; Console.WriteLine("Kies 1 voor afbreken, 2 voor opslaan, 3 voor laden:"); option = Convert.ToInt32(Console.ReadLine()); switch (option) { case 1: Console.WriteLine("Afbreken gekozen"); break; case 2: Console.WriteLine("Opslaan gekozen"); break; case 3: Console.WriteLine("Laden gekozen"); break; default: Console.WriteLine("Onbekende keuze"); break; } Copy switch (option) { case 1: Console.WriteLine("Afbreken gekozen"); break; case 2: case 3: Console.WriteLine("Laden of opslaan gekozen"); break; default: Console.WriteLine("Onbekende keuze"); break; } --- # Loops intro | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Herhalingen (**loops**) creëer je wanneer bepaalde code een aantal keer moet herhaald worden. Hoe vaak de herhaling moet duren is afhankelijk van de conditie die je hebt bepaald. In het vorige hoofdstuk leerden we hoe we met behulp van beslissingen onze code konden _branchen_, aftakken zodat andere code werd uitgevoerd afhankelijk van de staat van bepaalde variabelen of invoer van de gebruiker. Wat we nog niet konden was **terug naar boven** vertakken. Soms willen we dat een heel stuk code 2 of meerdere keren moet uitgevoerd worden tot aan een bepaalde conditie wordt voldaan. "Voer volgende code uit tot dat de gebruiker 666 invoert." **Door herhalende code met loops te schrijven maken we onze code korter en bijgevolg ook minder foutgevoelig en beter onderhoudbaar.** Van zodra je dezelfde lijn(en) code onder elkaar in je code ziet staan (door bijvoorbeeld te copy pasten) is de kans zéér groot dat je dit korter kunt schrijven met loops. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro#soorten-loops) Soorten loops Er zijn verschillende soorten loops: * **Definite of counted loop**: een loop waar het aantal iteraties vooraf van gekend is. (bv. alle getallen van 0 tot en met 100 tonen) * **Indefinite of sentinel loop**: een loop waarvan op voorhand niet kan gezegd worden hoe vaak deze zal uitgevoerd worden. Input van de gebruiker of een interne test zal bepalen wanneer de loop stopt (bv. "Voer getallen in, voer -1 in om te stoppen" of "Bereken de grootste gemene deler") * **Oneindige loop**: een loop die nooit stopt. Soms gewenst (bv. de game loop) of, vaker, een bug. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro#loops-in-c) Loops in C# Er zijn 3 manieren om zogenaamde loops te maken in C#: * `**while**`: zal 0 of meerdere keren uitgevoerd worden * `**do while**`: zal minimaal 1 keer uitgevoerd worden * `**for**`: een alternatieve iets compactere manier om loops te beschrijven Voorts zullen we ook een speciale loop variant zien in het volgende semester wanneer we arrays en objecten leren kennen: * [`**foreach**`](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-2-oop/h11-arrays-en-klassen/3_foreach) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro#never-evah-use-goto) NEVER EVAH USE GOTO ------------------------------------------------------------------------------------------------------------------------------------------------------------------ Het moet hier alvast even uit m'n systeem. `goto` is weliswaar een officieel C# keyword, toch zal je het in deze cursus **nooit** zien terugkomen in code. Je kan alle problemen in je algoritmes oplossen zonder ooit `goto` nodig te hebben. Voel je toch de drang: **don't!** Simpelweg, don't. Het is het niet waard. Geloof me. **NEVER USE GOTO**. [Lees gerust hier waarom](https://stackoverflow.com/questions/3517726/what-is-wrong-with-using-goto) . [PreviousH5: Loops](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops) [NextWhile en Do While](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/1_while_dowhile) Last updated 5 years ago Was this helpful? * [Soorten loops](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro#soorten-loops) * [Loops in C#](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/0_loops_intro#loops-in-c) Was this helpful? --- # Nesting | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#nested-loops) Nested loops ------------------------------------------------------------------------------------------------------------------------------------------------ Wanneer we 1 of meerdere loops in een andere loop plaatsen dan spreken we over **geneste loops**. Geneste loops komen vaak voor, maar zijn wel een ras apart wanneer je deze zaken wilt debuggen en correct schrijven. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcmTNWg6GJ9MZwZm%252Fnesting.png%3Fgeneration%3D1583826017323029%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=75378436&sv=2) Deze afbeelding komt uit het zeer aan te raden handboek "Microsoft Visual C# .NET" van Joyce Farrell. We spreken steeds over de **outer loop** als de omhullende of "grootste" loop. Waarbij de binnenste loops de **inner loop(s)** zijn. Volgende code toont bijvoorbeeld 2 loops die genest werden: De uitvoer hiervan zal als volgt zijn: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcmVe19aer7-wAf6%252Fnestedoutput.png%3Fgeneration%3D1583825997901171%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=f55af530&sv=2) **Begrijp je hoe we aan deze uitvoer komen? (tip: analyseer de inner en outer loop apart)** [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#geneste-loops-tellen) Geneste loops tellen ---------------------------------------------------------------------------------------------------------------------------------------------------------------- Om te tellen hoe vaak de 'inner' code zal uitgevoerd worden dien je te weten hoe vaak iedere loop afzonderlijk wordt uitgevoerd. Vervolgens vermenenigvuldig je al deze getallen met elkaar. Een voorbeeld: Hoe vaak zal het woord `Hallo` op het scherm verschijnen bij volgende code? De outer loop zal 10 maal uitgevoerd worden (i zal de waarden 0 tot en met 9 krijgen). De inner loop zal 5 maal (j zal de waarden 0 tot en met 4 krijgen) uitgevoerd worden. In totaal zal dus **50 maal** `**Hallo**` op het scherm verschijnen (5x10). [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#break-in-nested-loop) Break in nested loop ---------------------------------------------------------------------------------------------------------------------------------------------------------------- Let er op dat `break` je enkel uit de huidge loop zal halen. Indien je dit dus gebruik in de inner loop dan zal de outer loop nog steeds voortgaan. Nog een reden om zéér voorzichtig om te gaan in het gebruik van `break`. [PreviousFor](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for) [NextProgramma flow analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow) Last updated 5 years ago Was this helpful? * [Nested loops](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#nested-loops) * [Geneste loops tellen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#geneste-loops-tellen) * [Break in nested loop](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting#break-in-nested-loop) Was this helpful? Copy int tellerA= 0; int tellerB= 0; while(tellerA < 3 ) //outer loop { tellerA++; tellerB = 0; while(tellerB < 5) { tellerB++; Console.WriteLine($"Teller:{tellerA}, Teller2:{tellerB}") } } Copy for (int i = 0; i < 10; i++) { for (int j = 0; j < 5; j++) { Console.WriteLine("Hallo"); } } --- # Scope van variabelen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#scope-van-variabelen) Scope van variabelen --------------------------------------------------------------------------------------------------------------------------------------------------------------------- De locatie waar je een variabele aanmaakt bepaald de **scope**, oftewel de zichtbaarheid, van de variabele. Eenvoudig gezegd zullen steeds de omliggende accolades de scope van de variabele bevatten. Indien je de variabele dus buiten die accolades nodig hebt dan heb je een probleem: de variabele is enkel bereikbaar binnen de accolades vanaf het punt in de code waarin het werd aangemaakt. Zeker wanneer je begint met `if`, loops, methoden, etc. zal de scope belangrijk zijn: deze code-constructies gebruiken steeds accolades om codeblocks aan te tonen. Een variabele die je dus binnen een if-blok aanmaakt zal enkel binnen dit blok bestaan, niet erbuiten. Copy if( something == true) { int getal = 0 ; //Start scope getal getal = 6; } // einde scope getal Console.WriteLine(getal); // zal niet werken daar de scope van getal al gedaan was Wil je dus getal ook nog buiten de `if` gebruiken zal je je code moeten herschrijven zodat `getal` VOOR de `if` wordt aangemaakt: Copy int getal = 0 ; //Start scope getal if( something == true) { getal = 6; } Console.WriteLine(getal); De scope van variabelen is soms wat verwarrend maar wel een onderdeel dat je deze hele cursus zal zien terugkomen. Hopelijk kan volgende kennisclip je helpen: [Kennisclip "Scope van variabelen](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=20538981-ceaf-4129-a54a-a91100c81b2f) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#variabelen-met-zelfde-naam) Variabelen met zelfde naam --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Zolang je in de scope van een variabele bent kan je geen nieuwe variabele met dezelfde naam aanmaken: Volgende code is dus niet toegestaan: Je krijgt de error: `A local variable named 'getal' cannot be declared in this scope because it would give a different meaning to 'getal', which is already used in a 'parent or current' scope to denote something else` Enkel de tweede variabele een andere naam geven is toegestaan in het voorgaande geval. Dit is wel geldig, daar de scope van de eerste variabele afgesloten wordt door de accolades: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#kennisclip) Kennisclip ------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Scope](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=20538981-ceaf-4129-a54a-a91100c81b2f) [PreviousIf](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if) [Nextenum](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/enum) Last updated 5 years ago Was this helpful? * [Scope van variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#scope-van-variabelen) * [Variabelen met zelfde naam](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#variabelen-met-zelfde-naam) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope#kennisclip) Was this helpful? Copy { int getal = 0; { int getal = 5; //Deze lijn is niet toegestaan } } Copy { int getal = 0 ; //.... } //Verder in code { int getal = 5; } --- # H6: Methoden | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Methoden intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/0_intromethods) [Bibliotheken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/1_bibliotheken) [Geavanceerde methoden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/3_advancedmethod) [Oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/b_practica) [Uitbreidingsoefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica) [PreviousOefeningen deel 3](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/b_practica) [NextMethoden intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/0_intromethods) Last updated 5 years ago Was this helpful? Was this helpful? --- # If | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren In dit deel zullen we bekijken hoe we ons programma dynamischer kunnen maken met behulp van het if-statement. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if) If ------------------------------------------------------------------------------------------------------------------------------ De `if` is een van de elementairste constructies in een programmeertaal. De syntax is als volgt: Copy if (boolean expression) { // code hier moet uitgevoerd worden indien de booleaanse expressie waar is } Enkel indien de booleaanse expressie waar is, en dus `true` als resultaat heeft, zal de code binnen de accolades van het if-blok uitgevoerd worden. Indien de expressie niet waar is (`false`) dan wordt het blok overgeslagen en gaat het programma verder met de code eronder. Een voorbeeld: Copy int number = 3; if ( number < 5 ) Console.WriteLine ("A"); Console.WriteLine("B"); De uitvoer van dit programma zal zijn: Copy A B Indien `number` groter of gelijk aan 5 was dan zou er enkel `B` op het scherm zijn verschenen. De lijn `Console.WriteLine("B")` zal sowieso uitgevoerd worden zoals je ook kan zien aan de volgende flowchart: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NdWmxjF6rx3juJDx%252Fifflow.png%3Fgeneration%3D1583826017464381%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=493a9861&sv=2) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-met-een-block) if met een block ---------------------------------------------------------------------------------------------------------------------------------------------------------- Het is aangeraden om steeds na de if-expressie met accolades te werken. Dit zorgt ervoor dat alle code tussen het block (de accolades) zal uitgevoerd worden indien de booleanse expressie waar was. **Gebruik je geen accolades dan zal enkel de eerste lijn na de** `**if**` **uitgevoerd worden bij** `**true**`**.** Een voorbeeld: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NdWoEmi-mZIotC11%252Fiffflowblock.png%3Fgeneration%3D1583826008055549%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=4c5dd142&sv=2) De booleaanse expressie die je tussen de `if` haakjes plaats moet een stuk code zijn dat altijd een `bool` als resultaat teruggeeft. We verwachten dat je `if` altijd met een block gebruikt, omdat dat leesbaarder is. De versie zonder block zien we als een stijlfout! [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#veelgemaakte-if-fouten) Veelgemaakte if-fouten ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- Er zijn enkele veelgemaakte fouten waar je op moet letten: ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#appelen-en-peren-vergelijken) Appelen en peren vergelijken De types in je booleanse expressie moeten steeds vergelijkbaar zijn. Volgende code is dus fout: `if( "4" > 3)` daar we hier een `string` met een `int` vergelijken. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#accolades-vergeten) Accolades vergeten Accolades vergeten plaatsen om een codeblock aan te duiden, maar je code toch zodanig outlinen (met tabs) dat het lijkt of je een heel codeblock hebt. Het gevolg zal zijn dat enkel de eerste lijn na de `if` zal uitgevoerd worden indien `true`. Gebruiken we de `if` met block van daarnet maar zonder accolades dan zal de laatste lijn altijd uitgevoerd worden ongeacht de `if`: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NdWqTPIPeFF8-Ac1%252Fifflownobrace.png%3Fgeneration%3D1583825999675410%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=48963110&sv=2) Merk ook op dat je code anders uitlijnen géén invloed heeft op de uitvoer (wat bijvoorbeeld wel zo is bij de programmeertaal Python). ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#een-puntkomma-plaatsen-na-de-booleanse-expressie) Een puntkomma plaatsen na de booleanse expressie. Dit zal ervoor zorgen dat er eigenlijk geen codeblock bij de `if` hoort en je dus een nietszeggende `if` hebt geschreven. De code na het puntkomma zal uitgevoerd worden ongeacht de `if`: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NdWsibrxG4asaJ7a%252Fifflowsemicolon.png%3Fgeneration%3D1583826017424392%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=4415931d&sv=2) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#gebruik-relationele-operatoren) Gebruik relationele operatoren -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Met de relationele operatoren (`==`, `!=`, `<`, `>`, `<=` en `>=`) kunnen we complexere expressies schrijven die als uitkomst waar (`true`) of niet waar (`false`) geven. Een voorbeeld: Uitvoer van bovenstaande code zal zijn: We kunnen ook meerdere expressies combineren zodat we complexere uitdrukkingen kunnen maken. Hierbij kan je gebruik maken van de logische operatoren (`&&`, `||`, `!`) . Een voorbeeld: Uitvoer van dit programma zal zijn: [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-else) If/else ---------------------------------------------------------------------------------------------------------------------------------------- Met `if`/`else` kunnen we niet enkel zeggen welke code moet uitgevoerd worden als de conditie waar is maar ook welke specifieke code indien de conditie niet waar (`false`) is. Volgend voorbeeld geeft een typisch gebruik van een `if`/`else` structuur om 2 waarden met elkaar te vergelijken: > Kan je zelf een flowchart van bovenstaande code tekenen? Try it! [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-else-if) If/else if ---------------------------------------------------------------------------------------------------------------------------------------------- Met een `if`/`else if` constructie kunnen we meerdere criteria opgeven die waar/niet waar moeten zijn voor een bepaald stukje code kan uitgevoerd worden. Sowieso begint men steeds met een `if`. Als men vervolgens een `else if` plaats dan zal de code van deze `else if` uitgevoerd worden enkel en alleen als de eerste expressie (van de `if`) niet waar was en de expressie van deze `else if` wel waar is. Een voorbeeld: Merk op dat `else if` niet meer is dan een verkorte schrijfwijze voor nesting van een `if` in een `else`\-block. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#nesting) Nesting ---------------------------------------------------------------------------------------------------------------------------------------- We kunnen met behulp van nesting ook complexere programma flows maken. Hierbij gebruiken we de accolades om het blok code aan te duiden dat bij een `if`/`else if`/`else` hoort. Binnen dit blok kunnen nu echter opnieuw `if`/`else if`/`else` structuren worden aangemaakt. Volgende voorbeeld toont dit aan (bekijk wat er gebeurt als je emergencyValve aan `closed` gelijkstelt): [PreviousBooleanse logica en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator) [NextScope van variabelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/3_scope) Last updated 5 years ago Was this helpful? * [If](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if) * [if met een block](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-met-een-block) * [Veelgemaakte if-fouten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#veelgemaakte-if-fouten) * [Appelen en peren vergelijken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#appelen-en-peren-vergelijken) * [Accolades vergeten](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#accolades-vergeten) * [Een puntkomma plaatsen na de booleanse expressie.](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#een-puntkomma-plaatsen-na-de-booleanse-expressie) * [Gebruik relationele operatoren](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#gebruik-relationele-operatoren) * [If/else](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-else) * [If/else if](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#if-else-if) * [Nesting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if#nesting) Was this helpful? Copy if ( number < 5 ) { Console.WriteLine ("C"); Console.WriteLine ("D"); } Copy if ( number < 5 ) Console.WriteLine ("C"); Console.WriteLine ("D"); Copy if ( number < 5 ); Console.WriteLine ("C"); Console.WriteLine ("D"); Copy int a, b, c; a = 2; b = 3; if(a < b) { Console.WriteLine("a is less than b"); } if(a == b) { Console.WriteLine("you won't see this"); } Console.WriteLine(); c = a - b; // c contains -1 Console.WriteLine("c contains -1"); if(c >= 0) { Console.WriteLine("c is non-negative"); } if(c < 0) { Console.WriteLine("c is negative"); } Console.WriteLine(); c = b - a; // c now contains 1 Console.WriteLine("c contains 1"); if(c >= 0) { Console.WriteLine("c is non-negative"); } if(c < 0) { Console.WriteLine("c is negative"); } Copy a is less than b c contains -1 c is negative c contains 1 c is non-negative Copy int a = 5, b = 5, c = 10; if (a == b) { Console.WriteLine(a); } if ((a > c) || (a == b)) { Console.WriteLine(b); } if ((a >= c) && (b <= c)) { Console.WriteLine(c); } Copy 5 5 Copy int x = 10; if ( x > 9 ) { Console.WriteLine ("x is greater than 9!"); } else { Console.WriteLine ("x is less than 9!"); } Copy int x = 9; if (x == 10) { Console.WriteLine ("x is 10"); } else if (x == 9) { Console.WriteLine ("x is 9"); } else if (x == 8) { Console.WriteLine ("x is 8"); } Copy int reactorTemp = 1500; string emergencyValve = " "; if (reactorTemp < 1000) { Console.WriteLine("Reactor temperature normal"); } else { Console.WriteLine("Reactor temperature too high!"); if (emergencyValve == "closed") { Console.WriteLine("Reactor meltdown in progress!"); } } --- # Bibliotheken | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Je herkent een methode aan de ronde haakjes na de methodenaam. Je hebt dus reeds een aantal methoden gebruikt zonder dat je het wist, denk maar aan `WriteLine(), ReadLine() en Parse()`. Dit zijn dus alle 3 methoden: stukken code die een specifieke taak uitvoeren. Sommige methoden, zoals `WriteLine()`, vereisen dat je een aantal parameters meegeeft. De parameters dien je tussen de ronde haakjes te zetten. Hierbij is het uiterst belangrijk dat je de volgorde respecteert die de ontwikkelaar van de methode heeft gebruikt. Indien je niet weet wat deze volgorde is kan je altijd Intellisense gebruiken. Typ gewoon de methode in je code en stop met typen na het eerste ronde haakje, vervolgens verschijnen alle mogelijke manieren waarop je deze methoden kan oproepen. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfy0wGonN-yf2hJU%252Fmethoden1.png%3Fgeneration%3D1583826004549781%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=374dabba&sv=2) Tussen de haakjes zien we welke parameters en hun type je mag meegeven aan de methode, gevolgd door het return-type van de methode en een eventuele beschrijving (merk dus op dat je de WriteLine-methode ook mag aanroepen zonder parameters, dit zal resulteren in een lege lijn in de console). Met behulp van de F1-toets kunnen meer info over de methode in kwestie tonen. Hiervoor dien je je cursor op de Methode in je code te plaatsen, en vervolgens op F1 te drukken. Voor `WriteLine` geeft dit: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfy20y8YTSgvVa9L%252Fmethoden2.png%3Fgeneration%3D1583826004583629%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=a8df6144&sv=2) In de overload list zien we de verschillende manieren waarop je de methode in kwestie kan aanroepen. Je kan op iedere methode klikken voor meer informatie en een codevoorbeeld. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/1_bibliotheken#intellisense) Intellisense -------------------------------------------------------------------------------------------------------------------------------------------------------- "Hoe kan je deze methode nu gebruiken?" is een veelgestelde vraag. Zeker wanneer je de basis van C# onder knie hebt en je stilletjes aan met bestaande .NET bibliotheken wil gaan werken. Wat volgt is een essentieel onderdeel van VS dat veel gevloek en tandengeknars zal voorkomen. De help-files van VS zijn zeer uitgebreid en dankzij IntelliSense krijg je ook aardig wat informatie tijdens het typen van de code zelf. Type daarom onder vorige WriteLine-zin het volgende: Wacht nu even en er zal na het punt (`.`) een lijst komen van methoden en fields die beschikbaar zijn. Je kan hier met de muis doorheen scrollen en zo zien welke methoden allemaal bij de Console klasse horen. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfy4N8W0f9a97LgE%252Fmethoden4.png%3Fgeneration%3D1583826004465047%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=9a991ba6&sv=2) Scroll maar eens naar de WriteLine-methode en klik er op. Je krijgt dan extra informatie over die methode te zien: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfy6GJ3BOWQhx1Tz%252Fmethoden5.png%3Fgeneration%3D1583826004590382%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=a02695f9&sv=2) Doe hetzelfde voor de ReadLine methode: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Nfy8sVzMnJNwJA8J%252Fmethoden6.png%3Fgeneration%3D1583826018426966%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=3937b19f&sv=2) Je ziet bovenaan `string Console.ReadLine()` staan. Bij de WriteLine stond er `void Console.WriteLine()`. Die void wil zeggen dat de methode WriteLine niets terugstuurt. In tegenstelling tot ReadLine dat een string teruggeeft. Indien de methode één of meerdere parameters vereist dan zullen deze hier ook getoond worden: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NfyATR4UKC1sO3mO%252Fmethoden7.png%3Fgeneration%3D1583826004668229%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=5ed26ec3&sv=2) De `Math.Pow` methode vereist dus bijvoorbeeld 2 parameters van het type double. Wanneer je nu begint te typen dan zal intellisense tonen waarvoor iedere parameter staat wanneer je aan die parameter gaat beginnen typen: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NfyCsu2xdQCiH-k5%252Fmethoden8.png%3Fgeneration%3D1583826004589585%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=f35ebeca&sv=2) [PreviousMethoden intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/0_intromethods) [NextGeavanceerde methoden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/3_advancedmethod) Last updated 5 years ago Was this helpful? Was this helpful? Copy System.Console. --- # H7: Arrays | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [Array principes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/1_arraysbasics) [Werken met arrays](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/2_werken_met_arrays) [Arrays en methoden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/3_arrays_en_methoden) [N-dimensionale arrays](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/4_ndimensionalarrays) [Oefeningen deel 1](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/a_practica) [Oefeningen deel 2](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/b_practica) [PreviousUitbreidingsoefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica) [NextArray principes](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays/1_arraysbasics) Last updated 5 years ago Was this helpful? Was this helpful? --- # Booleanse logica en operators | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#relationele-operators) Relationele operators --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Om beslissingen te kunnen nemen in C# hebben we een nieuw soort operators nodig. Operators waarmee we kunnen testen of iets waar of niet waar is. Dit doen we met de zogenaamde **relationele operators**. En guess what, je kent die al van uit het lager! Enkel de "gelijk aan" ziet er iets anders uit dan we gewoon zijn: C#-syntax Betekenis `>` groter dan `<` kleiner dan `==` gelijk aan `!=` niet gelijk aan `<=` kleiner dan of gelijk aan `>=` groter dan of gelijk aan [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#logische-operator) Logische operator ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- De logische EN, OF en NIET-operatoren die je kent van de booleaanse algebra kan je ook gebruiken in C#: C#-syntax Betekenis `&&` en-operator `||` of-operator `!` niet-operator Je kan de niet-operator voor een expressie zetten om het resultaat hiervan om te draaien. Bijvoorbeeld: Copy !(0==2) //zal true geven ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#booleaanse-expressies) Booleaanse expressies Een booleaanse expressie is een stuk C# code dat een `bool` als resultaat zal geven. De logische operators van hierboven zijn operators die een `bool` teruggeven. Ze zijn zogenaamde test-operators: ze testen of iets waar is of niet. "Is b kleiner dan c?" schrijf je dan als de booleaanse expressie: `b2` * `4!=4` * `4<5 && 4<3` * `"a"=="a" || 4>=3` * `(3==3 && 2<1) || 5!=4` * `!(4<=3)` * `true || false` * `!true && false` Voorgaande oefeningen komen uit een vorige kennistoets examen. Het is voornaam dat je dit soort expressies vlot kunt oplossen! [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#kennisclip) Kennisclip ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [Logische operators en expressies](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=4602c8f9-1540-427e-8fd8-a91100bc3abb) [PreviousBeslissingen intro](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_beslissingen_intro) [NextIf](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/0_if) Last updated 5 years ago Was this helpful? * [Relationele operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#relationele-operators) * [Logische operator](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#logische-operator) * [Booleaanse expressies](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#booleaanse-expressies) * [Test jezelf](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#test-jezelf) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h4-beslissingen/1_logic_and_relationsoperator#kennisclip) Was this helpful? --- # For | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for) For -------------------------------------------------------------------------------------------------------------------------- Een veelvoorkomende manier van while-loops gebruiken is waarbij je een bepaalde teller bijhoudt die je telkens met een bepaalde waarde verhoogt. Wanneer de teller een bepaalde waarde bereikt moet de loop afgesloten worden. Bijvoorbeeld volgende code om alle even getallen van 0 tot 10 te tonen: Copy int k = 0; while(k<11) { Console.WriteLine(k); k = k + 2; } **Met een for-loop kunnen we deze veel voorkomende code-constructie verkort schrijven.** ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for-syntax) For syntax De syntax van een `for`\-loop is de volgende: Copy for (setup; finish test; update) { // C# die zal uitgevoerd worden zolang de finish test true geeft } * **setup**: In het setup gedeelte zetten we de "wachter-variabele" op de begin waarde. De wachter-variabele is de variabele die we tijdens de loop in het oog zullen houden en die zal bepalen hoe vaak de loop moet uitgevoerd worden. * **finish test**: Hier plaatsen we een booleaanse expressie die de wachter-variabele uit de setup gebruikt om te testen of de loop-code moet uitgevoerd worden. * **update**: Hier plaatsen we wat er moet gebeuren telkens de loop z'n codeblock heeft uitgevoerd. Meestal zullen we hier de wachter-variabele verhogen of verlagen. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NeK7xuRx8Nx1Kznq%252Ffor.png%3Fgeneration%3D1583825999869893%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=d7503799&sv=2) Gebruiken we deze kennis nu, dan kunnen we de eerder vermelde code om de even getallen van 0 tot en met 10 tonen als volgt: Voor de setup-variabele kiest men meestal i, maar dat is niet noodzakelijk. In de setup wordt dus een variabele op een start-waarde gezet. De finish test zal aan de start van iedere loop kijken of de finish test nog waar is, indien dat het geval is dan wordt een nieuwe loop gestart en wordt i met een bepaalde waarde, zoals in update aangegeven, verhoogd. Lees zeker [deze for tutorial na](https://www.techotopia.com/index.php/C_Sharp_Looping_-_The_for_Statement) want er zijn nog enkele subtiliteiten in for-loops die we hier niet behandelen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for-tab-tab) for-tab-tab Als je in Visual Studio `for` typt en dan tweemaal op \[tab\] duwt krijg je kant en klare for-loop code. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#break) Break Je kan loops (alle types) altijd vroegtijdig stopzetten door het `break` keyword. Het gebruik hiervan ligt soms in de schemerzone van misbruik. Probeer dus eerst je probleem anders op te lossen voor je `break` begint te gebruiken. Om iemand op StackOverflow te quoten: > When used at the start of a block, as first checks made, they act like preconditions, so it's good. When used in the middle of the block, with some code around, they act like hidden traps, so it's bad." [Bron StackOverFlow: Are `break` and `continue` bad programming practices?](https://softwareengineering.stackexchange.com/questions/58237/are-break-and-continue-bad-programming-practices) Lees meer over het gebruik van `break` [hier](https://www.dotnetperls.com/break) . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#kennisclip) Kennisclip ---------------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NcsOca7VCr6yIATy%252Finfoclip.png%3Fgeneration%3D1583825999158574%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=94c206c7&sv=2) * [De for loop](https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=2df9d5bb-ecc8-489b-a1d4-a99800b79a5c) [PreviousWhile en Do While](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/1_while_dowhile) [NextNesting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting) Last updated 5 years ago Was this helpful? * [For](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for) * [For syntax](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for-syntax) * [for-tab-tab](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#for-tab-tab) * [Break](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#break) * [Kennisclip](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/2_for#kennisclip) Was this helpful? Copy for (int i = 0; i < 11; i += 2) { Console.WriteLine(i); } --- # Uitbreidingsoefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#film-default) Film Default ---------------------------------------------------------------------------------------------------------------------------------------------------- Maak een methode FilmRuntime() die 3 parameters accepteert: 1. Een string die de naam van de film bevat 2. Een integer die duur in minuten van de film bevat 3. Een enum-type die het genre van de film bevat (Drama, Actie, etc.) Indien de duur van de film niet wordt meegeven wordt een standaard lengte van 90 minuten ingesteld. Indien het genre niet wordt meegeven dan wordt deze default op Onbekend ingesteld. De methode geeft niets terug maar toont eenvoudigweg de film op het scherm, gevolgd door z’n duur en genre in volgende formaat. Copy The Matrix (120minuten, Actie) Toon aan in je main dat de methode werkt met zowel 1, 2 als 3 parameters. Toon ook aan dat je met ‘named arguments’ de methode kan aanroepen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#opwarmers-met-geavanceerde-methoden) Opwarmers met geavanceerde methoden -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat de opwarmers uit Deel 0 oefeningen hiervoor steeds minstens 1 optionele parameter hebben. Roep deze methoden aan via named parameters. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#oude-oefeningen-leesbaarder-maken) Oude oefeningen leesbaarder maken ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Kan je code uit vorige hoofdstukken herbruiken door deze in handige methoden te plaatsen zodat je code leesbaarder én bruikbaarder wordt? [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#einde-deel-1-test-herschrijven) Einde deel 1 test herschrijven ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bekijk terug jouw (of mijn) oplossing van de vaardigheidsproef of de [deel 1 eindetest](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/EindeTests/Mod1/Opgave.md) in deze cursus. Kan je deze code leesbaarder maken door methoden (en loops) toe te voegen? [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#verhaalgenerator) Verhaalgenerator ------------------------------------------------------------------------------------------------------------------------------------------------------------ Bekijk het all-one-project ["De verhaal generator"](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/A_DEEL1_AllInOne/3_verhaalgenerator.md) : kan jij dit project afwerken zoals onderaan de opgave wordt voorgesteld? [PreviousOefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/b_practica) [NextH7: Arrays](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h7-arrays) Last updated 5 years ago Was this helpful? * [Film Default](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#film-default) * [Opwarmers met geavanceerde methoden](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#opwarmers-met-geavanceerde-methoden) * [Oude oefeningen leesbaarder maken](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#oude-oefeningen-leesbaarder-maken) * [Einde deel 1 test herschrijven](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#einde-deel-1-test-herschrijven) * [Verhaalgenerator](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h6-methoden/c_practica#verhaalgenerator) Was this helpful? --- # Oefeningen deel 1 | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren > Vanaf nu zul je véél meer oefeningen voorgeschoteld krijgen dan je kan afwerken in 1 labo tijd (I dare you ;). Selecteer zelf de oefeningen die je wenst te doen en sla die over waarvan je overtuigd bent ze al te kunnen. De oefening zijn , in de mate van het mogelijke, gerangschikt op moeilijkheid. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#de-opwarmers) De opwarmers ------------------------------------------------------------------------------------------------------------------------------------------------- Bekijk maak de oefeningen 8 tot en met 13 van hoofdstuk 4 in volgende [pdf](https://github.com/v-nys/cursusprogrammeren/tree/13ea122a2e92d805feb8b618811589d4f57a8b23/assets/docs/oefenvragen2010.pdf) > Ter info: Dit document staat ook in de lijst onderaan bij de nuttige extra's [hier](https://github.com/v-nys/cursusprogrammeren/tree/3ce26c1653767f20f0438bf023c6a5ac44fc41f8/inleiding/nuttigeextras.md) > . [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#de-oefeningen) De oefeningen --------------------------------------------------------------------------------------------------------------------------------------------------- > Indien niet expliciet vermeld mag je kiezen met wat voor loop (for, while, do while) je het probleem zal oplossen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#tafels-van-vermenigvuldigen) Tafels van vermenigvuldigen Gebruik de kracht van loops om pijlsnel alle tafels van 1 tot en met 10 van vermenigvuldigen op het scherm te tonen (dus van 1x1 tot 10x10 en alles daartussen) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#rna-transscriptie) RNA Transscriptie DNA heeft steeds een RNA-complement (DNA is het gevolg van RNA transscriptie). Schrijf een programma dat een ingevoerde DNA-string omzet naar een RNA-string. De gebruiker voert steeds 1 DNA-nucleotide in per keer en duwt op enter, de RNA string wordt steeds groter. De omzetting is als volgt: * G wordt C * C wordt G * T wordt A * A wordt U Als de gebruiker dus `ACGTGGTCTTAA` heeft ingevoerd moet het resultaat: `UGCACCAGAAUU` zijn. Ga er van uit dat de gebruiker letter per letter invoert (telkens dus enter na een letter) en je de omgezette string doet groeien (m.b.v `+=`). ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-armstrong-nummer) PRO Armstrong nummer Een getal is een _narcistisch getal_ of _armstronggetal_ als het de som is van zijn eigen cijfers elk tot de macht verheven van het aantal cijfers. * 9 is een Armstrong nummer, want 9 = 9^1 = 9 * 10 is geen Armstrong nummer, want 10 != 1^2 + 0^2 = 1 * 153 is een Armstrong nummer, want: 153 = 1^3 + 5^3 + 3^3 = 1 + 125 + 27 = 153 * 154 is geen Armstrong nummer, want: 154 != 1^3 + 5^3 + 4^3 = 1 + 125 + 64 = 190 Schrijf een programma dat aan de gebruiker een getal vraagt en vervolgens toont of het ingevoerde getal een Armstrong-nummer is of niet. > Je zou deze oefening kunnen oplossen door het ingevoerde getal als string op te splitsen in individuele char's. Maar ik raad je aan om de "wiskunde" weg te volgen zodat je terdege leert met loops te wiskunde.\* Tip 1: Stel dat je het getal 4560 hebt: * Eerst deel je 4563 door 1000. Dit geeft **4**. * We trekken 4x1000 van 4563 af. Dit geeft 563. * Deel 563 door 100. Dit geeft **5**. * We trekken 5x100 van 563 af. Dit geeft 63. * Deel 63 door 10. Dit geeft **6**. * We trekken 6 x 10 van 63 af. Dit geeft **3** Tip 2: Je kan aan een string vragen hoe groot deze is als volgt: Je kan dan nu met `Math.Pow(10,lengte-1)` berekenen vanaf welke exponent van 10 we moeten beginnen werken. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#euler-project) Euler project Maak volgende opdracht van [projecteuler.net](http://projecteuler.net/) : > Indien we alle natuurlijke getallen van 0 tot en met 10 oplijsten die een meervoud van 3 of 5 zijn, dan krijgen we de getallen 3,5,6,9 en 10. De som van deze 4 getallen is 33. Maak nu een programma dat de som van alle veelvouden van 3 of 5 weergeeft onder van 0 tot 1000 (dit zou 234168) moeten geven. **Tip: module is je grote held hier. Een getal is een veelvoud van x indien** `**getal%x**` **0 als resultaat geeft.** ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-for-doordenker) PRO: For doordenker Schrijf een programma dat de volgende output geeft , gegeven dat de gebruiker een maximum waarde invoert , dus als hij 4 ingeeft dan zal de driehoek maximum 4 breed worden. Gebruik enkel forloops! ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-for-doordenker-extra) PRO: For doordenker extra Schrijf een programma dat de volgende output geeft (zie ook WhileDoordenker van vorige labo), gegeven dat de gebruiker een maximum waarde invoert die opgeeft uit hoeveel lijnen de boom bestaat. Maak enkel gebruik van for-loops. [PreviousProgramma flow analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow) [NextOefeningen deel 2](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica) Last updated 5 years ago Was this helpful? * [De opwarmers](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#de-opwarmers) * [De oefeningen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#de-oefeningen) * [Tafels van vermenigvuldigen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#tafels-van-vermenigvuldigen) * [RNA Transscriptie](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#rna-transscriptie) * [PRO Armstrong nummer](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-armstrong-nummer) * [Euler project](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#euler-project) * [PRO: For doordenker](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-for-doordenker) * [PRO: For doordenker extra](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica#pro-for-doordenker-extra) Was this helpful? Copy int lengte= myInputGetal.Length; //veronderstellend dat myInputGetal van het type string is Copy * ** *** **** *** ** * Copy * *** ***** ******* ********* *********** --- # Oefeningen | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-variabelen_hoofdletters) Oefening: H1-variabelen\_hoofdletters ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen) Leerdoelen * gebruik van variabelen om input en output via `Console.ReadLine` en `Console.WriteLine` op te slaan en terug te tonen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse) Functionele analyse Een applicatie vraagt je tekst in te voeren die dan daarna zal worden getoond met allemaal hoofdletters. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s) voorbeeldinteractie(s) ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-LokxaMzRdpUESUOH_PP%252Fimage.png%3Fgeneration%3D1583825996615769%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=daea223b&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop) Programmaverloop Lees de gebruikersinvoer van de console en slaag dit op in een variabele. Zet de inhoud van deze variabele om in hoofdletters. Je kan dit doen door `ToUpper()` toe te voegen aan een variabele van het type `string`. Bijvoorbeeld `myText.ToUpper()` in plaats van `myText`. Uiteindelijk geef je dan deze variabele weer in de console. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios) Testscenario's * Voer tekst in met spaties * Voer tekst in van meer dan 100 karakters * Voer tekst in van 1 karakter * Voer geen tekst in ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-optellen) Oefening: H1-optellen ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-1) Leerdoelen * gebruik van variabelen om input via `Console.ReadLine` op te slaan * berekeningen met de opgeslagen data uitvoeren * het resultaat dat werd opgeslagen in een variabele via `onsole.WriteLine` te tonen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-1) Functionele analyse Een applicatie vraagt je twee getallen in te voeren. Na de invoer van het tweede getal worden beide getallen bij elkaar opgeteld. Het resultaat wordt uiteindelijk weergeven. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-1) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-1) UI console applicatie **Werking** 1. De vraag wordt gesteld om een getal in te typen en daarna op enter/return te drukken. 2. Er wordt gevraagd een tweede getal in te typen en dan op enter/return te drukken. 3. De twee getallen worden opgeteld. 4. Het resultaat wordt weergegeven. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-1) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-1) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-1) Programmaverloop Lees de gebruikersinvoer van de console en slaag dit op in een variabele voor wat het eerste getal betreft. Herhaal dit voor het tweede getal. Tel de twee getallen samen en bewaar deze in een derde variabele. Uiteindelijk geef je dan de inhoud van deze derde variabele weer in de console. Tip: getal1 = Convert.ToInt32(invoer1); #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-1) Testscenario's * Voer tekst in. * Voer een getal met 100 cijfers in. * Voer geen getal in. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-1) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-verbruik-wagen) Oefening: H1-verbruik-wagen ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-2) Leerdoelen * gebruik van variabelen om input via `Console.ReadLine` op te slaan * berekeningen met de opgeslagen data uitvoeren * het resultaat dat werd opgeslagen in een variabele via `onsole.WriteLine` te tonen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-2) Functionele analyse Een applicatie zal voor jou het gemiddelde verbruik van een wagen berekenen. Hiervoor worden volgende vragen gesteld: 1. Hoeveel liter is er nog aanwezig in de benzinetank. 2. Hoeveel liter zit er nog in de benzinetank na de rit. 3. Ook de kilometerstand van bij de aanvang van de rit wordt gevraagd en ook deze nadat de rit werd uitgevoerd. Op basis van deze parameters wordt het gemiddelde verbruik berekend en weergegeven. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-2) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-2) UI console applicatie **Werking** 1. De vraag wordt gesteld om het aantal liter, aanwezig in de benzinetank, op te geven. 2. Daarna wordt gevraagd om ook het aantal liter op te geven na de rit. 3. De kilometerstand van de aanvang van de rit wordt gevraagd. 4. Uiteindelijk ook de kilometerstand na het beëindigen van de rit wordt opgevraagd. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-2) voorbeeldinteractie(s) De screenshot vermeldt het afgeronde verbruik, maar dat hoef je niet te tonen. De instructie om af te ronden heb je nog niet gezien. ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-Lol1cYTyYRXs4Wf8h7C%252F-Lol2OEFdamlVCi2ce7K%252Fimage.png%3Falt%3Dmedia%26token%3D345e97f1-a7f5-4e58-adcf-9fceebff3667&width=768&dpr=4&quality=100&sign=4ad8ab97&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-2) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-2) Programmaverloop Lees de gebruikersinvoer van de console en slaag dit op in variabelen. Zorg ervoor dat je het juiste gegevenstype kiest voor de verschillende variabelen. Nadien voer je de berekening uit om op basis van de ingevoerde gegevens het gemiddeld verbruik te berekenen (100 \* (aantalLiterinTank1 - aantalLiterinTank2) / (kilometerstand2 - kilometerstand1)) Uiteindelijk geef je dan het resultaat weer in de console. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-2) Testscenario's * Voer tekst in. * Voer een getal met 100 cijfers in. * Voer geen getal in. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-2) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-beetje-wiskunde) Oefening: H1-beetje-wiskunde -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-3) Leerdoelen * expressies schrijven * voorrang van operatoren * effect van operaties naargelang datatype begrijpen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-3) Functionele analyse Je schrijft een programma dat de rol vervult van een rekenmachine. Het voert volgende berekeningen uit: * \-1 + 4 \* 6 * ( 35+ 5 ) % 7 * 14 + -4 \* 6 / 11 * 2 + 15 / 6 \* 1 - 7 % 2 ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-3) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-3) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-3) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-3) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-3) Programmaverloop Eerst wordt een resultaat berekend, daarna wordt het geprint. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-3) Testscenario's * Test uit met getallen van het type `int`. * Test uit met getallen van het type `float`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-3) Ondersteunend materiaal [Hier](https://www.programiz.com/csharp-programming/operator-precedence-associativity) vind je een tabel terug die uitlegt welke operaties voorrang hebben. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-gemiddelde) Oefening: H1-gemiddelde ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-4) Leerdoelen * expressies schrijven * voorrang van operatoren * effect van operaties naargelang datatype begrijpen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-4) Functionele analyse Je schrijft een programma dat het gemiddelde van 18, 11 en 8 berekent, d.w.z. deze drie getallen optelt en de som deelt door drie. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-4) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-4) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-4) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-4) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-4) Programmaverloop Eerst wordt het resultaat berekend, daarna wordt het geprint. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-4) Testscenario's * Test uit met getallen van het type `int`. * Test uit met getallen van het type `float`. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-4) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-maaltafels) Oefening: H1-maaltafels ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-5) Leerdoelen * de console leegmaken * werken met wiskundige operatoren * interactie met de gebruiker ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-5) Functionele analyse Je schrijft een programma dat de tafel van vermenigvuldiging voor 411 geeft. Dit programma wacht steeds tot de gebruiker op ENTER duwt voor het het volgend resultaat toont. Verder maakt het steeds het scherm leeg voor het een nieuw resultaat toont. Zie "programmaverloop". ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-5) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-5) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-5) voorbeeldinteractie(s) (enzovoort) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-5) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-5) Programmaverloop Voor elk resultaat wordt het scherm eerst leeggemaakt. Daarna pas wordt het resultaat getoond. Wanneer de gebruiker op ENTER duwt, wordt deze handeling herhaald voor het volgende resultaat (of eindigt het programma, na het tiende resultaat). Het scherm leegmaken doe je met `Console.Clear()`. Plaats 411 ook in een variabele. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-5) Testscenario's * Test uit zoals gegeven. * Test uit voor 511. Je zou maar één teken in je code moeten aanpassen als je de instructies hebt gevolgd. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-5) Ondersteunend materiaal Hou het voorlopig op de cursus. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-ruimte) Oefening: H1-ruimte -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-6) Leerdoelen * werken met kommagetallen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-6) Functionele analyse Je massa is overal dezelfde en wordt uitgedrukt in kilogram. Je gewicht daarentegen is afhankelijk van de zwaartekracht van de plek waar je bent en wordt uitgedrukt in Newton. Je hebt dus een ander gewicht op andere planeten. Zo is je gewicht veel groter op Jupiter dan op Mars, omdat Jupiter meer zwaartekracht uitoefent dan Mars. Schrijf een programma dat je gewicht op aarde omzet naar je gewicht op een ander hemellichaam. Je krijgt volgende omzettingstabel: * Mercurius: 0.38 (een persoon van 100kg voelt zich alsof hij 38kg weegt) * Venus: 0.91 * Aarde: 1.00 (een persoon van 100kg voelt zich alsof hij 100kg weegt) * Mars: 0.38 * Jupiter: 2.34 * Saturnus: 1.06 * Uranus: 0.92 * Neptunus: 1.19 * Pluto: 0.06 ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-6) Technische analyse #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ui-6) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#voorbeeldinteractie-s-6) voorbeeldinteractie(s) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-6) Technische hulp #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#programmaverloop-6) Programmaverloop Plaats je gewicht in een variabele. Kies zelf een geschikt type. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#testscenarios-6) Testscenario's * Test uit voor je eigen gewicht. * Test uit voor het gewicht van een persoon met een massa van 100kg. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-6) Ondersteunend materiaal Hou het voorlopig op de cursus. [PreviousExpressies en operators](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/2_expressies) [NextH2: Tekst in code](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h2-tekst-in-code) Last updated 5 years ago Was this helpful? * [Oefening: H1-variabelen\_hoofdletters](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-variabelen_hoofdletters) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal) * [Oefening: H1-optellen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-optellen) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-1) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-1) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-1) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-1) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-1) * [Oefening: H1-verbruik-wagen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-verbruik-wagen) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-2) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-2) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-2) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-2) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-2) * [Oefening: H1-beetje-wiskunde](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-beetje-wiskunde) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-3) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-3) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-3) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-3) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-3) * [Oefening: H1-gemiddelde](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-gemiddelde) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-4) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-4) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-4) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-4) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-4) * [Oefening: H1-maaltafels](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-maaltafels) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-5) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-5) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-5) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-5) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-5) * [Oefening: H1-ruimte](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#oefening-h1-ruimte) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#leerdoelen-6) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#functionele-analyse-6) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-analyse-6) * [Technische hulp](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#technische-hulp-6) * [Ondersteunend materiaal](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h1-variabelen-en-datatypes/a_practica#ondersteunend-materiaal-6) Was this helpful? Copy Wat is het eerste getal? > 1 Wat is het tweede getal? > 4 De som is 5. Copy 23 5 12 3 Copy 12 Copy 1 * 411 is 411. Copy 2 * 411 is 822. Copy 10 * 411 is 4110. Copy Op Mercurius heb je een schijnbaar gewicht van 26.22kg. Op Venus heb je een schijnbaar gewicht van 62.79kg. Op Aarde heb je een schijnbaar gewicht van 69kg. Op Mars heb je een schijnbaar gewicht van 26.22kg. Op Jupiter heb je een schijnbaar gewicht van 161.46kg. Op Saturnus heb je een schijnbaar gewicht van 73.14kg. Op Uranus heb je een schijnbaar gewicht van 63.48kg. Op Neptunus heb je een schijnbaar gewicht van 82.11kg. Op Pluto heb je een schijnbaar gewicht van 4.14kg. --- # Programma flow analyse | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#programma-flow-analyse) Programma flow analyse ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Door een flowchart op te stellen is het vaak veel eenvoudiger om een programma ofwel te analyseren (van code naar idee) ofwel om een programma te schrijven (van idee naar code). Een flowchart (letterlijk: _stroomkaart_) of stroomdiagram is een schematische beschrijving van een proces. Met een flowchart kan je vaak ingewikkelde stukken code visualiseren waardoor het geheel plots niet meer zo ingewikkeld is. Een flowchart bestaat uit een aantal elementen: * **Pijl**: een pijl geeft aan naar welk volgende blok wordt gegaan. Indien boven de pijl een bepaalde waarde staat wil dit zeggen dat deze pijl enkel wordt gevolgd als de uitkomst van het vorige blok de getoonde waarde geeft. * **Start en einde**: aangegeven met een cirkel met daarin de woorden "Start" of "Einde" * **Verwerk-stap**: een statement zoals "Voeg 1 toe aan X" wordt in een rechthoek geplaatst. Alle code die geen invoer nodig heeft zet je in een rechthoek. * **Input/output**: Een parallellogram gebruik je om in-of uitvoer van de gebruiker of scherm te tonen. Bv "Verkrijg X van gebruiker" of "Toon volgende zin op het scherm". * **Condities en beslissingen**: Een ruit wordt gebruikt wanneer een beslissing moet genomen worden. De condities van if en while-loops zet je dus in een ruit. De pijlen die eruit volgen geven aan welke pijl moet gevolgd worden gegeven een bepaalde waarde van de conditie. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#flow-elementen) Flow-elementen -------------------------------------------------------------------------------------------------------------------------------------------------------- We tonen nu kort de verschillende program flow elementen en hoe ze in een flowchart voorkomen. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#if-element) If-element ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Ng0g7y9i-l2MWGey%252Fif.png%3Fgeneration%3D1583826011160994%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=b4c4ab14&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#if-else-element) If-else element ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Ng0igmkCJOZmbPAS%252Fifelse.png%3Fgeneration%3D1583826011293154%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=29b424b6&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#while-element) While-element ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Ng0k4dsxO9dWCrJh%252Fwhile.png%3Fgeneration%3D1583826010716991%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=f17d64aa&sv=2) ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#do-while-element) Do while-element ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Ng0maODr7TQ1Ds-P%252Fdowhile.png%3Fgeneration%3D1583826011156766%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=3eff5900&sv=2) Merk op dat bij if en if-else de flow niet naar een eerder punt in de code gaat. Dit is dus de manier om een while/do while te herkennen: er wordt naar een eerder punt in de code gegaan, een punt waar we reeds geweest waren ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#for-element) For-element ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22NeK7xuRx8Nx1Kznq%252Ffor.png%3Fgeneration%3D1583825999869893%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=d7503799&sv=2) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#voorbeeld-flowchart) Voorbeeld flowchart ------------------------------------------------------------------------------------------------------------------------------------------------------------------ Door de eerder beschreven elementen nu samen te voegen kunnen we een programma als een flowchart voorstellen. Stel dat we een programma "Faculteit" maken. Hierin is het de bedoeling om de faculteit van een gegeven getal N dat door de gebruiker wordt ingevoerd, te berekenen (bijvoorbeeld N=5 geeft dan `5! = 5x4x3x2x1 = 120` ). De finale flowchart ziet er als volgt uit: ![](https://apwt.gitbook.io/cursus-pro-oo/~gitbook/image?url=https%3A%2F%2F3364951927-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LiTpB3KNqWfMzRf0oYc%252F-M22Nb3xxvjlraRlZV9u%252F-M22Ng0okN5Q0LQzf_Ki%252Ffullflow.png%3Fgeneration%3D1583826006330468%26alt%3Dmedia&width=768&dpr=4&quality=100&sign=44bb4a98&sv=2) Zoals verteld kunnen we een flowchart in beide richtingen gebruiken. We hebben de flowchart hiervoor gemaakt, gebaseerd op onze oplossing van het vorige labo. Maar stel dat je deze flowchart krijgt, dan kan je dus ook deze chart rechtstreeks omzetten in C#. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#code-2-flow) Code 2 flow -------------------------------------------------------------------------------------------------------------------------------------------------- Via de [website en app "Code2flow"](https://code2flow.com/app) kan je heel eenvoudig een flowchart genereren van pseudocode. [PreviousNesting](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/3_nesting) [NextOefeningen deel 1](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica) Last updated 5 years ago Was this helpful? * [Programma flow analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#programma-flow-analyse) * [Flow-elementen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#flow-elementen) * [If-element](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#if-element) * [If-else element](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#if-else-element) * [While-element](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#while-element) * [Do while-element](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#do-while-element) * [For-element](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#for-element) * [Voorbeeld flowchart](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/4_programflow#voorbeeld-flowchart) Was this helpful? --- # Oefeningen deel 2 | experimentalmerge5 | OLD [G_PRO] Programmeren en OO programmeren Een extra grote hoop oefeningen om je loops te drillen ([originele bron](https://codeforwin.org/2015/06/for-do-while-loop-programming-exercises.html) ). De oefeningen zijn gerangschikt naar moeilijkheid, je moet deze allemaal met loops oplossen! Hoe ver geraak je? Probeer niet alle oefeningen met hetzelfde type loop te doen, wissel tussen `while`, `do...while` en `for`. **Indien er sprake is van** _**n**_ **in de opgave dan is dit een getal dat je eerst aan de gebruiker moet vragen.** > Opgelet: de oplossing van dit soort oefeningen vindt je overal. Weersta hier aan, en probeer ZELF de oplossing te vinden. Dat is de enige manier om dit te leren. 1. Toon alle natuurlijke getallen van 1 tot _n_. 2. Toon alle natuurlijke getallen van _n_ tot 1. 3. Toon alle even getallen tussen 1 en 100. 4. Toon alle oneven getallen tussen 1 en 100. 5. Toon de som van alle getallen van 1 tot _n_ (dus 1+2+3+4+...+n). 6. Toon de som van alle even getallen van 1 tot _n_. 7. Toon de som van alle oneven getallen van 1 tot _n_. 8. Schrijf een programma dat het aantal digits in een getal telt (het getal 12348 heeft bijvoorbeeld 5 digits). 9. (PRO) Schrijf een programma dat een ingevoerd getal als tekst uitschrijft. Als de gebruiker dus 123 invoert zal de uitvoer zijn: honderd drie en twintig. 10. Schrijf een programma dat alle ascii karakters en hun waarde toont van 10 tot _n_ (tip: `char c = Convert.ToChar(65);` zal hoofdletter `A` tonen) 11. Toon het alfabet van a tot z. 12. Schrijf een programma dat de macht van een getal toont. De gebruiker voor eerst het getal in, gevolgd door de macht (bv 2 en 4 zal als resultaat 16 geven (2 tot de 4e)). 13. Schrijf een programma een getal _n_ ontbindt in [factoren](https://nl.wikipedia.org/wiki/Factorisatie) . Factoren zijn de getallen waardoor je _n_ kan delen zonder rest (van bijvoorbeeld het getal 100 zijn de factoren 1,2,4,5,10,20,25,50,100 ). 14. Toon de reeks van [Fibonacci](https://en.wikipedia.org/wiki/Fibonacci_number) tot _n_ termen. [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#oefening-h5-priem-checker) Oefening: H5-priem-checker ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#leerdoelen) Leerdoelen * lussen gebruiken om een resultaat op te bouwen ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#functionele-analyse) Functionele analyse Je krijgt een getal van de gebruiker. Je moet nagaan of dit een priemgetal is, d.w.z. of het precies 2 gehele delers heeft. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#technische-analyse) Technische analyse Elk geheel getal vanaf 2 heeft minstens 2 gehele delers: 1 en zichzelf. Als dat de enige delers van het gegeven getal zijn, is het priem. Je kan dus nagaan of een getal een priemgetal is door alle getallen vanaf 1 tot het getal zelf te overlopen en na te gaan of deze delers zijn van het getal. (Eigenlijk volstaat het minder getallen te checken maar daar draait het hier niet om.) #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#ui) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#voorbeeldinteractie-s) voorbeeldinteractie(s) [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#oefening-h5-priem-generator) Oefening: H5-priem-generator -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#leerdoelen-1) Leerdoelen * geneste lussen gebruiken om een meerdere resultaten te laten zien ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#functionele-analyse-1) Functionele analyse Je krijgt een getal van de gebruiker. Je moet alle priemgetallen kleiner of gelijk aan dit getal laten zien. ### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#technische-analyse-1) Technische analyse Je kan het idee uit de vorige oefening herbruiken, maar nu zijn de getallen die je controleert niet afgeleverd door de gebruiker. Je moet ze zelf genereren in een `for`\-lus. Als je in de vorige oefening een `for`\-lus hebt gebruikt, zal je dus twee `for`\-lussen moeten nesten. #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#ui-1) UI console applicatie #### [](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#voorbeeldinteractie-s-1) voorbeeldinteractie(s) [PreviousOefeningen deel 1](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/a_practica) [NextOefeningen deel 3](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/b_practica) Last updated 5 years ago Was this helpful? * [Oefening: H5-priem-checker](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#oefening-h5-priem-checker) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#leerdoelen) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#functionele-analyse) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#technische-analyse) * [Oefening: H5-priem-generator](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#oefening-h5-priem-generator) * [Leerdoelen](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#leerdoelen-1) * [Functionele analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#functionele-analyse-1) * [Technische analyse](https://apwt.gitbook.io/cursus-pro-oo/experimentalmerge5/semester-1-programming-principles/h5-loops/c_practica#technische-analyse-1) Was this helpful? Copy Geef een getal > 1 Het getal is geen priemgetal! Copy Geef een getal > 2 Het getal is een priemgetal! Copy Geef een getal > 6 Het getal is geen priemgetal! Copy Geef een getal > 7 Het getal is een priemgetal! Copy Geef een getal > 11 Alle priemgetallen kleiner dan of gelijk aan 11 zijn: 2 3 5 7 11 --- # Text Search | WebOntwikkeling 2025 Tot nu toe hebben we enkel gezien hoe we exacte waarden kunnen gebruiken om te filteren. MongoDB heeft ook een text search functionaliteit die je kan gebruiken om tekstuele velden te doorzoeken. Dit kan je gebruiken om bijvoorbeeld een zoekfunctionaliteit te maken. Stel dat we een collectie hebben met de naam `books` en we willen alle boeken vinden waarvan de titel het woord "MongoDB" bevat. Kopiëren interface Book { _id: ObjectId; title: string; summary: string; } en Kopiëren const collection : Collection = client.db("library").collection("books"); Deze collection bevat de volgende boeken: Kopiëren const books: Book[] = [\ { title: "The Great Gatsby", summary: "A book about a rich guy" },\ { title: "MongoDB for Dummies", summary: "A book about a database" },\ { title: "The Catcher in the Rye", summary: "A book about a kid" },\ { title: "The Da Vinci Code", summary: "A book about a code" },\ { title: "The Hobbit", summary: "A book about a hobbit" },\ { title: "Star Wars: The novel", summary: "A book about a galaxy far far away" },\ { title: "Lief klein konijn", summary: "Een boek over een konijntje" }\ ] [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#reguliere-expressies) Reguliere expressies ------------------------------------------------------------------------------------------------------------------- Je kan reguliere expressies gebruiken om tekstuele velden te doorzoeken. Je kan een reguliere expressie meegeven aan de `find` methode om te filteren op een bepaald patroon. Dit geeft alle documenten terug waarvan het veld `title` het woord "MongoDB" bevat. Als je een case-insensitive zoekopdracht wil uitvoeren, dan kan je de `i` vlag toevoegen aan de reguliere expressie. Dit geeft alle documenten terug waarvan het veld `title` het woord "MongoDB" bevat, ongeacht de case. Wil je nu zoeken op een bepaalde variabelen, dan kan je de reguliere expressie dynamisch maken. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#text-search) Text search ------------------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#index-aanmaken) Index aanmaken Je kan ook een text index aanmaken op een veld om te zoeken op tekst. Je kan een text index aanmaken door de `createIndex` methode aan te roepen met als argument een object met als key het veld dat je wil indexeren en als value `"text"`. Dit zal een text index aanmaken op het veld `title`. Je kan nu de `$text` operator gebruiken om te zoeken op tekst. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-een-woord) Zoeken op een woord Over het algemeen is het aanmaken van een text index en text search efficiënter dan het gebruik van reguliere expressies. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-meerdere-woorden) Zoeken op meerdere woorden Dit geeft alle documenten terug waarvan het veld `title` de woorden "MongoDB" en "database" bevat. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#enkelvoud-en-meervoud) Enkelvoud en meervoud Text search is zelfs zo krachtig dat het het onderscheid kan maken tussen enkelvoud en meervoud. zal ook het boek "MongoDB for Dummies" teruggeven want het bevat het woord "dummy" in het meervoud. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#stopwoorden) Stopwoorden Text search houdt ook rekening met stopwoorden. Dit zijn woorden die vaak voorkomen en geen betekenis hebben. Deze worden genegeerd in de zoekopdracht. Dit geeft geen resultaten terug omdat "the" een stopwoord is. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-meerdere-velden) Zoeken op meerdere velden Als je wil zoeken op meerdere velden, dan kan je een text index aanmaken op meerdere velden. De kans bestaat dat je een foutmelding krijgt omdat er al een index bestaat op het title veld. Je kan dit oplossen door eerst de index te verwijderen. Dit zal alle indexen verwijderen. Je kan nu zoeken op meerdere velden. Dit geeft alle documenten terug waarvan het veld `title` of `summary` het woord "database" bevat. ### [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#language-optie) Language optie Je kan ook de `$language` optie meegeven aan de `$text` operator om de taal van de tekst te specificeren. Dit geeft alle documenten terug waarvan het veld `title` of `summary` het woord "konijnen" bevat in het Nederlands. En ja, het boek "Lief klein konijn" zal teruggegeven worden. Wil je volledig taal onafhankelijk zoeken dan moet je de index aanmaken met de `default_language` optie en deze op `none` zetten. Dit is ook handig als je meerdere talen in je collectie hebt en je geen rekening wil houden met stopwoorden en dergelijke. [VorigeDelete](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/delete) [VolgendeGebruik in Express.js](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js) Laatst bijgewerkt 1 jaar geleden * [Reguliere expressies](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#reguliere-expressies) * [Text search](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#text-search) * [Index aanmaken](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#index-aanmaken) * [Zoeken op een woord](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-een-woord) * [Zoeken op meerdere woorden](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-meerdere-woorden) * [Enkelvoud en meervoud](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#enkelvoud-en-meervoud) * [Stopwoorden](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#stopwoorden) * [Zoeken op meerdere velden](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#zoeken-op-meerdere-velden) * [Language optie](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search#language-optie) Kopiëren const result = await collection.find({ title: /MongoDB/ }).toArray(); Kopiëren const result = await collection.find({ title: /mongodb/i }).toArray(); Kopiëren const search : string = "MongoDB"; const result : Book[] = await collection.find({ title: new RegExp(search, "i") }).toArray(); Kopiëren await collection.createIndex({ title: "text" }); Kopiëren const result = await collection.find({ $text: { $search: "MongoDB" } }).toArray(); Kopiëren const result = await collection.find({ $text: { $search: "MongoDB database" } }).toArray(); Kopiëren const result = await collection.find({ $text: { $search: "dummy" } }).toArray(); Kopiëren const result = await collection.find({ $text: { $search: "the" } }).toArray(); Kopiëren await collection.createIndex({ title: "text", summary: "text" }); Kopiëren await collection.dropIndex("*") Kopiëren const result = await collection.find({ $text: { $search: "database" } }).toArray(); Kopiëren const result = await collection.find({ $text: { $search: "konijnen", $language: "nl" } }).toArray(); Kopiëren await collection.createIndex({ title: "text", summary: "text" }, { default_language: "none" }); --- # Sessions | WebOntwikkeling 2025 Sessions zijn een manier om data te bewaren tussen verschillende requests. Eigenlijk doet het vrijwel hetzelfde als cookies, maar zonder dat de data op de client wordt opgeslagen. In plaats daarvan wordt er een unieke identifier naar de client gestuurd, waarmee de server de data kan ophalen. Deze identifier wordt in een cookie opgeslagen in de browser, maar de data zelf wordt op de server bewaard. Dit maakt het veiliger dan cookies, omdat de data niet kan worden aangepast door de client. Daarom dat sessies wel gepast zijn voor gebruik in een login-systeem. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#sessions-in-express) Sessions in Express --------------------------------------------------------------------------------------------------------------------------- In Express kan je gebruik maken van de `express-session` package om sessies te gebruiken. Deze package zorgt ervoor dat er een sessie wordt aangemaakt voor elke client die de server bezoekt. Je kan deze package installeren met npm: Kopiëren npm install express-session npm install --save-dev @types/express-session Het is aan te raden om alles van de sessie in een aparte file te zetten, zodat je het makkelijk kan importeren in je Express applicatie. Maak een nieuw bestand aan, bijvoorbeeld `session.ts`, en zet daar de volgende code in: Kopiëren import dotenv from "dotenv"; dotenv.config(); import session, { MemoryStore } from "express-session"; declare module 'express-session' { export interface SessionData { // All session properties should be defined here } } export default session({ secret: process.env.SESSION_SECRET ?? "my-super-secret-secret", store: new MemoryStore(), resave: true, saveUninitialized: true, cookie: { maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week } }); * De `secret` optie is een string die wordt gebruikt om de sessie te beveiligen. Het is belangrijk dat deze string geheim blijft, omdat het wordt gebruikt om de sessie te versleutelen. Als iemand deze string weet, kan hij de sessie van een andere gebruiker overnemen. Daarom is het een goed idee om deze string in een environment variabele te zetten, zodat deze niet in de code staat. * De `store` optie is een object dat de sessie data opslaat. In dit geval gebruiken we een `MemoryStore`, wat betekent dat de data in het geheugen van de server wordt opgeslagen. Dit is handig voor ontwikkeling en debugging, maar niet geschikt voor productie. In productie gebruik je best een externe database, zoals MongoDB of Redis. * De `resave` optie bepaalt of de sessie opnieuw moet worden opgeslagen als er geen veranderingen zijn. De standaardwaarde is `true`. * De `saveUninitialized` optie bepaalt of de sessie moet worden opgeslagen als er geen data in zit. De standaardwaarde is `true`. * De `maxAge` optie bepaalt hoelang de sessie geldig is. In dit geval is de sessie 1 week geldig. Als je deze optie niet instelt, is de sessie geldig tot de browser wordt gesloten. Vervolgens moeten we deze sessie middleware toevoegen aan onze Express applicatie. Eerst importeren we de sessie middleware in ons `app.ts` bestand: en dan voegen we onze eigen session middleware toe aan de Express applicatie: Als je nu je express server opstart en een request doet naar eender welke route, zal er een sessie worden aangemaakt voor de client. Je kan dit zien in de developer tools van je browser, waar je een cookie ziet met de naam `connect.sid`. Deze cookie bevat de identifier van de sessie en zal worden gebruikt om de sessie te identificeren op de server. Deze wordt automatisch meegestuurd vanuit de browser bij elke request. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-1ec4a398dedbd0710d1ebc7b95a7a5875223951a%252Fsessionidbrowser.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=dcf3af89&sv=2) Development tools - Session ID ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#session-data-opslaan-uitlezen) Session data opslaan/uitlezen Vooraleer we data kunnen opslaan in een sessie moeten we definieren wat we willen opslaan. Als we bijvoorbeeld "username" willen bijhouden in de sessie, moeten we in ons `session.ts` bestand de volgende code aanpassen: Het voordeel van een sessie t.o.v. een cookie is hier dat je ook complexe objecten kan opslaan in de sessie, zoals arrays of objecten. Dus je hoeft deze niet te serialiseren naar een string. Vervolgens kunnen we data opslaan in de sessie door de `req.session` object te gebruiken: Om de sessie data uit te lezen kunnen we hetzelfde object gebruiken: ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#sessie-data-verwijderen) Sessie data verwijderen Om data uit de sessie te verwijderen, kan je de property verwijderen uit het `req.session` object: ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#session-stores) Session stores De inhoud van de sessie wordt langs de serverzijde opgeslagen. Dit impliceert dat, met bovenstaande code, sessies geen herstart van de server kunnen overleven, want er is nergens een opslagmechanisme vermeld. Het defaultmechanisme van express-session is een "in-memory store", dus tijdelijke opslag. Voor ontwikkeling en debugging kan dit handig zijn. In productie gebruik je een "session store". Dit is een externe database die de sessiegegevens opslaat. Er zijn verschillende session stores beschikbaar, zoals `connect-redis`, `connect-mongo`, `connect-mysql`, enz. Deze moet je zelf installeren en configureren. Wil je bijvoorbeeld mongodb gebruiken als session store, dan installeer je de package `connect-mongodb-session`: Wil je deze gebruiken, dan moet je de `MemoryStore` vervangen door de `MongoDBStore`: ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#voorbeelden) Voorbeelden #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#winkel-karretje) Winkel karretje Willen we nu het winkelkarretje van een gebruiker bijhouden op de server in plaats van in de browser, dan kunnen we dit doen met sessies. We kunnen in een sessie een array bijhouden van producten die de gebruiker heeft toegevoegd aan zijn winkelkarretje. Deze keer zullen we geen array van strings bijhouden, maar een array van objecten. Elk object zal een product voorstellen, met een naam en een prijs. Het eerste wat we moeten doen is het product definiëren in een interface (bv in `types.ts`): In het `session.ts` bestand moeten we deze interface importeren en toevoegen aan de `SessionData` interface: De rest van de code in `session.ts` blijft hetzelfde. Vergeet deze niet te importeren en toe te voegen aan de Express applicatie in `index.ts`. In het `index.ts` bestand definieren we nu een array van producten die we later kunnen toevoegen aan ons winkelkarretje: De code om dan een product toe te voegen aan het winkelkarretje ziet er als volgt uit: [VorigeHashing & Encryptie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption) [VolgendeSession Based Login](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login) Laatst bijgewerkt 1 jaar geleden * [Sessions in Express](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#sessions-in-express) * [Session data opslaan/uitlezen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#session-data-opslaan-uitlezen) * [Sessie data verwijderen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#sessie-data-verwijderen) * [Session stores](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#session-stores) * [Voorbeelden](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions#voorbeelden) Kopiëren import session from "./session"; Kopiëren app.use(session); Kopiëren declare module 'express-session' { export interface SessionData { username?: string; } } Kopiëren req.session.username = "JohnDoe"; Kopiëren const username = req.session.username; console.log(username); Kopiëren req.session.destroy(() => { console.log("Sessie verwijderd"); }); Kopiëren npm install connect-mongodb-session npm install --save-dev @types/connect-mongodb-session Kopiëren import dotenv from "dotenv"; dotenv.config(); import session from "express-session"; import mongoDbSession from "connect-mongodb-session"; const MongoDBStore = mongoDbSession(session); const mongoStore = new MongoDBStore({ uri: process.env.MONGODB_URI ?? "mongodb://localhost:27017", collection: "sessions", databaseName: "webontwikkeling", }); mongoStore.on("error", (error) => { console.error(error); }); declare module 'express-session' { export interface SessionData { username?: string; } } export default session({ secret: process.env.SESSION_SECRET ?? "my-super-secret-secret", store: mongoStore, resave: false, saveUninitialized: false, }); Kopiëren interface Product { name: string; price: number; } Kopiëren declare module 'express-session' { export interface SessionData { cart?: Product[]; } } Kopiëren let items: Product[] = [\ {name: "Apple", price: 1},\ {name: "Banana", price: 2},\ {name: "Cherry", price: 3},\ {name: "Orange", price: 2},\ {name: "Raspberry", price: 4},\ {name: "Strawberry", price: 1},\ {name: "Watermelon", price: 5},\ ]; Kopiëren app.get("/cart", (req, res) => { let add : string = typeof req.query.add === "string" ? req.query.add : ""; let cart: Product[] = req.session.cart ? req.session.cart : []; let addProduct : Product | undefined = items.find(product => product.name === add); if (addProduct) { if (add) { cart.push(addProduct); req.session.cart = cart; } } res.render("cart", { items: items, cart: cart }) }); --- # Delete | WebOntwikkeling 2025 In deze sectie gaan we leren hoe we data kunnen verwijderen uit een MongoDB database. Er zijn twee methodes om data te verwijderen: `deleteOne` en `deleteMany`. Die werken op dezelfde manier als de `updateOne` en `updateMany` methodes. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/delete#deleteone) DeleteOne ---------------------------------------------------------------------------------------- Je kan de `deleteOne` methode gebruiken om een document te verwijderen. Je moet een filter meegeven om het document te selecteren dat je wil verwijderen. Kopiëren const result = await collection.deleteOne({ name: "John" }); Dit zal het eerste document met de naam "John" verwijderen. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/delete#deletemany) DeleteMany ------------------------------------------------------------------------------------------ Je kan de `deleteMany` methode gebruiken om meerdere documenten te verwijderen. Je moet een filter meegeven om de documenten te selecteren die je wil verwijderen. Kopiëren const result = await collection.deleteMany({ age: { $lt: 18 } }); Dit zal alle documenten verwijderen waarvan de leeftijd kleiner is dan 18. Je ziet dat we hier ook gebruik maken van query operators om de filter te maken. Je kan ook de `deleteMany` methode gebruiken zonder filter om alle documenten in de collectie te verwijderen. Kopiëren const result = await collection.deleteMany({}); Dit zal alle documenten in de collectie verwijderen. Dit is handig om te gebruiken in testen, maar wees voorzichtig in productie. [VorigeUpdate](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/update) [VolgendeText Search](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/text-search) Laatst bijgewerkt 1 jaar geleden * [DeleteOne](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/delete#deleteone) * [DeleteMany](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/delete#deletemany) --- # CRUD | WebOntwikkeling 2025 Een veel voorkomende vorm van web applicatie is een CRUD applicatie. CRUD staat voor Create, Read, Update en Delete. Dit zijn de vier basis operaties die je kan uitvoeren op een database. Eigenlijk is elke eenvoudige admin dashboard een CRUD applicatie. In dit artikel gaan we een eenvoudige CRUD applicatie maken met MongoDB en Express. De initiele data is afkomstig van `https://jsonplaceholder.typicode.com/users` wat een lijst van gebruikers bevat. We willen dus een applicatie maken waar we gebruikers kunnen toevoegen, verwijderen, updaten en bekijken. We gaan geen rekening houden met error afhandeling in dit deel van de cursus. We gaan er vanuit dat alles goed gaat. In een productie omgeving is het belangrijk om error afhandeling te voorzien. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#inladen-van-de-json-data) Inladen van de JSON data ------------------------------------------------------------------------------------------------------------------------------------------ We gaan eerst de JSON data vanuit de API inladen in onze MongoDB database. We plaatsen de volgende code in een nieuw bestand `database.ts`. Kopiëren import { Collection, MongoClient } from "mongodb"; import dotenv from "dotenv"; import { User } from "./types"; dotenv.config(); export const client = new MongoClient(process.env.MONGODB_URI || "mongodb://localhost:27017"); export const collection : Collection = client.db("exercises").collection("users"); export async function getUsers() { return await collection.find({}).toArray(); } async function exit() { try { await client.close(); console.log("Disconnected from database"); } catch (error) { console.error(error); } process.exit(0); } export async function loadUsersFromApi() { const users : User[] = await getUsers(); if (users.length == 0) { console.log("Database is empty, loading users from API") const response = await fetch("https://jsonplaceholder.typicode.com/users"); const users : User[] = await response.json(); await collection.insertMany(users); } } export async function connect() { try { await client.connect(); await loadUsersFromApi(); console.log("Connected to database"); process.on("SIGINT", exit); } catch (error) { console.error(error); } } En we roepen de `connect` functie aan in ons `index.ts` bestand. Bij het opstarten van de server gaan we de connectie maken met de database en de data inladen vanuit de API. We gaan de data enkel inladen als de database leeg is. We gaan de data inladen in de `users` collectie van de `exercises` database. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#lezen-van-de-data-read) Lezen van de data (READ) ---------------------------------------------------------------------------------------------------------------------------------------- We gaan nu de data lezen vanuit de database en tonen op de webpagina. We gaan de volgende code toevoegen aan ons `index.ts` bestand. Eerst importeren we de `getUser` functie vanuit de `database.ts` bestand. en maken we een `index.ejs` bestand aan in de `views/users` map. We zorgen ook voor een `partials` map in de `views` map en maken een `header.ejs` en `footer.ejs` bestand aan. We tonen de gebruikers in een lijst op de webpagina. We tonen de naam, gebruikersnaam, email, adres, telefoonnummer, website en bedrijfsnaam van de gebruiker. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#toevoegen-van-data-create) Toevoegen van data (CREATE) ---------------------------------------------------------------------------------------------------------------------------------------------- We maken nu een nieuw formulier aan om een gebruiker toe te voegen en plaatsen deze code in een nieuw bestand `views/users/create.ejs`. We voorzien hier voor elk veld een input veld. We gebruiken een `fieldset` element om de adres en bedrijfsgegevens te groeperen. Door de naam van de input velden te voorzien van `address[street]` en `company[name]` kunnen we deze gegevens later makkelijk groeperen in een object. Als je dan de body van de request bekijkt in de Express server, dan zie je dat de `address` en `company` gegevens in een object komen te staan. We gaan nu twee routes aanmaken om de data te verwerken: een GET route om het formulier te tonen en een POST route om de data te verwerken. We doen op het einde van de POST route een redirect naar de gebruikerslijst. Dit zorgt ervoor dat de gebruiker na het toevoegen van een gebruiker terug naar de gebruikerslijst gaat. We voorzien hier nog geen error afhandeling. We gaan nu de `createUser` functie toevoegen aan ons `database.ts` bestand. We voorzien hier ook een `getNextId` functie die het volgende id ophaalt uit de database. We sorteren de gebruikers op id in aflopende volgorde en nemen de eerste gebruiker. Als er geen gebruikers zijn dan geven we 1 terug. We voegen dan 1 toe aan het id en geven dit terug. We gaan nu de gebruiker toevoegen aan de database. Vergeet de `createUser` functie niet te importeren in het `index.ts` bestand. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#delete-van-data-delete) Delete van data (DELETE) ---------------------------------------------------------------------------------------------------------------------------------------- We gaan nu een button toevoegen aan de gebruikerslijst om een gebruiker te verwijderen. We voegen de volgende code toe aan het `index.ejs` bestand. Er wordt dus voor elke gebruiker in de lijst een formulier aangemaakt met een button om de gebruiker te verwijderen. Dit doen we omdat we geen POST requets kunnen doen vanuit een anchor tag. Merk ook op dat we hier een POST gebruiken en geen DELETE. Dit is omdat we geen DELETE requests kunnen doen vanuit een formulier. We gaan nu de route aanmaken om de gebruiker te verwijderen. We voorzien een nieuwe route in het `index.ts` bestand. We gaan nu de `deleteUser` functie toevoegen aan ons `database.ts` bestand. We gaan nu de gebruiker verwijderen uit de database. Vergeet de `deleteUser` functie niet te importeren in het `index.ts` bestand. [](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#updaten-van-data-update) Updaten van data (UPDATE) ------------------------------------------------------------------------------------------------------------------------------------------ We kunnen nu de code van het create formulier hergebruiken om een update formulier te maken. We maken een nieuw bestand `views/users/update.ejs` aan. We zorgen ervoor dat de input velden gevuld zijn met de huidige waarden van de gebruiker en dat we als action de update route gebruiken. We gaan nu de route aanmaken om de gebruiker te updaten. We voorzien weer twee routes in het `index.ts` bestand. Een GET route om het formulier te tonen en een POST route om de data te verwerken. We redirecten ook hier op het einde van de POST route naar de gebruikerslijst. We gaan nu de `getUserById` en `updateUser` functies toevoegen aan ons `database.ts` bestand. Vergeet de `getUserById` en `updateUser` functies niet te importeren in het `index.ts` bestand. [VorigeGebruik in Express.js](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js) [VolgendeEnvironment Variables](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables) Laatst bijgewerkt 1 jaar geleden * [Inladen van de JSON data](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#inladen-van-de-json-data) * [Lezen van de data (READ)](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#lezen-van-de-data-read) * [Toevoegen van data (CREATE)](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#toevoegen-van-data-create) * [Delete van data (DELETE)](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#delete-van-data-delete) * [Updaten van data (UPDATE)](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud#updaten-van-data-update) Kopiëren import { connect } from "./database"; app.listen(3000, async () => { await connect(); console.log("Server is running on port 3000"); }); Kopiëren import { connect, getUsers } from "./database"; Kopiëren app.get("/users", async(req, res) => { let users : User[] = await getUsers(); res.render("users/index", { users: users }); }); Kopiëren <%- include("../partials/header") %>

Manage Users

<% for (let user of users) { %>

<%= user.name %>

Username: <%= user.username %>

Email: <%= user.email %>

Address: <%= user.address.street %>, <%= user.address.suite %>, <%= user.address.city %>, <%= user.address.zipcode %>

Phone: <%= user.phone %>

Website: <%= user.website %>

Company: <%= user.company.name %>

<% } %>
<%- include("../partials/footer") %> Kopiëren <%- include("../partials/header") %>

Create User

Address
Company
<%- include("../partials/footer") %> Kopiëren app.get("/users/create", async(req, res) => { res.render("users/create"); }); app.post("/users/create", async(req, res) => { let user : User = req.body; await createUser(user); res.redirect("/users"); }); Kopiëren export async function getNextId() { let users : User[] = await collection.find({}).sort({id: -1}).limit(1).toArray(); if (users.length == 0) { return 1; } else { return users[0].id + 1; } } export async function createUser(user: User) { user.id = await getNextId(); return await collection.insertOne(user); } Kopiëren import { connect, getUsers, createUser } from "./database"; Kopiëren <% for (let user of users) { %> ...
... <% } %> Kopiëren app.post("/users/:id/delete", async(req, res) => { let id : number = parseInt(req.params.id); await deleteUser(id); res.redirect("/users"); }); Kopiëren export async function deleteUser(id: number) { return await collection.deleteOne({id: id}); } Kopiëren import { connect, getUsers, createUser, deleteUser } from "./database"; Kopiëren <%- include("../partials/header") %>

Update User

Address
Company
<%- include("../partials/footer") %> Kopiëren app.get("/users/:id/update", async(req, res) => { let id : number = parseInt(req.params.id); let user : User | null = await getUserById(id); res.render("users/update", { user: user }); }); app.post("/users/:id/update", async(req, res) => { let id : number = parseInt(req.params.id); let user : User = req.body; await updateUser(id, user); res.redirect("/users"); }); Kopiëren export async function getUserById(id: number) { return await collection.findOne({ id: id }); } export async function updateUser(id: number, user: User) { return await collection.updateOne({ id : id }, { $set: user }); } Kopiëren import { connect, getUsers, createUser, deleteUser, getUserById, updateUser } from "./database"; --- # Hashing & Encryptie | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#hashing) Hashing ------------------------------------------------------------------------------------------------------------- Hashing is een techniek die gebruikt wordt om data onleesbaar te maken. Het is een eenzijdige functie, wat betekent dat je de originele data niet kan herstellen uit de hash. Het is een veelgebruikte techniek om wachtwoorden te beveiligen. Bcrypt is een populaire library om wachtwoorden te hashen. Het is een implementatie van het Blowfish algoritme en is ontworpen om langzaam te zijn, zodat het moeilijk is om wachtwoorden te kraken. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#installeren) Installeren Om Bcrypt te gebruiken in je Node.js project, moet je de library eerst installeren via npm: Kopiëren npm install bcrypt npm install --save-dev @types/bcrypt ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#hash-functie) Hash functie Alle bcrypt functies hebben een asynchrone en een synchrone (blokkerende) variant. Omdat hashing een intensieve taak is, is het aan te raden om de asynchrone variant te gebruiken want deze is geschikt voor asynchrone omgevingen zoals Node.js. Er is een versie met promises en een versie met callbacks. Wij verkiezen die met promises met gebruik van `async` en `await`. Je kan op de volgende manier een wachtwoord hashen: Kopiëren import bcrypt from 'bcrypt'; const saltRounds : number = 10; async function main() : Promise { let hashedPassword : string = await bcrypt.hash("hunter2", saltRounds); console.log(hashedPassword); } main(); Als je dit uitvoert zal je een hash zien die er ongeveer zo uitziet: `$2b$10$UVVA3Gy.0iDmSXTZQfwu8.n96QCw.GkjfTYfb0GcTzM/N0KxsPg8S` Je merkt op dat we hier een saltRounds variabele gebruiken. Voorlopig mag je altijd 10 gebruiken, we zullen later uitleggen wat dit betekent. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#vergelijken) Vergelijken Als je twee keer een wachtwoord hash, zal je twee verschillende hashes krijgen. Hier zijn bepaalde redenen voor, maar het belangrijkste dat je moet weten is dat je niet het volgende kan doen: Hiervoor moet je de `compare` functie gebruiken: Hier moet je geen `saltRounds` meegeven, omdat de salt in de hash zit en automatisch wordt gebruikt. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#security-overwegingen) Security overwegingen #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#salt) Salt Een salt is een willekeurige waarde die wordt toegevoegd aan de data voordat het gehasht wordt. Dit zorgt ervoor dat twee keer dezelfde data een andere hash zal opleveren. Dit is belangrijk omdat het voorkomt dat een aanvaller een rainbow table kan gebruiken om wachtwoorden te kraken. Een rainbow table is een tabel met hashes van veelgebruikte wachtwoorden. Als je geen salt gebruikt, kan een aanvaller de hash van een wachtwoord opzoeken in de tabel en zo het wachtwoord achterhalen. Bcrypt voegt automatisch een salt toe aan de hash, dit is waarom je je dus nooit geen twee keer dezelfde hash zal krijgen, zelfs voor de zelfde data. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#saltrounds) SaltRounds De `saltRounds` parameter bepaalt hoeveel werk bcrypt moet doen om een hash te berekenen. Hoe hoger het getal, hoe langer het duurt om een hash te berekenen. Dit is belangrijk omdat het het moeilijker maakt voor een aanvaller om wachtwoorden te kraken. Als je een te laag getal gebruikt, kan een aanvaller met een krachtige computer veel wachtwoorden per seconde kraken. Als je een te hoog getal gebruikt, kan het te lang duren om een hash te berekenen. Dit maakt het bijna onmogelijk om binnen redelijke tijd voor alle combinaties van wachtwoorden een hash te berekenen. Een goede waarde voor `saltRounds` is 10. Let er op dat je deze waarde nooit te hoog zet, want dit zal het voor de hacker moeilijker maken om wachtwoorden te kraken, maar ook voor jezelf om wachtwoorden te hashen. Dus dit heeft een impact op de performantie van je applicatie. Probeer maar eens zelf een wachtwoord te hashen met een `saltRounds` van 20 en 5. Je zal merken dat het met 20 veel langer duurt dan met 5. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#timing-attacks) Timing attacks Timing attacks zijn aanvallen waarbij een aanvaller probeert om informatie te verkrijgen door de tijd te meten die het kost om een bepaalde taak uit te voeren. Dit kan bijvoorbeeld gebruikt worden om een wachtwoord te kraken door te meten hoe lang het duurt om een hash te berekenen. Bcrypt is ontworpen om dit soort aanvallen te voorkomen door een vaste tijd te nemen om een hash te berekenen, ongeacht de input. Dit voorkomt dat een aanvaller informatie kan verkrijgen door de tijd te meten. Bv: als je een lang wachtwoord hebt, zal het niet langer duren om een hash te berekenen dan voor een kort wachtwoord. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#gebruik-van-hashing-voor-bestanden) Gebruik van hashing voor bestanden Je kan hashing ook gebruiken om de integriteit van bestanden te controleren. Als je een hash berekent van een bestand en deze hash bewaart, kan je later controleren of het bestand is gewijzigd. Als de hash van het bestand overeenkomt met de bewaarde hash, weet je dat het bestand niet is gewijzigd. Als de hash niet overeenkomt, weet je dat het bestand is gewijzigd en kan je actie ondernemen. Vaak zie je op een website iets zoals dit: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6811d60f8361c9098ef733f9b6688d44dba84114%252Fhashes-vscode.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e58a4678&sv=2) Hashes VSCode Als je het bestand gedownload hebt kan je met het `sha256sum` in je console de hash berekenen en controleren of deze overeenkomt met de hash op de website. of in Windows: Als de hashes overeenkomen, weet je dat het bestand niet is gewijzigd en dat je het veilig kan gebruiken. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#encryptie) Encryptie ----------------------------------------------------------------------------------------------------------------- Encryptie is een techniek die gebruikt wordt om data te versleutelen. Het grote verschil met hashing is dat je de originele data kan herstellen uit de versleutelde data. Dit doe je aan de hand van een sleutel (een soort passwoord). Encryptie wordt vaak gebruikt om data te beveiligen tijdens transport (zoals gebeurd bij HTTPS) of om data te beveiligen op een harde schijf. Er zijn twee soorten encryptie: symmetrische en asymmetrische encryptie. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#symmetrische-encryptie) Symmetrische encryptie Bij symmetrische encryptie wordt dezelfde sleutel gebruikt om data te versleutelen en te ontsleutelen. Dit betekent dat de sleutel geheim moet blijven, anders kan iedereen de data ontsleutelen. Symmetrische encryptie is snel en efficiënt, maar heeft als nadeel dat je de sleutel veilig moet kunnen uitwisselen. Beide partijen moeten de sleutel kennen om data te kunnen uitwisselen. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-51fdea0ede56949e4b88c45921cdc243a3737b46%252Fsymmetric.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=949ad57d&sv=2) Symmetric encryption Het grote nadeel van symmetrische encryptie is dat je de sleutel veilig moet kunnen uitwisselen. Als je de sleutel via een onveilig kanaal verstuurt, kan een aanvaller de sleutel onderscheppen en zo toegang krijgen tot de data. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#asymmetrische-encryptie-public-key-cryptography) Asymmetrische encryptie (Public Key Cryptography) Bij asymmetrische encryptie worden twee sleutels gebruikt: een publieke en een private sleutel. De publieke sleutel wordt gebruikt om data te versleutelen en de private sleutel wordt gebruikt om data te ontsleutelen. Dit betekent dat je de publieke sleutel veilig kan delen met anderen, zonder dat ze toegang hebben tot de private sleutel. Assymetrische encryptie is veiliger omdat er geen geheimen gedeeld moeten worden, maar is ook trager en minder efficiënt dan symmetrische encryptie. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3b84c8e9eb09c4b4d8edb87c2384eaf7a1c26826%252Fassymetric.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ef04ad27&sv=2) Assymetric encryption Pas op dat je nooit een private sleutel deelt met anderen, want dan kan iedereen je data ontsleutelen. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#https) HTTPS #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#wat-is-https) Wat is HTTPS? HTTPS zorgt voor een beveiligde communicatie tussen een webserver en een browser. Het maakt gebruik van symmetrische en asymmetrische encryptie om data over de lijn te beveiligen. Zo weet je zeker dat er niemand meeluistert of je data kan onderscheppen. Als je een website bezoekt via HTTPS, kan je zien dat de URL begint met `https://` en dat er een slotje in de adresbalk staat. Dit betekent dat de verbinding beveiligd is en dat je data veilig is. Let er altijd op dat je een website bezoekt via HTTPS als je gevoelige data moet invoeren, zoals wachtwoorden of creditcardgegevens. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6ff31fecb15492949c72b09c36e05f37d15e37c4%252Fhttps.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5bb32ec1&sv=2) Https Het is wel belangrijk om te weten dat je er niet automatisch vanuit mag gaan dat een website veilig is als het begint met `https://`. Het betekent enkel dat de verbinding beveiligd is, maar niet dat de website zelf veilig is. Een website kan nog steeds kwetsbaar zijn voor aanvallen zoals cross-site scripting of SQL injection. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#wat-is-een-ssl-certificaat) Wat is een SSL certificaat? Een SSL certificaat is een digitaal certificaat dat wordt gebruikt om de identiteit van een website te verifiëren en om een beveiligde verbinding tot stand te brengen. Het certificaat bevat informatie over de website, zoals de naam van de eigenaar en de geldigheidsduur van het certificaat. Het bevat ook de publieke sleutel van de website, die wordt gebruikt om data te versleutelen. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-2ea9ea247323f5876c62fa5d771174e14c82a08d%252Fcertificate.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c292cb51&sv=2) Certificaat AP Je moet hier wel mee opletten want in principe kan iedereen een SSL certificaat zelf aanmaken. Dit betekent dat een website die begint met `https://` niet per se veilig is. Hier komt de rol van certificeringsinstanties (CA's) in het spel. Als je een website bezoekt via HTTPS, controleert je browser of het SSL certificaat geldig is en of het is uitgegeven door een vertrouwde CA. Als dit niet het geval is, krijg je een waarschuwing te zien en kan je beslissen of je de website wil bezoeken of niet. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-8ade49a54e0e6de7882f527506183521c9d315b0%252Fselfsigned.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=48d4ea99&sv=2) https://self-signed.badssl.com/ #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#lets-encrypt) Let's Encrypt Normaal gezien moet je betalen voor een SSL certificaat, maar er zijn ook gratis alternatieven beschikbaar. Let's Encrypt is een non-profit certificeringsinstantie (CA's) die gratis SSL certificaten uitgeeft. Het doel van Let's Encrypt is om het internet veiliger te maken door het gebruik van HTTPS te stimuleren. Je kan een SSL certificaat aanvragen via de website van Let's Encrypt of via een hosting provider die Let's Encrypt ondersteunt. Je kan meer informatie vinden op de website van Let's Encrypt: [https://letsencrypt.org/](https://letsencrypt.org/) [VorigeCookies](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies) [VolgendeSessions](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions) Laatst bijgewerkt 8 maanden geleden * [Hashing](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#hashing) * [Installeren](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#installeren) * [Hash functie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#hash-functie) * [Vergelijken](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#vergelijken) * [Security overwegingen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#security-overwegingen) * [Gebruik van hashing voor bestanden](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#gebruik-van-hashing-voor-bestanden) * [Encryptie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#encryptie) * [Symmetrische encryptie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#symmetrische-encryptie) * [Asymmetrische encryptie (Public Key Cryptography)](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#asymmetrische-encryptie-public-key-cryptography) * [HTTPS](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption#https) Kopiëren let hashedPassword1 : string = await bcrypt.hash("hunter2", saltRounds); let hashedPassword2 : string = await bcrypt.hash("hunter2", saltRounds); console.log(hashedPassword1 === hashedPassword2); // false Kopiëren import bcrypt from 'bcrypt'; const saltRounds : number = 10; async function main() : Promise { let hashedPassword : string = await bcrypt.hash("hunter2", saltRounds); let isSame : boolean = await bcrypt.compare("hunter2", hashedPassword); console.log(isSame); // true } main(); Kopiëren sha256sum vscode-windows-x64.zip Kopiëren Get-FileHash vscode-windows-x64.zip -Algorithm SHA256 --- # Environment Variables | WebOntwikkeling 2025 Soms wil je bepaalde gegevens niet hard coderen in je code. Dit kan bijvoorbeeld het geval zijn wanneer je een geheime sleutel hebt die je niet wil delen met anderen of wanneer je een bepaalde instelling wilt kunnen wijzigen zonder je code te moeten aanpassen. In deze gevallen kan je gebruik maken van environment variabelen. Omgevingsvariabelen in Node worden gebruikt om: * Gevoelige gegevens op te slaan, zoals wachtwoorden, API-referenties en andere informatie die niet rechtstreeks in je code mag worden geschreven om beveiligingsrisico's te voorkomen. * Instellingen te configureren die kunnen verschillen tussen omgevingen. Denk maar aan poorten en verwijzingen naar databanken (development, staging, test of productie). [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#terminal) Terminal ------------------------------------------------------------------------------------------------------------------ Je hebt out of the box toegang tot omgevingsvariabelen in Node.js. Wanneer je een Node server opstart, biedt het automatisch toegang tot alle bestaande omgevingsvariabelen door een env-object te maken binnen het globale process object. Als je bijvoorbeeld: Kopiëren PORT=3000 node server.ts uitvoert in de terminal, kan je de waarde van de omgevingsvariabele `PORT` ophalen met `process.env.PORT`. Kopiëren console.log( process.env.PORT) Als je deze niet hebt ingesteld, zal de waarde `undefined` zijn. We kunnen dit oplossen door er een default waarde aan toe te kennen. Kopiëren const port = process.env.PORT || 3000; console.log(port); [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#dotenv-bestand) Dotenv bestand ------------------------------------------------------------------------------------------------------------------------------ Als je er eenmaal een aantal hebt gedefinieerd, zal je snel merken dat het een onderhoudsnachtmerrie wordt. Stel je voor dat je een tiental omgevingsvariabelen gebruikt. Dit schaalt niet goed als je ze allemaal op één regel moet typen. Omgevingsvariabelen uitvoeren vanaf een terminal is zeker handig. Maar het heeft zijn nadelen: * Je kan de lijst met variabelen niet raadplegen; * Het is veel te gemakkelijk om een typfout te maken; Een veel gebruikte oplossing voor het organiseren en onderhouden van je omgevingsvariabelen is het gebruik van een .env-bestand. Het helpt ons om alle omgevingsvariabelen op één plek te definiëren en indien nodig te wijzigen. Bijvoorbeeld, in een .env-bestand: Om een `.env` bestand te gebruiken in je Node.js project, moet je de `dotenv` package installeren. Vervolgens moet je de package importeren in je code en de `config` methode aanroepen. Op dat moment zal de package de variabelen uit het `.env` bestand laden in `process.env`. Doe je dit niet, dan zal je `undefined` zien in de console. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#gitignore) Gitignore -------------------------------------------------------------------------------------------------------------------- Het is belangrijk om te weten dat omgevingsvariabelen of een `.env` bestand nooit mogen worden opgenomen in je versiebeheer. Dit is een beveiligingsrisico omdat het gevoelige informatie bevat. Zorg ervoor dat je deze bestanden toevoegt aan je `.gitignore` bestand. [VorigeCRUD](https://apwt.gitbook.io/webontwikkeling-2025/mongodb/gebruik-in-express.js/crud) [VolgendeCookies](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies) Laatst bijgewerkt 1 jaar geleden * [Terminal](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#terminal) * [Dotenv bestand](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#dotenv-bestand) * [Gitignore](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables#gitignore) Kopiëren PORT=3000 MONGO_URI=mongodb://localhost:27017 Kopiëren npm install dotenv Kopiëren import dotenv from "dotenv"; dotenv.config(); console.log(process.env.PORT); console.log(process.env.MONGO_URI); Kopiëren .env --- # Cookies | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#stateless-http) Stateless HTTP ---------------------------------------------------------------------------------------------------------------- HTTP is een stateless protocol. Dit betekent dat de server geen informatie bijhoudt over de client. Elke request is onafhankelijk van de vorige. Doe je een request naar de server, dan weet de server niet wie je bent of wat je vorige requests waren. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-ad8873918417301576aa735196735d339183bd50%252Fstateless.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5bef434d&sv=2) HTTP is stateless Dit maakt het uiteraard moeilijk om bijvoorbeeld bij te houden of een gebruiker ingelogd is of niet. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-d0cc1c19b066a95f45bd358d49e3674c2d60871d%252Ffacebook-login.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ae07d807&sv=2) Facebook login Ook al heb je de eerste keer een login en paswoord meegegeven zal de tweede keer dat je de pagina bezoekt, de server niet weten wie je bent. Je zal dus opnieuw moeten inloggen. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-a036a0163a886534e5a5cda8ef60ca70da4f2171%252Ffacebook-login-2.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8c30e4c9&sv=2) Facebook login2 [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies) Cookies -------------------------------------------------------------------------------------------------- De oplossing voor dit probleem is gebruik maken van cookies. Cookies zijn kleine stukjes data die de client kan opslaan in de browser. Bij elke request naar de server worden deze cookies meegestuurd. De server kan deze cookies lezen en zo weet de server wie de client is. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-in-express) Cookies in Express #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#installatie) Installatie Express heeft een middleware die het makkelijk maakt om cookies te gebruiken: `cookie-parser`. Je kan deze als volgt installeren: Vervolgens kan je deze middleware toevoegen aan je Express-applicatie: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-instellen) Cookies instellen Stel dat we nu een formulier hebben waarbij de gebruiker zijn naam kan invullen. Als de gebruiker dit doet, willen we dat de gebruiker op de profielpagina terechtkomt en dat de naam van de gebruiker onthouden wordt de volgende keer dat de gebruiker de pagina bezoekt. de `index.ejs` file: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-uitlezen) Cookies uitlezen Nu kunnen we de naam van de gebruiker uitlezen in de profielpagina: de `profile.ejs` file: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-verwijderen) Cookies verwijderen We kunnen ook cookies verwijderen aan de hand van de `clearCookie` methode: en kunnen we een link toevoegen in de `profile.ejs` file: ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#beveiliging) Beveiliging Cookies zijn een krachtig instrument om informatie bij te houden over een gebruiker. Maar dit betekent ook dat je voorzichtig moet zijn met cookies. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-aanpassen-in-de-browser) Cookies aanpassen in de browser Je kan cookies aanpassen in de browser. Dit kan handig zijn om te testen wat er gebeurt als een cookie niet meer bestaat of als een cookie een andere waarde heeft. Dit betekent ook dat je niet zomaar gevoelige informatie in een cookie mag opslaan of dat je niet zomaar mag vertrouwen op de data die in een cookie staat. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-8a55061301cf6b0d9bc76cf6886d261135c0cff8%252Fcookie-browser.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e87c8bda&sv=2) Cookies in browser #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-instellen-met-een-vervaldatum) Cookies instellen met een vervaldatum Je kan ook een cookie instellen met een vervaldatum. Dit doe je door een extra argument mee te geven aan de `cookie` methode: De vervaldatum is een `Date` object. In dit geval zal de cookie 15 minuten geldig zijn (900000 milliseconden) en daarna automatisch verwijderd worden. Je kan ook de `maxAge` property gebruiken om de vervaldatum in milliseconden mee te geven: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#httponly) HttpOnly Een heel belangrijke eigenschap van cookies is `HttpOnly`. Als je een cookie instelt met de `HttpOnly` eigenschap, dan kan de cookie niet aangepast worden door client-side JavaScript. Dit is belangrijk om te voorkomen dat een aan stuk kwaadaardige JavaScript code de cookie aanpast en zo bijvoorbeeld de sessie van een gebruiker overneemt. Als je een cookie instelt zonder httpOnly kan je met JavaScript de cookie aanpassen in de browser console: of hem ophalen: Je zal opmerken dat de cookie niet kan uitgelezen worden of aangepast worden als je de `httpOnly` property instelt. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-589660264ecb2e087a6564899b89aa0f8488d9be%252Fhttponly.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4c3dc52c&sv=2) httponly #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#secure) Secure Een andere belangrijke eigenschap van cookies is `Secure`. Als je een cookie instelt met de `Secure` eigenschap, dan kan de cookie enkel verstuurd worden over een beveiligde verbinding (HTTPS). #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#samesite) SameSite De `SameSite` eigenschap van een cookie bepaalt of een cookie meegestuurd mag worden bij een cross-site request. Dit is een belangrijke eigenschap om CSRF-aanvallen te voorkomen. De `SameSite` eigenschap kan drie waarden hebben: `strict`, `lax` of `none`. * `strict`: de cookie wordt enkel meegestuurd bij een same-site request. Dit betekent dat de cookie alleen wordt meegestuurd als de request naar dezelfde site is als waar de cookie is ingesteld. * `lax`: de cookie wordt meegestuurd bij een same-site request en bij een cross-site request als het via een normale link is. Dit betekent bijvoorbeeld dat de cookie niet wordt meegestuurd als het via een POST request is. * `none`: de cookie wordt altijd meegestuurd, ook bij cross-site requests. Dit kan enkel als de cookie ook de `Secure` eigenschap heeft. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#voorbeelden) Voorbeelden #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#winkel-karretje) Winkel karretje Een veelgebruikte toepassing van cookies is het bijhouden van een winkelkarretje. Als een gebruiker producten toevoegt aan zijn winkelkarretje, dan kan je deze producten bijhouden in een cookie. Zo weet je welke producten de gebruiker wil kopen. de `cart.ejs` file: Merk op dat we `JSON.stringify` en `JSON.parse` om een array van strings op te slaan in een cookie. Cookies kunnen enkel strings opslaan, dus we moeten de array omzetten naar een string. Je kan uiteraard ook andere objecten opslaan in een cookie aan de hand van `JSON.stringify` en `JSON.parse`. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#user-settings) User settings Een andere toepassing van cookies is het onthouden van gebruikersinstellingen. Als een gebruiker bijvoorbeeld de taal van de website wil veranderen, of het thema van de website wil aanpassen, dan kan je deze instellingen bijhouden in een cookie. We maken eerst een interface aan voor de gebruikersinstellingen: Vervolgens maken we een GET route aan om het formulier tonen waar de gebruiker zijn instellingen kan aanpassen en een POST route om de instellingen op te slaan in een cookie: We kunnen nu de instellingen uitlezen in de `settings.ejs` file: [VorigeEnvironment Variables](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/environment-variables) [VolgendeHashing & Encryptie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/hashing-encryption) Laatst bijgewerkt 8 maanden geleden * [Stateless HTTP](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#stateless-http) * [Cookies](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies) * [Cookies in Express](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#cookies-in-express) * [Beveiliging](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#beveiliging) * [Voorbeelden](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/cookies#voorbeelden) Kopiëren npm install cookie-parser npm install --save-dev @types/cookie-parser Kopiëren import cookieParser from "cookie-parser"; const app = express(); app.use(cookieParser()); Kopiëren app.get("/", (req, res) => { res.render("index"); }); app.post("/", (req, res) => { res.cookie("username", req.body.username); res.redirect("/profile"); }); Kopiëren
Kopiëren app.get("/profile", (req, res) => { let name: string = req.cookies.username; res.render("profile", { username: name }); }); Kopiëren

Welcome <%= username %>

Kopiëren app.get("/removeName", (req, res) => { res.clearCookie("username"); res.redirect("/"); }); Kopiëren Remove name Kopiëren res.cookie("username", req.body.username, { expires: new Date(Date.now() + 900000) }); Kopiëren res.cookie("username", req.body.username, { maxAge: 900000 }); Kopiëren res.cookie("username", req.body.username, { httpOnly: true }); Kopiëren document.cookie = "username=John Doe"; Kopiëren console.log(document.cookie) Kopiëren res.cookie("username", req.body.username, { secure: true }); Kopiëren res.cookie("username", req.body.username, { sameSite: "strict" }); Kopiëren let items: string[] = [\ "Apple",\ "Banana",\ "Cherry",\ "Orange",\ "Raspberry",\ "Strawberry",\ "Watermelon",\ ]; app.get("/cart", (req, res) => { let add : string = typeof req.query.add === "string" ? req.query.add : ""; let cart: string[] = req.cookies.cart ? JSON.parse(req.cookies.cart) : []; if (add) { cart.push(add); res.cookie("cart", JSON.stringify(cart)); } res.render("cart", { items: items, cart: cart }) }); Kopiëren

Shop

Cart

    <% for (let item of cart) { %>
  • <%= item %>
    • <% } %>
Kopiëren interface UserSettings { theme: "dark" | "light"; language: "NL" | "EN" | "FR"; } Kopiëren app.get("/settings", (req, res) => { const settings : UserSettings = req.cookies.settings ? JSON.parse(req.cookies.settings) : { darkMode: false, language: "EN" }; res.render("settings", { settings }); }); app.post("/settings", (req, res) => { const settings : UserSettings = { theme: req.body.theme, language: req.body.language }; res.cookie("settings", JSON.stringify(settings)); res.redirect("/settings"); }); Kopiëren <% if (settings.theme === "dark") { %> <% } else if (settings.theme === "light") { %> <% } %> <% if (settings.language === "NL") { %>

Instellingen

<% } else if (settings.language === "EN") { %>

Settings

<% } else if (settings.language === "FR") { %>

Paramètres

<% } %>
--- # Session Based Login | WebOntwikkeling 2025 In dit onderdeel gaan we een volledig werkend login systeem maken. We gaan gebruik maken van sessies om de gebruiker ingelogd te houden. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#nieuwe-express-app) Nieuwe express app --------------------------------------------------------------------------------------------------------------------------------------------- We beginnen deze keer met een volledig nieuwe express app met de volgende code: Kopiëren import express, { Express } from "express"; import dotenv from "dotenv"; import path, { format } from "path"; dotenv.config(); const app : Express = express(); app.set("view engine", "ejs"); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(express.static(path.join(__dirname, "public"))); app.set('views', path.join(__dirname, "views")); app.set("port", process.env.PORT || 3000); app.get("/", async(req, res) => { res.render("index"); }); app.listen(app.get("port"), () => { console.log("Server started on http://localhost:" + app.get('port')); }); Voor deze applicatie hebben we een aantal extra packages nodig. Voer het volgende commando uit in de terminal: Zorg er ook voor dat je een `views` en `public` map hebt in de root van je project. In de `views` map zullen we onze ejs bestanden plaatsen en in de `public` map zullen we onze css en javascript bestanden plaatsen. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#user-collection) User collection --------------------------------------------------------------------------------------------------------------------------------------- We gaan mongodb gebruiken om onze gebruikers op te slaan. We gaan dus gebruik maken van de `mongodb` package. Voer het volgende commando uit in de terminal: Het eerste wat we gaan doen is het aanmaken van een interface voor onze gebruikers. Maak een nieuwe file aan in de root van je project en noem deze `types.ts`. Voeg de volgende code toe aan deze file: We maken hier dus een interface aan voor onze gebruikers. We hebben een email, een wachtwoord en een rol. De rol kan `ADMIN` of `USER` zijn. Een ADMIN kan bijvoorbeeld extra functionaliteiten hebben die een USER niet heeft. We gaan nu een database aanmaken waarin we onze gebruikers gaan opslaan. Maak een nieuwe file aan in de root van je project en noem deze `database.ts`. Voeg de volgende code toe aan deze file: Dis is een simpel bestand dat de connectie met de database opzet. We hebben een `connect` functie die de connectie opzet en een `exit` functie die de connectie sluit wanneer we de applicatie stoppen. Zorg voor een `.env` bestand in de root van je project met de volgende variabele: en we zorgen dat we de connectie opzetten in onze `index.ts` file: Merk op dat we hier kiezen voor `process.exit(1)` zodat de applicatie stopt wanneer er een error is. Onze applicatie kan niet zonder database connectie dus we willen niet dat de server blijft draaien wanneer er een error is. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#toevoegen-van-de-eerste-gebruiker) Toevoegen van de eerste gebruiker --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Omdat we nog geen registratie pagina hebben kan je best altijd een eerste gebruiker toevoegen aan de database. We willen deze niet hardcoden in onze code dus we willen deze gebruiker toevoegen via twee environment variabelen. Voeg de volgende variabelen toe aan je `.env` bestand: Merk op dat dit password nog niet gehashed is. We gaan `bcrypt` gebruiken om onze wachtwoorden te hashen. Voer het volgende commando uit in de terminal: We gaan nu onze eerste gebruiker toevoegen aan de database. Voeg de volgende code toe aan je `database.ts` file: en en roep deze functie aan in je `connect` functie: We kiezen hiervoor om de gebruiker enkel toe te voegen wanneer er nog geen gebruikers in de database zitten. Zo kan je altijd een nieuwe gebruiker toevoegen door de database te legen. Ook gebruiken we een saltRounds van 10 om ons paswoord te hashen. Vergeet deze niet te definieren bovenaan je `database.ts` file: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-functie) Login functie ----------------------------------------------------------------------------------------------------------------------------------- We gaan nu een login functie maken in de `database.ts` file. Voeg de volgende code toe aan deze file: Deze functie zoekt een gebruiker in de database met de gegeven email. Als de gebruiker gevonden is wordt het wachtwoord gecontroleerd met de gegeven wachtwoord. Als het wachtwoord correct is wordt de gebruiker gereturned. Als de gebruiker niet gevonden is of het wachtwoord incorrect is wordt een error gegooid. We gebruiken de `bcrypt.compare` functie om het wachtwoord te controleren. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-pagina) Login pagina --------------------------------------------------------------------------------------------------------------------------------- Nu is alles langs de database kant klaar. We gaan nu een login pagina maken. Maak een nieuwe file aan in de `views` map en noem deze `login.ejs`. Voeg de volgende code toe aan deze file: We hebben hier een simpel formulier met een email en een wachtwoord veld. We gaan nu een route maken in onze `index.ts` file om deze pagina te tonen. Voeg de volgende code toe aan deze file: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#session-middleware) Session middleware --------------------------------------------------------------------------------------------------------------------------------------------- We gaan nu sessies gebruiken om de gebruiker ingelogd te houden. We gaan dus eerst de `express-session` package installeren. Voer het volgende commando uit in de terminal: We zullen de sessie data bijhouden in een mongodb database. We gaan dus ook de `connect-mongodb-session` package installeren. Voer het volgende commando uit in de terminal: We gaan nu een nieuwe file aanmaken in de root van je project en noem deze `session.ts`. Voeg de volgende code toe aan deze file: In onze session data gaan we een `User` object bijhouden. We hebben een `user` property in onze `SessionData` interface. We hebben ook een cookie die 1 week geldig is. We gaan nu deze middleware toevoegen aan onze app. Voeg de volgende code toe aan je `index.ts` file: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-post-route) Login POST route ----------------------------------------------------------------------------------------------------------------------------------------- We gaan nu een POST route maken om de gebruiker in te loggen. Voeg de volgende code toe aan je `index.ts` file: We gaan de gebruiker inloggen en de gebruiker in de sessie data zetten. We verwijderen het wachtwoord van de gebruiker voor we deze in de sessie data zetten. Dit is een extra beveiliging zodat het gehashte wachtwoord niet in de sessie data zit of nooit tot bij de client geraakt. We gaan de gebruiker doorsturen naar de home pagina als de login gelukt is en anders terug naar de login pagina. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#home-pagina) Home pagina ------------------------------------------------------------------------------------------------------------------------------- Nu is het tijd om een home pagina te maken met bijbehorende routes. Maak een nieuwe file aan in de `views` map en noem deze `home.ejs`. Voeg de volgende code toe aan deze file: en voeg de volgende code toe aan je `index.ts` file: Op dit moment zal je applicatie crashen als je naar de home pagina gaat en je nog niet ingelogd bent. We zouden dus best een check toevoegen om te kijken of de gebruiker ingelogd is. Voeg de volgende code toe aan je `index.ts` file: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#secure-middleware) Secure Middleware ------------------------------------------------------------------------------------------------------------------------------------------- Het probleem bij onze aanpak hierboven is dat we voor elke route gaan moeten controleren of de gebruiker ingelogd is. Dit is veel werk en kan foutgevoelig zijn. We gaan dus een middleware maken die controleert of de gebruiker ingelogd is. Maak een nieuwe file aan en noem deze `secureMiddleware.ts`. Voeg de volgende code toe aan deze file: Deze middleware controleert of de gebruiker ingelogd is. Als de gebruiker ingelogd is wordt de gebruiker toegevoegd aan de `res.locals` zodat deze beschikbaar is in de views. Als de gebruiker niet ingelogd is wordt de gebruiker doorgestuurd naar de login pagina. Nu moeten we deze middleware toevoegen aan onze app. We gaan deze niet toevoegen aan elke route maar aan de routes die beveiligd moeten worden. We gaan deze middleware toevoegen aan de home route. Voeg de volgende code toe aan je `index.ts` file: Let op dat je deze niet aan de login route toevoegt. Anders kan je nooit inloggen. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#logout) Logout --------------------------------------------------------------------------------------------------------------------- Voor de volledigheid gaan we ook een logout functie toevoegen. Voeg de volgende code toe aan je `index.ts` file: en voegen we een logout knop toe aan onze home pagina: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#routers) Routers ----------------------------------------------------------------------------------------------------------------------- Het is ook best om onze routes in aparte files te zetten. We gaan een `routes` map maken in de root van je project. In deze map maken we een loginRouter en een homeRouter. De reden hiervoor is dat we op deze manier de volledige homeRouter kunnen beveiligen met de secureMiddleware. Maak een nieuwe file aan in de `routes` map en noem deze `loginRouter.ts`. Voeg de volgende code toe aan deze file: en maak een nieuwe file aan in de `routes` map en noem deze `homeRouter.ts`. Voeg de volgende code toe aan deze file: We gaan nu deze routers toevoegen aan onze app. Voeg de volgende code toe aan je `index.ts` file: [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#flash-messages) Flash Messages ------------------------------------------------------------------------------------------------------------------------------------- We maken vaak gebruik van `try catch` blokken om errors op te vangen bij het inloggen en gebruiken vervolgens een `redirect` om de gebruiker terug te sturen naar de login pagina. Dit is niet ideaal. We zouden beter een error message tonen op de login pagina. We kunnen jammer genoeg geen error message meegeven met een redirect. Dus we hebben hier voor een andere oplossing nodig. Het is mogelijk om een error message mee te geven in de sessie. Eerst voorzien we een interface voor een `FlashMessage` in onze `types.ts` file: Voeg een nieuwe property toe aan je `SessionData` interface in je `session.ts` file: Een flash message is een bericht dat we maar 1 keer willen tonen, en dan verwijderen. We gaan nu een middleware maken die deze flash messages toevoegt aan de `res.locals`. Maak een nieuwe file aan en noem deze `flashMiddleware.ts`. Voeg de volgende code toe aan deze file: Hier gaan we dus kijken of er een message in de sessie zit. Als deze er is voegen we deze toe aan de `res.locals` en verwijderen we deze uit de sessie. We gaan deze middleware toevoegen aan onze app. Voeg de volgende code toe aan je `index.ts` file: Nu kunnen we heel gemakkelijk een error message toevoegen aan de sessie en deze tonen op de login pagina. Zo kunnen we de gebruiker laten weten wat er mis is gegaan. We kunnen de volgende code in de `catch` blok van onze login route toevoegen: Maar ook de volgende code bij een succesvolle login: Nu kunnen we de volgende code in onze `login.ejs` file toevoegen (of in een aparte partials file als je dit wil hergebruiken): Het is mogelijk om met css animaties te werken om de messages te laten verdwijnen na een bepaalde tijd. Dit is echter niet de focus van deze cursus. Het is wel aan te raden om dit te doen in een echte applicatie. Er bestaan ook packages op npm die voor jou de flash messages afhandelen. Je kan deze gebruiken als je dit wil. Maar het is ook goed om te weten hoe je dit zelf kan doen. [VorigeSessions](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions) [VolgendeJWT Tokens](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens) Laatst bijgewerkt 8 maanden geleden * [Nieuwe express app](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#nieuwe-express-app) * [User collection](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#user-collection) * [Toevoegen van de eerste gebruiker](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#toevoegen-van-de-eerste-gebruiker) * [Login functie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-functie) * [Login pagina](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-pagina) * [Session middleware](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#session-middleware) * [Login POST route](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#login-post-route) * [Home pagina](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#home-pagina) * [Secure Middleware](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#secure-middleware) * [Logout](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#logout) * [Routers](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#routers) * [Flash Messages](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login#flash-messages) Kopiëren npm install express dotenv ejs Kopiëren npm install mongodb Kopiëren import { ObjectId } from "mongodb"; export interface User { _id?: ObjectId; email: string; password?: string; role: "ADMIN" | "USER"; } Kopiëren import dotenv from "dotenv"; dotenv.config(); import { MongoClient } from "mongodb"; import { User } from "./types"; export const MONGODB_URI = process.env.MONGODB_URI ?? "mongodb://localhost:27017"; export const client = new MongoClient(MONGODB_URI); export const userCollection = client.db("login-express").collection("users"); async function exit() { try { await client.close(); console.log("Disconnected from database"); } catch (error) { console.error(error); } process.exit(0); } export async function connect() { await client.connect(); console.log("Connected to database"); process.on("SIGINT", exit); } Kopiëren MONGODB_URI=mongodb://localhost:27017 Kopiëren import { connect } from "./database"; Kopiëren app.listen(app.get("port"), async() => { try { await connect(); console.log("Server started on http://localhost:" + app.get('port')); } catch (e) { console.log(e); process.exit(1); } }); Kopiëren ADMIN_EMAIL=dummy@ap.be ADMIN_PASSWORD=admin Kopiëren npm install bcrypt npm install --save-dev @types/bcrypt Kopiëren import bcrypt from "bcrypt"; Kopiëren async function createInitialUser() { if (await userCollection.countDocuments() > 0) { return; } let email : string | undefined = process.env.ADMIN_EMAIL; let password : string | undefined = process.env.ADMIN_PASSWORD; if (email === undefined || password === undefined) { throw new Error("ADMIN_EMAIL and ADMIN_PASSWORD must be set in environment"); } await userCollection.insertOne({ email: email, password: await bcrypt.hash(password, saltRounds), role: "ADMIN" }); } Kopiëren await createInitialUser(); Kopiëren const saltRounds : number = 10; Kopiëren export async function login(email: string, password: string) { if (email === "" || password === "") { throw new Error("Email and password required"); } let user : User | null = await userCollection.findOne({email: email}); if (user) { if (await bcrypt.compare(password, user.password!)) { return user; } else { throw new Error("Password incorrect"); } } else { throw new Error("User not found"); } } Kopiëren <%- include("partials/header") %>
<%- include("partials/footer") %> Kopiëren app.get("/login", (req, res) => { res.render("login"); }); Kopiëren npm install express-session npm install --save-dev @types/express-session Kopiëren npm install connect-mongodb-session npm install --save-dev @types/connect-mongodb-session Kopiëren import { MONGODB_URI } from "./database"; import session, { MemoryStore } from "express-session"; import { User } from "./types"; import mongoDbSession from "connect-mongodb-session"; const MongoDBStore = mongoDbSession(session); const mongoStore = new MongoDBStore({ uri: MONGODB_URI, collection: "sessions", databaseName: "login-express", }); declare module 'express-session' { export interface SessionData { user?: User } } export default session({ secret: process.env.SESSION_SECRET ?? "my-super-secret-secret", store: mongoStore, resave: true, saveUninitialized: true, cookie: { maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week } }); Kopiëren import session from "./session"; app.use(session); Kopiëren app.post("/login", async(req, res) => { const email : string = req.body.email; const password : string = req.body.password; try { let user : User = await login(email, password); delete user.password; req.session.user = user; res.redirect("/") } catch (e : any) { res.redirect("/login"); } }); Kopiëren <%- include("partials/header") %> <%= user.email %> is logged in <%- include("partials/footer") %> Kopiëren app.get("/", async(req, res) => { res.render("index"); }); Kopiëren app.get("/", async(req, res) => { if (req.session.user) { res.render("index", {user: req.session.user}); } else { res.redirect("/login"); } }); Kopiëren import { NextFunction, Request, Response } from "express"; export function secureMiddleware(req: Request, res: Response, next: NextFunction) { if (req.session.user) { res.locals.user = req.session.user; next(); } else { res.redirect("/login"); } }; Kopiëren import { secureMiddleware } from "./secureMiddleware"; app.get("/", secureMiddleware, async(req, res) => { res.render("index", { user: req.session.user }); }); Kopiëren app.post("/logout", async(req, res) => { req.session.destroy(() => { res.redirect("/login"); }); }); Kopiëren <%- include("partials/header") %> <%= user.email %> is logged in.
<%- include("partials/footer") %> Kopiëren import express from "express"; export function loginRouter() { const router = express.Router(); router.get("/login", async (req, res) => { res.render("login"); }); router.post("/login", async (req, res) => { const email: string = req.body.email; const password: string = req.body.password; try { let user: User = await login(email, password); delete user.password; // Remove password from user object. Sounds like a good idea. req.session.user = user; res.redirect("/") } catch (e: any) { res.redirect("/login"); } }); router.post("/logout", secureMiddleware, async (req, res) => { req.session.destroy((err) => { res.redirect("/login"); }); }); return router; } Kopiëren import express from "express"; export function homeRouter() { const router = express.Router(); router.get("/", async(req, res) => { res.render("index"); }); return router; } Kopiëren import { loginRouter } from "./routes/loginRouter"; import { homeRouter } from "./routes/homeRouter"; app.use(loginRouter()); app.use(homeRouter()); Kopiëren export interface FlashMessage { type: "error" | "success" message: string; } Kopiëren export interface SessionData { user?: User; message?: FlashMessage; } Kopiëren import { NextFunction, Request, Response } from "express"; export function flashMiddleware(req: Request, res: Response, next: NextFunction) { if (req.session.message) { res.locals.message = req.session.message; delete req.session.message; } else { res.locals.message = undefined; } next(); }; Kopiëren import { flashMiddleware } from "./flashMiddleware"; app.use(flashMiddleware); Kopiëren req.session.message = {type: "error", message: e.message}; res.redirect("/login"); Kopiëren req.session.message = {type: "success", message: "Login successful"}; res.redirect("/"); Kopiëren <% if (message) { %>

<%= message.message %>

<% } %> --- # JWT Tokens | WebOntwikkeling 2025 ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens#wat-zijn-json-web-tokens) Wat zijn JSON Web Tokens? JSON web tokens (JWT) zijn een manier om informatie op een veilige en standaardiserende manier op te slaan en te verzenden tussen verschillende partijen. Deze tokens bestaan uit drie delen: een header, een payload en een signature. De header bevat informatie over hoe het token is opgebouwd, zoals het type en de hashing algoritme. De payload bevat de informatie die opgeslagen en verzonden moet worden, zoals gebruikersgegevens en toegangsrechten. De signature is een cryptografische hash die gebruikt wordt om de integriteit en authenticiteit van het token te verifiëren. JWT's zijn vaak gebruikt in authenticatie- en autorisatieprocessen in webapplicaties. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens#waarvoor-worden-jwts-gebruikt-en-waarom-is-het-nodig) Waarvoor worden JWT's gebruikt en waarom is het nodig? JWT's zijn een handige manier om informatie op te slaan en te verzenden tussen verschillende partijen zonder deze informatie op te slaan in een database. Dit betekent dat JWT's een efficiëntere manier zijn om gebruikers te authenticaten en autoriseren, omdat het verificatieproces op de client-side kan plaatsvinden. JWT's zijn ook veilig, omdat de informatie die opgeslagen is in het token niet makkelijk te lezen is zonder de juiste decoderingstechnieken. Bovendien kan de signature gebruikt worden om te verifiëren dat het token niet is gemanipuleerd tijdens het verzenden. Dit maakt JWT's een veelgebruikt mechanisme in het ontwikkelen van webapplicaties. **Hier zijn enkele scenario's waarin JSON Web Tokens nuttig zijn:** * **Autorisatie**: Autorisatie met JWT's gebeurt door het opstellen van een token dat de toegangsrechten van een gebruiker bevat. De token in kwestie wordt dan verzonden naar de server, die de token kan verifiëren en decoderen om te bepalen of de gebruiker toegang heeft tot bepaalde functionaliteiten of gegevens. Dit kan bijvoorbeeld gebruikt worden om te bepalen of een gebruiker toegang heeft tot een bepaalde pagina of API-endpoint. De toegangsrechten die opgeslagen kunnen worden in een JWT variëren en kunnen bijvoorbeeld het recht geven op lezen, schrijven of verwijderen van gegevens. * **Informatie-uitwisseling**: Informatie-uitwisseling met JWT's gebeurt door het opstellen van een token dat de benodigde informatie bevat. De token wordt dan verzonden naar de ontvanger, die de token kan verifiëren en decoderen om de bijbehorende informatie te gebruiken. De informatie die opgeslagen kan worden in een JWT varieert en kan bijvoorbeeld gebruikersgegevens, toegangsrechten of andere relevante informatie bevatten. Je vraagt je misschien af waarom de authenticatie server de informatie niet gewoon als een `JSON`\-object kan verzenden en waarom deze moet worden omgezet in een ondertekende "**token**". Als de authenticatie server het als een gewoon `JSON`\-object verzendt, kan de client niet controleren of de inhoud dat ze ontvangt correct is. Een kwaadwillende aanvaller zou bijvoorbeeld de gebruikers-ID kunnen wijzigen vooraleer het bij de client terechtkomt. De client zou dat op geen enkele manier te weten kunnen komen. Vanwege dit beveiligingsprobleem moet de authenticatie server deze informatie verzenden op een manier die kan worden geverifieerd door de client, en hier komt het concept van een ondertekende "**token**" in beeld. Simpel gezegd, een token is een string die bepaalde informatie bevat die veilig kan worden geverifieerd. Het kan een willekeurige set alfanumerieke tekens zijn die naar een ID in de database verwijzen, of het kan een gecodeerde JSON zijn die door de client zelf kan worden geverifieerd. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens#wat-is-de-json-web-token-structuur) Wat is de JSON Web Token-structuur? In zijn compacte vorm bestaan JSON Web Tokens uit drie delen gescheiden door punten (.), namelijk: 1. **Header**, Bestaat uit twee delen: 1. Het ondertekeningsalgoritme dat wordt gebruikt. Dit bepaalt onder andere of je met één secret werkt of met een public-private key pair; 2. Het type token, dat in dit geval "`JWT`" is; 2. **Payload**: 1. De payload bevat de claims of het JSON-object; 3. **Signature**: 1. Een tekenreeks die wordt gegenereerd via een cryptografisch algoritme dat kan worden gebruikt om de integriteit van de JSON-payload te verifiëren; Een JWT er meestal als volgt uit. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FHapKfreucaZqNQ6POFDJ%252Fwat-is-jwt.png%3Falt%3Dmedia%26token%3D76779891-4564-42e0-bbb2-45730cd39741&width=768&dpr=4&quality=100&sign=18d9aa99&sv=2) Bron: SuperTokens ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FWvCJCGgnMIbP7SLV7QQy%252Fwat-is-jwt-2.png%3Falt%3Dmedia%26token%3D49ebcd1e-cdb3-4b56-ba4e-d334206f6cd4&width=768&dpr=4&quality=100&sign=8e2d3acb&sv=2) Analyse van een JWT token via jwt.io Laten we de verschillende onderdelen opsplitsen. **Header** De header van een JWT bevat informatie over hoe de token is opgebouwd, zoals het type en de hashing algoritme. Dit is belangrijk om te weten om de token te kunnen decoderen en verifiëren. De header bestaat doorgaans uit twee delen: 1. Het type token, dat `JWT` is; 2. Het ondertekeningsalgoritme dat wordt gebruikt, zoals `HMAC` `SHA256` of `RSA`; Bijvoorbeeld: Vervolgens is deze JSON Base64Url-gecodeerd om het eerste deel van de JWT te vormen. **Payload** Het tweede deel van de token is de payload, die de claims bevat. Claims zijn uitspraken over een entiteit (meestal de gebruiker) en aanvullende gegevens. De payload bevat de informatie die opgeslagen en verzonden moet worden in de token, zoals gebruikersgegevens en toegangsrechten. Deze informatie wordt gecodeerd in de token zodat het niet makkelijk te lezen is zonder de juiste decoderingstechniëken. Een JWT kan bijvoorbeeld een claim met de naam `name` bevatten die beweert dat de naam van de gebruiker "AP user" is. In een JWT wordt een claim weergegeven als een **key/value-pair** waarbij de key altijd een tekenreeks is en de value een JSON-waarde kan zijn. Het volgende JSON-object bevat bijvoorbeeld drie claims (`sub`, `name`, `iat`): Vervolgens de payload ook JSON Base64Url-gecodeerd om het tweede deel van de JWT te vormen. **Signature** De signature wordt gebruikt om de integriteit en authenticiteit van de token te verifiëren, om te controleren of het token niet is gemanipuleerd tijdens het verzenden. Op deze manier wordt de informatie op een veilige en betrouwbare manier gewaarborgd in de JWT token. Als je bijvoorbeeld het HMAC SHA256-algoritme wilt gebruiken, wordt de handtekening op de volgende manier gemaakt: De handtekening wordt gebruikt om te verifiëren dat het bericht onderweg niet is gewijzigd. Ze kan aangemaakt zijn met hetzelfde geheim dat nodig is om te handtekening te verifiëren (dan spreken we over een _secret_) of kan ondertekend zijn met een geheim stuk data (_private key_) waarvoor de decryptiesleutel (_public key_) wel algemeen gekend is. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens#zet-alles-bij-elkaar) Zet alles bij elkaar De uitvoer bestaat uit drie Base64-URL-tekenreeksen gescheiden door punten die gemakkelijk kunnen worden doorgegeven in HTML- en HTTP-omgevingen. Het volgende toont een JWT met de vorige header en payload gecodeerd en is ondertekend met een geheim: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FPPfjlUPSZ3tXqjdn7Kaa%252Fwat-is-jwt-3.png%3Falt%3Dmedia%26token%3D5750a0a5-b596-456f-905a-23012b4be904&width=768&dpr=4&quality=100&sign=645cfb82&sv=2) De drie (geëncodeerde) onderdelen. Als je met JWT wilt spelen en deze concepten in de praktijk wilt brengen, kan je [jwt.io Debugger](https://jwt.io/#debugger-io) gebruiken om JWT's te decoderen, verifiëren en genereren. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens#hoe-werkt-het-in-de-praktijk) Hoe werkt het in de praktijk? Wanneer een gebruiker zich succesvol aanmeldt met zijn inloggegevens, genereert de authenticatie-server een JWT die de identiteit van de gebruiker certificeert. De auth-server retourneert de JWT naar de USER die het vervolgens kan gebruiken om de beveiligde routes van de resource server aan te roepen. De resource server verifieert de JWT en stuurt de gewenste gegevens naar de USER. 1. Gebruiker meldt zich aan met gebruikersnaam en wachtwoord of google/facebook; 2. Authenticatie server verifieert de inloggegevens en geeft een jwt uit die is ondertekend met een "secret" of een private key; 3. De gebruiker gebruikt de JWT om toegang te krijgen tot beveiligde bronnen. De JWT wordt meegestuurd in de HTTP-authorization header; 4. De resource server verifieert vervolgens de authenticiteit van de token met behulp van de "secret" of een public key. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FCZX8JK0xRYPjY4tjNR4d%252Fwat-is-jwt-4.png%3Falt%3Dmedia%26token%3De63a6b29-2976-4ae6-80eb-903ef71e7299&width=768&dpr=4&quality=100&sign=a864d207&sv=2) Houd er ook mee rekening dat de informatie opgeslagen in JSON Web Tokens, hoewel beschermd tegen manipulatie, voor iedereen leesbaar is. **Plaats geen geheime informatie in de payload of header-elementen van een JWT, tenzij deze versleuteld zijn.** Telkens wanneer de gebruiker toegang wil tot een beschermde route of bron, moet de gebruiker in kwestie de JWT mee verzenden in de header van de request. De beveiligde routes van de server controleren op een geldige JWT in de Authorization-header en als deze aanwezig is, krijgt de gebruiker toegang tot beveiligde bronnen. **Resources** * [Wat is JWT?](https://jwt.io/introduction) * [Waar en hoe kan je het toepassen?](https://supertokens.com/blog/what-is-jwt) * [https://auth0.com/docs/secure/tokens/json-web-tokens/json-web-token-claims](https://auth0.com/docs/secure/tokens/json-web-tokens/json-web-token-claims) * [JWT in express met jsonwebtokens, crypto en dotenv](https://www.digitalocean.com/community/tutorials/nodejs-jwt-expressjs) [VorigeSession Based Login](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/sessions/session-based-login) [VolgendeJWT NPM package](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/jwt-npm-package) Laatst bijgewerkt 1 jaar geleden Kopiëren header.payload.signature Kopiëren { "alg": "HS256", "typ": "JWT" } Kopiëren { "sub": "1234567890", "name": "AP user", "iat": "1516239022" } Kopiëren HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret) --- # Tokens veilig opslaan | WebOntwikkeling 2025 JSON web tokens kunnen vrij gedeeld worden. Dat biedt veel gebruiksgemak, maar het zorgt er ook voor dat we ze met enige voorzichtigheid moeten opslaan: als een aanvaller een JWT kan stelen, kan die zich ook voordoen als het slachtoffer. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#local-storage) Local storage [Local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) is, eenvoudig gesteld, opslagruimte in de browser die bij een bepaalde website hoort. Dit lijkt een goede plaats om een JWT op te slaan (en dit wordt ook vaak gedaan). Het risico bestaat echter dat een externe partij JavaScriptcode kan "injecteren" in onze applicatie en dan local storage kan uitlezen. Dit komt omdat alle JavaScriptcode op onze website toegang heeft tot local storage, of we ze nu zelf geschreven hebben of niet. Dit type aanval heet een "cross-site scripting attack", omdat er een script wordt uitgevoerd dat niet van onze eigen site afkomstig is. Het is niet gegarandeerd dat iemand er in zou slagen JavaScriptcode te injecteren (dat hangt af van hoe veel vrijheid de gebruikers hebben om informatie naar de site te sturen), maar het is niet eenvoudig alles dicht te timmeren. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#cookies-aangeraden-oplossing) Cookies (aangeraden oplossing) Cookies zijn iets lastiger in het gebruik dan local storage, maar ze bieden ook persistentie. Ze bieden ook een "HTTP-only" optie aan, zodat ze niet door JavaScriptcode gelezen kunnen worden, maar wel met HTTP-requests naar onze site worden verstuurd. Dit maakt een cross-site scripting attack onmogelijk. Ze kunnen ook geconfigureerd worden zodat ze enkel over HTTPS verstuurd worden. Gewoon HTTP-verkeer is leesbaar op elke tussenstop, maar HTTPS is dat niet. Dus het is niet erg dat cookies gewone tekstbestanden zijn. Ten slotte kunnen we cookies zo instellen dat ze **enkel** naar de bronsite worden verstuurd. Dit is belangrijk om een ander type aanval te voorkomen, namelijk de "Cross Site Request Forgery". Dit is een techniek waarbij een aanvaller het slachtoffer informatie naar de verkeerde website doet sturen (bijvoorbeeld door deze te overtuigen op een bepaalde link te klikken). ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#implementatie-in-express) Implementatie in Express Om een JWT token in te stellen in een Express applicatie, kan je volgende code gebruiken: Kopiëren // token is een eerder aangemaakt JWT token // "jwt" is hier een identifier voor je cookie // de exacte betekenis van de waarden vind je op https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite res.cookie("jwt", token, { httpOnly: true, sameSite: "lax", secure: true }); [VorigeJWT NPM package](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/jwt-npm-package) [VolgendeToken Based Login](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login) Laatst bijgewerkt 1 jaar geleden * [Local storage](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#local-storage) * [Cookies (aangeraden oplossing)](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#cookies-aangeraden-oplossing) * [Implementatie in Express](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan#implementatie-in-express) --- # JWT NPM package | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/jwt-npm-package#jsonwebtokens-npm-package) jsonwebtokens NPM package --------------------------------------------------------------------------------------------------------------------------------------------------------- **jsonwebtoken** is een npm package die wordt gebruikt om JSON Web Tokens (JWT) te maken, verifiëren en decoderen in een nodeJS applicatie. Kopiëren npm i jsonwebtoken De types installeer je als development dependencies: `npm i --save-dev @types/jsonwebtoken`. De jsonwebtoken package biedt een aantal functies die kunnen worden gebruikt om JWTs te maken, verifiëren en decoderen. **De belangrijkste functies zijn:** * `jwt.sign()`, die wordt gebruikt om een JWT te maken met behulp van een gegeven payload en een geheime sleutel; * `jwt.verify()` wordt gebruikt om een JWT te verifiëren en te decoderen met behulp van een geheime sleutel; #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/jwt-npm-package#jwt.sign) jwt.sign() De `jwt.sign` functie uit de jsonwebtokens package is een functie die wordt gebruikt om een JSON Web Token (JWT) te genereren. De `jwt.sign` functie neemt twee argumenten: het eerste is de informatie die je wilt opslaan in het JWT (dit wordt ook wel de "**payload**" genoemd), en het tweede is een "**geheim**" dat wordt gebruikt om de JWT te ondertekenen en te beveiligen. De functie retourneert vervolgens een JWT dat je kunt gebruiken om de opgeslagen informatie te versturen of op te halen. Hier is een voorbeeld van hoe je de `jwt.sign` functie zou kunnen gebruiken in Typescript: Kopiëren import * as jwt from 'jsonwebtoken'; // Dit is de informatie die we willen opslaan in de JWT const payload = { userId: 123, username: 'johndoe', }; // Dit is het geheim dat we gebruiken om de JWT te ondertekenen en te beveiligen const secret = 'my_secret_key'; // We gebruiken de jwt.sign functie om de JWT te genereren const token = jwt.sign(payload, secret); // Nu kunnen we de JWT gebruiken om de opgeslagen informatie te versturen of op te halen console.log(token); In dit voorbeeld gebruiken we de `jwt.sign` functie om een JWT te genereren met de opgegeven informatie (in dit geval de `userId` en `username` van de gebruiker) en het opgegeven geheim. De functie retourneert een JWT die we kunnen gebruiken om de opgeslagen informatie te versturen of op te halen. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/jwt-npm-package#jwt.verify) jwt.verify() De `jwt.verify()` functie is een functie in de **jsonwebtoken** npm package die wordt gebruikt om een JSON Web Token (JWT) te verifiëren en de bijbehorende gegevens te decoderen. De functie neemt een token en een geheime sleutel als argumenten en geeft de decodering van de token terug als een object. Hier is een voorbeeld van hoe de functie zou kunnen worden gebruikt: In dit voorbeeld wordt de `jwt.verify()` functie gebruikt om een JWT te verifiëren en te decoderen met behulp van de gegeven geheime sleutel. Als de verificatie en decodering succesvol is, worden de gegevens van de JWT weergegeven als een object. Als er een fout optreedt bij het verifiëren of decoderen van de token, wordt een foutmelding weergegeven. We hebben hierboven ondertekend en geverifieerd met een _secret_. Dit is normaal voldoende als je je tokens niet over meerdere websites wil delen. Je kan ook tekenen en verifiëren met een combinatie van een public en private key. Dat is handig wanneer de producent van het token niet de (enige) consument is. [VorigeJWT Tokens](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens) [VolgendeTokens veilig opslaan](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan) Laatst bijgewerkt 1 jaar geleden Kopiëren import * as jwt from 'jsonwebtoken'; const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'; const secret = 'my_secret_key'; try { let decoded = jwt.verify(token, secret); console.log(decoded); } catch (error) { console.error(error); } --- # Token Based Login | WebOntwikkeling 2025 We zullen ons nu baseren op de Session Based Login en deze omvormen tot een JWT Token Based Login systeem. Het eerste wat we moeten doen is uiteraard het installeren van de nodige packages. We zullen de `jsonwebtoken` package gebruiken om JWTs te maken, verifiëren en decoderen. Kopiëren npm install jsonwebtoken npm install --save-dev @types/jsonwebtoken We gaan nu niet meer gebruik maken van sessies om de user bij te houden maar gaan deze opslaan in de JWT token. We zullen de JWT token opslaan in een cookie. Dit is een veiligere manier om de token op te slaan dan in local storage. Daarom moeten we ook de `cookie-parser` package installeren. Kopiëren npm install cookie-parser npm install --save-dev @types/cookie-parser [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-aanmaken) JWT Token aanmaken --------------------------------------------------------------------------------------------------------------------------------------------- We zullen nu de JWT token aanmaken wanneer de user inlogt. We zullen de token opslaan in een cookie en deze terugsturen naar de client. In plaats van deze nu in de sessie op te slagen zullen we deze in de cookie opslagen. Uiteraard moeten we de nodige imports doen: Kopiëren import * as jwt from 'jsonwebtoken'; en maken we de volgende aanpassing in de POST `/login` route: Kopiëren const token = jwt.sign(user, process.env.JWT_SECRET!, { expiresIn: "7d" }); res.cookie("jwt", token, { httpOnly: true, sameSite: "lax", secure: true }); We geven hier aan dat de cookie enkel via http kan worden uitgelezen, dat de cookie enkel kan worden uitgelezen door de site waar deze is aangemaakt en dat de cookie enkel kan worden uitgelezen als de site via https wordt bezocht. Ook geven we aan dat de token 7 dagen geldig is (zoals in het voorbeeld van de sessie). We moeten de `JWT_SECRET` ook toevoegen aan de `.env` file: Kopiëren JWT_SECRET=75b1c9c99a5167b61951d3bdfb56880e156d55d3795da78235b74ea495d0a6efccac596e182dfc9a8e116b54d663d122aaded48631be87aebbb2aa9dc5e09805009f2e2e9459f1ff7d8331e1a6746dd2d19437c98000194037309b8fe53591cd930c1d14e2a97b27e3444359c3a99b1da8e53842317514e628f93863419b9022 Deze moet je uiteraard zelf genereren. Bijvoorbeeld via `https://jwtsecret.com/generate`. Deze moet minimum 32 karakters lang zijn. Vergeet ook niet de User uit het `session.ts` bestand te halen want deze gaan we niet meer gebruiken. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-verifieren) JWT Token verifiëren ------------------------------------------------------------------------------------------------------------------------------------------------- We moeten nu ook een aanpassing doen in de `secureMiddleware.ts` file. We gaan de JWT token verifiëren in plaats van de sessie te controleren. We zullen de token uit de cookie halen en deze verifiëren met de `jsonwebtoken` package. Om de jwt token te kunnen uitlezen moeten we de cookie parser middleware in de `index.ts` file nog instellen. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-verwijderen) JWT Token verwijderen --------------------------------------------------------------------------------------------------------------------------------------------------- We moeten ook de JWT token verwijderen wanneer de user uitlogt. Dit doen we door de cookie te verwijderen. Hou er rekening mee dat in principe de JWT token blijft gelden tot de expiry date is bereikt. Het verwijderen van de cookie is enkel om de user uit te loggen. De token blijft geldig tot de expiry date is bereikt. Als de gebruiker deze zou kopieren en plakken in een andere browser dan zou deze nog steeds kunnen inloggen. Het is daarom belangrijk om de expiry date van de token niet te lang te maken. [VorigeTokens veilig opslaan](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/tokens-veilig-opslaan) [VolgendeTesting](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing) Laatst bijgewerkt 8 maanden geleden * [JWT Token aanmaken](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-aanmaken) * [JWT Token verifiëren](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-verifieren) * [JWT Token verwijderen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login#jwt-token-verwijderen) Kopiëren import { NextFunction, Request, Response } from "express"; import * as jwt from "jsonwebtoken"; export function secureMiddleware(req: Request, res: Response, next: NextFunction) { const token: string | undefined = req.cookies?.jwt; if (!token) { console.log("No token found, redirecting to login"); return res.redirect("/login"); // or return a 401 Unauthorized response } jwt.verify(token, process.env.JWT_SECRET!, (err, user) => { if (err) { res.redirect("/login"); } else { console.log(user); res.locals.user = user; next(); } }); }; Kopiëren app.use(cookieParser()); Kopiëren router.post("/logout", secureMiddleware, async (req, res) => { res.clearCookie("jwt"); res.redirect("/login"); }); --- # Testing | WebOntwikkeling 2025 Testen van applicaties gebeurt op verschillende niveaus. Hoewel niet iedereen dezelfde niveaus van elkaar onderscheidt, maakt men in het algemeen een onderscheid tussen **unit testing** en **end-to-end testing**. Unit testing omvat het testen van individuele onderdelen van de code, zoals functies of methoden. Meestal wordt hier een white-box principe gehanteerd: de tester kent de inhoud van de unit en mag code schrijven die gebruik maakt van deze kennis. Typische frameworks voor unit testing van Express applicaties zijn Mocha en Jest. End-to-end testing omvat het testen "zoals een gebruiker". Deze vorm volgt het black-box principe. In essentie omvat dit het automatiseren van volledige browserinteracties. Typische frameworks zijn Cypress of Selenium. [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#jest) Jest -------------------------------------------------------------------------------------------- Jest is een testframework dat origineel ontwikkeld werd door Facebook. Het is een van de meest populaire testframeworks voor JavaScript. Jest is een all-in-one oplossing die zowel de testrunner als de assertion library bevat. Jest is zeer eenvoudig in gebruik en heeft een goede documentatie. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#installatie) Installatie Om Jest te installeren, voer je volgend commando uit: Kopiëren npm i --save-dev jest ts-jest @types/jest ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#configuratie) Configuratie Om Jest te kunnen gebruiken (met TypeScript), voer je dit commando uit: Kopiëren npx ts-jest config:init Om te zorgen dat je al je Jest-tests kan laten lopen met npm test, voeg je dit toe aan package.json: Kopiëren "scripts": { "test": "jest" } ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#node.js-testen) Node.js testen #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#basis) Basis Om een bepaalde functie te kunnen testen, moet je deze functie exporteren. Daarom is het belangrijk om zoveel mogelijk modules te gebruiken die je kan exporteren. Stel dat je een functie hebt die een string omzet naar hoofdletters in een bestand `string-utils.ts`: Om deze functie te testen, maak je een bestand `string-utils.test.ts`: `it` is een functie die een test definieert. De eerste parameter is een beschrijving van de test, de tweede parameter is een functie die de test uitvoert. Je kan ook `test` gebruiken in plaats van `it`. We kunnen nu de tests uitvoeren met `npm test`. We krijgen dan volgende output: Jammer genoeg is hier de tester hier niet in geslaagd om de bug te vinden. De functie `toUpperFunction` is namelijk niet correct. Als de input speciale tekens bevat zoals de duitse karacters met umlauten, dan zal de functie deze niet omzetten naar hoofdletters. De volgende test zou dit kunnen aantonen: Deze test zal falen. De correcte implementatie van de functie zou zijn: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#exceptions) Exceptions Als je een functie hebt die een exception kan gooien, kan je dit testen met `toThrow`: We kunnen deze nu testen met: Let op dat we hier een arrow functie gebruiken om de functie `calculateSquareRoot` op te roepen. Dit is nodig omdat we anders de exception niet zouden kunnen opvangen en de test zou falen. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#asynchronous-code) Asynchronous code Als je een functie hebt die asynchroon werkt, kan je dit testen met `async` en `await`: We kunnen deze nu testen met: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#test-setup-en-teardown) Test setup en teardown Als je bepaalde code wil uitvoeren voor en na elke test, kan je dit doen met `beforeEach`, `afterEach`, `beforeAll` en `afterAll`. Deze kunnen zich in de `describe` blokken bevinden of globaal in het bestand. Dit wordt gebruikt om bijvoorbeeld een database connectie te openen en te sluiten voor en na elke test. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#express-testen) Express testen Als we een Express applicatie willen testen, kunnen we gebruik maken van de `supertest` library. Deze library maakt het mogelijk om HTTP requests te versturen naar een Express applicatie en de response te testen. We moeten deze dan ook nog installeren: Stel dat we een Express applicatie hebben die een GET request afhandelt op de route `/hello`: Let wel op dat we nu wel de app moeten exporteren. Dit is nodig om de app te kunnen testen. We kunnen deze nu testen met: Als je deze test nu uitvoert met `npm test`, dan krijg je de volgende error: Om dit op te lossen kunnen we de app code in een apart bestand zetten en de code in `index.ts` aanpassen: en de rest van de code in `app.ts`: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#query-parameters) Query parameters Als je een route hebt die query parameters verwacht, kan je deze testen met: en de test: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#post-requests) POST requests Als je een route hebt die POST requests afhandelt, kan je deze testen met: en de test: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#html-responses) HTML responses Als je een route hebt die HTML responses teruggeeft, kan je deze testen met: en de test: of je kan de HTML parsen met `node-html-parser` en dan de inhoud van de h1 tag testen: ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#coverage) Coverage Jest kan ook gebruikt worden om de code coverage te berekenen. Dit is het percentage van de code dat door de tests gedekt wordt. Hoe hoger dit percentage, hoe beter je code getest is. Eerst moet je wel in je `package.json` de volgende lijn toevoegen bij de scripts. Nu kan je de coverage berekenen met `npm run coverage`. Je krijgt dan een overzicht van de coverage van je code. Je krijgt een uitgebreid overzicht van welke lijnen er wel en niet getest zijn. Dit kan je helpen om te zien welke delen van je code nog niet getest zijn en waar je nog extra tests moet schrijven. Je kan dit verslag vinden in de map `coverage/lcov-report/index.html`. ### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#mocking) Mocking Unit testen wordt vaak lastiger wanneer je code interageert met "de buitenwereld": filesystemen, databanken, invoer van de gebruiker, uitvoer naar de terminal, externe servers,... Om deze reden wordt vaak gebruik gemaakt van "mocks": waarden die de plaats innemen van onderdelen die het moeilijk maken om unit testen te schrijven. Deze leveren vooraf vastgelegde data af eerder dan de echte handelingen uit te voeren. Achteraf kunnen we ook controleren dat deze gebruikt zijn zoals verwacht. Dit past binnen het black box principe dat gehanteerd wordt voor unit testen. Jest bevat ingebouwde functionaliteit voor het maken van mocks. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#database) Database We hebben gekozen om onze database altijd in een aparte module te steken die onze collection exporteert. Dit maakt het makkelijk om deze te mocken. We gaan hierbij gebruik maken van de `spyOn` functie van Jest om de functies van de database module te mocken. De `spyOn` functie maakt een mock van de `find` functie van de `collection` module. We geven aan dat deze mock de `toArray` functie moet teruggeven met de waarde `mockPets`. We controleren dan of de `find` functie van de `collection` module aangeroepen is met de juiste parameters. #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#fetch) Fetch We gebruiken fetch om requests op externe services te doen. Omdat dit iets is dat je vaak wil mocken (om te vermijden dat netwerkstoringen testen doen falen, om te vermijden dat je API-limieten bereikt,...) is hier speciale ondersteuning voor. We installeren eerst fetch-mock-jest (als development dependency). De clientcode: De testcode: #### [](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#neveneffecten-vermijden) Neveneffecten vermijden Om te vermijden dat andere operaties die fs.readFile nodig hebben niet fout lopen, moeten we zorgen dat de mock enkel in deze testfunctie gebruikt wordt. Daarom voegen we in de testfile deze regel toe: Als we dit buiten de describe-blokken doen, gebeurt dit na elke test. [VorigeToken Based Login](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/jwt-tokens/token-based-login) [Volgende1\. Tooling](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo1) Laatst bijgewerkt 7 maanden geleden * [Jest](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#jest) * [Installatie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#installatie) * [Configuratie](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#configuratie) * [Node.js testen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#node.js-testen) * [Express testen](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#express-testen) * [Coverage](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#coverage) * [Mocking](https://apwt.gitbook.io/webontwikkeling-2025/security-and-testing/testing#mocking) Kopiëren export function toUpperFunction(input: string): string { let chars: string = ""; for (let char of input) { const code = char.charCodeAt(0); if (code >= 97 && code <= 122) { // Checking if the character is a lowercase letter chars += String.fromCharCode(code - 32); // Converting to uppercase } else { chars += char; // Adding non-lowercase characters unchanged } } return chars; } Kopiëren import { toUpperFunction } from "./string-utils"; describe("toUpperFunction", () => { it("should convert a string to uppercase", () => { expect(toUpperFunction("hello")).toBe("HELLO"); }); it("should not convert a string that is already uppercase", () => { expect(toUpperFunction("HELLO")).toBe("HELLO"); }); it("should not convert a string that is not a letter", () => { expect(toUpperFunction("123")).toBe("123"); }); }); Kopiëren PASS ./string-utils.test.ts toUpperFunction ✓ should convert a string to uppercase (2 ms) ✓ should not convert a string that is already uppercase ✓ should not convert a string that is not a letter Kopiëren it("should convert a string with umlauts to uppercase", () => { expect(toUpperFunction("äöü")).toBe("ÄÖÜ"); }); Kopiëren export function toUpperFunction(input: string): string { return input.toUpperCase(); } Kopiëren export function calculateSquareRoot(num: number): number { if (num < 0) { throw new Error("Cannot calculate the square root of a negative number."); } return Math.sqrt(num); } Kopiëren import { calculateSquareRoot } from "./math-utils"; describe("calculateSquareRoot", () => { it("should calculate the square root of a positive number", () => { expect(calculateSquareRoot(4)).toBe(2); }); it("should throw an error when calculating the square root of a negative number", () => { expect(() => calculateSquareRoot(-4)).toThrow("Cannot calculate the square root of a negative number."); }); }); Kopiëren export async function fetchUser(id: number): Promise { return new Promise((resolve, reject) => { setTimeout(() => { if (id === 1) { resolve("John Doe"); } else { reject(new Error("User not found")); } }, 1000); }); } Kopiëren import { fetchUser } from "./user-service"; describe("fetchUser", () => { it("should fetch a user by id", async () => { const user = await fetchUser(1); expect(user).toBe("John Doe"); }); it("should throw an error when the user is not found", async () => { try { await fetchUser(2); } catch (error: any) { expect(error.message).toBe("User not found"); } }); }); Kopiëren beforeAll(() => { console.log("Before all tests"); }); beforeEach(() => { console.log("Before each test"); }); afterEach(() => { console.log("After each test"); }); afterAll(() => { console.log("After all tests"); }); Kopiëren npm i --save-dev supertest @types/supertest Kopiëren import express from "express"; const app = express(); app.get("/hello", (req, res) => { res.send("Hello, world!"); }); app.listen(3000, () => { console.log("Server is running on http://localhost:3000"); }); export default app; Kopiëren import request from "supertest"; import app from "./index"; describe("GET /hello", () => { it("should return Hello, world!", async () => { const response = await request(app).get("/hello"); expect(response.status).toBe(200); expect(response.text).toBe("Hello, world!"); }); }); Kopiëren Jest did not exit one second after the test run has completed. 'This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue. Kopiëren import app from "./app"; app.listen(3000, () => { console.log("Server is running on http://localhost:3000"); }); Kopiëren import express from "express"; const app = express(); app.get("/hello", (req, res) => { res.send("Hello, world!"); }); export default app; Kopiëren app.get("/hello", (req, res) => { const name = req.query.name; res.send(`Hello, ${name}!`); }); Kopiëren describe("GET /hello", () => { it("should return Hello, world!", async () => { const response = await request(app).get("/hello").query({ name: "world" }); expect(response.status).toBe(200); expect(response.text).toBe("Hello, world!"); }); it("should return Hello, John!", async () => { const response = await request(app).get("/hello").query({ name: "John" }); expect(response.status).toBe(200); expect(response.text).toBe("Hello, John!"); }); }); Kopiëren app.post("/hello", (req, res) => { const name = req.body.name; res.send(`Hello, ${name}!`); }); Kopiëren describe("POST /hello", () => { it("should return Hello, world!", async () => { const response = await request(app).post("/hello").send({ name: "world" }); expect(response.status).toBe(200); expect(response.text).toBe("Hello, world!"); }); it("should return Hello, John!", async () => { const response = await request(app).post("/hello").send({ name: "John" }); expect(response.status).toBe(200); expect(response.text).toBe("Hello, John!"); }); }); Kopiëren app.get("/hello", (req, res) => { res.send("

Hello, world!

"); }); Kopiëren describe("GET /hello", () => { it("should return Hello, world!", async () => { const response = await request(app).get("/hello"); expect(response.status).toBe(200); expect(response.text).toBe("

Hello, world!

"); }); }); Kopiëren import { parse } from "node-html-parser"; describe("GET /hello", () => { it("should return Hello, world!", async () => { const response = await request(app).get("/hello"); expect(response.status).toBe(200); const root = parse(response.text); const h1 = root.querySelector("h1"); if (h1) { expect(h1.innerText).toBe("Hello, world!"); } }); }); Kopiëren "scripts": { "coverage": "jest --coverage" } Kopiëren app.get("/pets", async (req, res) => { let pets : Pet[] = await getPets(); res.render("pets", { pets }); }); Kopiëren import { collection, getPets } from "./database"; import request from "supertest"; import app from "./app"; test("that /pets calls the getPets function", async () => { const mockPets = [\ { name: "Fido", species: "dog" },\ { name: "Milo", species: "cat" },\ ]; const toArrayMock = jest.fn().mockResolvedValue(mockPets); const findMock = jest.spyOn(collection, 'find').mockImplementation(() => ({ toArray: toArrayMock }) as any); const response = await request(app).get("/pets"); expect(response.status).toBe(200); expect(findMock).toHaveBeenCalledWith({}); }); Kopiëren interface Pokemon { name: string, url: string, } app.get("/pokemon", async (req: Request, res: Response) => { const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=2"); const pokemon = (await response.json()).results as Pokemon[]; res.render("pokemon", { names: pokemon.map(({name}) => name) }); }); Kopiëren import fetchMock from 'fetch-mock-jest'; describe("pokemon", () => { it("Should display Pokemon names based on request result", async () => { const mockResponse = { results: [{ name: "squirtle" }, { name: "wartortle" }] }; // deze is automatisch gepatcht na de import fetchMock.get("https://pokeapi.co/api/v2/pokemon?limit=2", mockResponse); const response = await request(Server.getServer()).get('/pokemon'); expect(response.status).toBe(200); expect(response.text).toContain('
  • '); expect(response.text).toContain('squirtle'); expect(response.text).toContain('wartortle'); }) }); Kopiëren afterEach(() => jest.clearAllMocks()); --- # BMI Calculator Multi | WebOntwikkeling 2025 Maak een nieuw project aan in de `labo2` directory met de naam `bmi-calculator-multi`. We gaan de applicatie uitbreiden zodat we de BMI van meerdere personen kunnen berekenen. De gebruiker zal een lijst van personen moeten ingeven. Voor elke persoon zal hij zijn gewicht en lengte moeten ingeven. De applicatie zal vervolgens de BMI van elke persoon berekenen en tonen. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/bmi-calculator-multi#voorbeeld-interactie) Voorbeeld interactie -------------------------------------------------------------------------------------------------------------------------------- Kopiëren Geef het aantal personen in: 2 Geef de naam van persoon 1 in: Jan Geef het gewicht van Jan in (in kg): 80 Geef de lengte van Jan in (in m): 1.80 Jan heeft een BMI van 24.69 Geef de naam van persoon 2 in: Piet Geef het gewicht van Piet in (in kg): 90 Geef de lengte van Piet in (in m): 1.75 Piet heeft een BMI van 29.39 [VorigeBMI Calculator](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/bmi-calculator) [VolgendeInterest Calculator](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/interest-calculator) Laatst bijgewerkt 1 jaar geleden --- # 16. CRUD | WebOntwikkeling 2025 [Users CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/users-crud-express) [Pokedex](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express) [VorigePokemon Team Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pokemon-team-express) [VolgendeUsers CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/users-crud-express) Laatst bijgewerkt 1 jaar geleden --- # 14. Mongo Queries | WebOntwikkeling 2025 [Pet Shelter](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter) [Games DB](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db) [VorigePokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/pokemon-team) [VolgendePet Shelter](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter) Laatst bijgewerkt 1 jaar geleden --- # 18. Session based login | WebOntwikkeling 2025 [Login Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/login-express) [Pokedex Express Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/pokedex-express-sessions) [VorigeView Counter Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-sessions) [VolgendeLogin Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/login-express) Laatst bijgewerkt 1 jaar geleden --- # 10. Post Request | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10#theorie) Theorie ---------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [POST requests](https://apwt.gitbook.io/webontwikkeling-2025/express.js/requests/post-request) * [Response](https://apwt.gitbook.io/webontwikkeling-2025/express.js/response) [VorigeSteam](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/steam) [VolgendePet Shelter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/petshelter-form) Laatst bijgewerkt 1 jaar geleden --- # 15. Mongo + Express | WebOntwikkeling 2025 [Pet Shelter Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pet-shelter-express) [Guestbook Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/guestbook-express) [Pokemon Team Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pokemon-team-express) [VorigeGames DB](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db) [VolgendePet Shelter Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pet-shelter-express) Laatst bijgewerkt 1 jaar geleden --- # 12. Herhaling | WebOntwikkeling 2025 [Twitter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter) [Word Guess](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess) [VorigeRate Limiter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/rate-limiter-middleware) [VolgendeTwitter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter) Laatst bijgewerkt 1 jaar geleden --- # 19. Token based login | WebOntwikkeling 2025 [JWT Sign](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/jwt-sign) [Login Express JWT](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/login-express-jwt) [VorigePokedex Express Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/pokedex-express-sessions) [VolgendeJWT Sign](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/jwt-sign) Laatst bijgewerkt 1 jaar geleden --- # Voorbereiding (devcontainer + github) | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/project/dev-container#github-opzetten) Github opzetten ----------------------------------------------------------------------------------------------------------- Je kan deze workflow ook gebruiken voor andere projecten die node.js. Uiteraard moet je dan wel zelf je eigen repository aanmaken op github. 1. Maak een nieuwe repository aan op Github aan de hand van de [Github Classroom link](https://classroom.github.com/a/metduUT7) . 2. Clone de repository in een container volume. (ctrl-shift-p -> `Remote-Containers: Clone Repository in Container Volume...`) 3. Kies `main` als branch 4. Als er gevraagd wordt achter de container template: Kies `Node JS & Typescript` 5. Als er gevraagd wordt welke versie van Node JS je wil gebruiken: Kies `20-bullseye` 6. Als er gevraagd wordt welke extra features je wil installeren: Kies dan `ts-node` 7. Vervolgens zal de devcontainer worden opgestart en kan je beginnen met het project. Kijk zeker na dat je een bestand kan pushen naar de repository. Je kan nakijken of alles correct is ingesteld door het bestand `.devcontainer/devcontainer.json` te openen. Hierin zou je volgende code moeten zien: [VorigeHogwarts Express CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud) [VolgendeSemester 2](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2) Laatst bijgewerkt 3 maanden geleden Kopiëren // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node { "name": "Node.js & TypeScript", // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye", "features": { "ghcr.io/devcontainers-contrib/features/ts-node:1": {} } // Features to add to the dev container. More info: https://containers.dev/features. // "features": {}, // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", // Configure tool-specific properties. // "customizations": {}, // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } --- # 4. Interfaces & functies | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Interfaces](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/nodejs-+-typescript/type-systeem/interfaces.md) * [Functions](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/nodejs-+-typescript/type-systeem/functions.md) [VorigeTick Tac Toe](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/tic-tac-toe) [VolgendeInterfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces) Laatst bijgewerkt 1 jaar geleden --- # Extra oefeningen | WebOntwikkeling 2025 [DNA Match](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/dna-match) [View Counter](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter) [Hogwarts Express CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud) [VorigeBeerster](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster) [VolgendeDNA Match](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/dna-match) Laatst bijgewerkt 1 jaar geleden --- # 17. Session & Cookies | WebOntwikkeling 2025 [Shopping Cookie](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/shopping-cookie) [View Counter Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-cookies) [View Counter Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-sessions) [VorigePokedex](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express) [VolgendeShopping Cookie](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/shopping-cookie) Laatst bijgewerkt 1 jaar geleden --- # Semester 2 | WebOntwikkeling 2025 [Milestone 1 - Terminal App](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app) [Milestone 2 - Express](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express) [Milestone 3 - MongoDB](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb) [Milestone 4 - Security](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-4-security) [VorigeVoorbereiding (devcontainer + github)](https://apwt.gitbook.io/webontwikkeling-2025/project/dev-container) [VolgendeMilestone 1 - Terminal App](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app) --- # 21. Herhaling | WebOntwikkeling 2025 [Youtube Favorites](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/youtube-playlists) [Beerster](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster) [VorigePet Shelter Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/pet-shelter-express-test) [VolgendeYoutube Favorites](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/youtube-playlists) Laatst bijgewerkt 1 jaar geleden --- # 13. Mongo Basics | WebOntwikkeling 2025 Theorie Bekijk voor het labo aan te vangen eerst de volgende topics: * [Wat is MongoDB?](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/mongodb/wat-is-mongodb.md) * [MongoDB driver](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/mongodb/mongodb-driver.md) * [Insert](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/mongodb/insert.md) * [Find](https://github.com/similonap/webontwikkeling-2024/blob/main/labos/mongodb/find.md) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#labo-voorbereidingen) Labo voorbereidingen ------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#cloud-mongodb-atlas) Cloud MongoDB (Atlas) #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#id-1.-maak-een-account-aan) 1\. Maak een account aan Ga naar [https://cloud.mongodb.com/](https://cloud.mongodb.com/) en maak een account aan. Na het maken van een account log in via je nieuwe account. Maak vervolgens een nieuwe **Shared Cluster** (is volledig gratis) aan\*\*.\*\* Kies **AWS**, kies dan als regio: **eu-west-1** in ireland of **eu-central-1** in frankfurt en geef je cluster een naam. Klik vervolgens op **Create Cluster** **Het aanmaken van je cluster kan tot 5 minuten duren! Hou hier rekening mee** #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#id-2.-stel-je-security-settings-in) 2\. Stel je security settings in Ga terug naar het overzicht van de clusters en klik op **connect** en bij **Whitelist a connection IP address** kies je Add different ip address. Geef daar `0.0.0.0` in. Als je dit niet vindt, ga links naar **Network Access** en voeg 0.0.0.0 toe als IP adres. #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#id-3.-maak-een-mongodb-gebruiker-aan) 3\. Maak een MongoDB gebruiker aan Vervolgens maak je een nieuwe MongoDB gebruiker aan in **Create a MongoDB User.** Zorg ervoor dat het paswoord kan gedeeld worden met ons zodat we ook toegang tot de database hebben. Als je dit niet vindt, ga links naar **Database Access** en voeg een user toe. #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#id-4.-haal-jouw-connection-string-op) 4\. Haal jouw connection string op Ga dan verder door op **Choose a connection method** (of connect) te klikken. Je kan hier twee connection strings vinden: * Een voor de MongoDB extensie in vscode * Een voor de MongoDB driver voor node js Deze zijn iets verschillend van elkaar. Let op dat je hier uiteraard je eigen username en paswoord in geeft. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FMyDITlsicw1zYM0p1whX%252Fmongoconnect.gif%3Falt%3Dmedia%26token%3D31ed9a0b-496f-49ff-9086-f06eba8dae72&width=768&dpr=4&quality=100&sign=5033674f&sv=2) #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#id-5.-verbinding-uitproberen) 5\. Verbinding uitproberen Gebruik de connection string om via de extensie in vscode te verbinden met deze mongodb database. [VorigeWord Guess](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess) [VolgendeGuestbook](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook) Laatst bijgewerkt 9 maanden geleden * [Labo voorbereidingen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#labo-voorbereidingen) * [Cloud MongoDB (Atlas)](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13#cloud-mongodb-atlas) --- # 11. Router en Middleware | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11#theorie) Theorie ---------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Router](https://apwt.gitbook.io/webontwikkeling-2025/express.js/router) * [Middleware](https://apwt.gitbook.io/webontwikkeling-2025/express.js/middleware) [VorigeContact Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/contact-form) [VolgendeRouter Combi](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/router-combi) Laatst bijgewerkt 1 jaar geleden --- # 7. Express | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Basis Express](https://apwt.gitbook.io/webontwikkeling-2025/express.js/basis) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#hello-express) Hello Express [Hello Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/hello-express) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#dadjoke-express) DadJoke Express [DadJoke Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/dadjoke-express) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#bitcoin-current) Bitcoin Current [Bitcoin current](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/bitcoin-current) [VorigeRainbow Chalk](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/rainbow-chalk) [VolgendeHello Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/hello-express) Laatst bijgewerkt 10 maanden geleden * [Theorie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#theorie) * [Hello Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#hello-express) * [DadJoke Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#dadjoke-express) * [Bitcoin Current](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7#bitcoin-current) --- # 9. Get Request | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Requests](https://apwt.gitbook.io/webontwikkeling-2025/express.js/requests) * [GET requests](https://apwt.gitbook.io/webontwikkeling-2025/express.js/requests/get-request) [VorigeNewspaper](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/newspaper) [VolgendeHello Query](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/hello-query) Laatst bijgewerkt 1 jaar geleden --- # 8. EJS + Static | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [EJS](https://apwt.gitbook.io/webontwikkeling-2025/express.js/ejs) * [Static Files](https://apwt.gitbook.io/webontwikkeling-2025/express.js/statische-bestanden) [VorigeBitcoin current](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/bitcoin-current) [VolgendeHello Express EJS](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/hello-express-ejs) Laatst bijgewerkt 1 jaar geleden --- # 20. Testing | WebOntwikkeling 2025 [Math Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-test) [String Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/string-test) [Math Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-express-test) [Form Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/form-express-test) [Pet Shelter Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/pet-shelter-express-test) [VorigeLogin Express JWT](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/login-express-jwt) [VolgendeMath Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-test) Laatst bijgewerkt 1 jaar geleden --- # 3. Arrays | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Basis types](https://apwt.gitbook.io/webontwikkeling-2025/nodejs-+-typescript/type-systeem/basic-types) (any, undefined, null, union types) * [Arrays](https://apwt.gitbook.io/webontwikkeling-2025/nodejs-+-typescript/type-systeem/arrays) * [Input Lezen](https://apwt.gitbook.io/webontwikkeling-2025/nodejs-+-typescript/input-lezen) (menu) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefeningen) Oefeningen --------------------------------------------------------------------------------------- ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-som-van-getallen) Oefening: Som van getallen [Som van getallen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/som-van-getallen) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-puntenboek) Oefening: Puntenboek [Puntenboek](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/puntenboek) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-rot13) Oefening: Rot13 [Rot13](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/rot13) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-pokemon-team) Oefening: Pokemon team [Pokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/pokemon-team) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-todo-list) Oefening: Todo list [Todo List String](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/todo-list-string) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-tic-tac-toe) Oefening: Tic Tac Toe [Tick Tac Toe](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/tic-tac-toe) [VorigeText Box](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/text-box) [VolgendeSom van getallen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/som-van-getallen) Laatst bijgewerkt 1 jaar geleden * [Theorie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#theorie) * [Oefeningen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefeningen) * [Oefening: Som van getallen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-som-van-getallen) * [Oefening: Puntenboek](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-puntenboek) * [Oefening: Rot13](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-rot13) * [Oefening: Pokemon team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-pokemon-team) * [Oefening: Todo list](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-todo-list) * [Oefening: Tic Tac Toe](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3#oefening-tic-tac-toe) --- # 6. Modules en NPM Packages | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Modules](https://apwt.gitbook.io/webontwikkeling-2025/nodejs-+-typescript/modules) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#math-module) Math Module [Math Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/math-module) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#export-interfaces) Export interfaces [Export Interfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/export-interfaces) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#cowsay-module) Cowsay Module [Cowsay Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cowsay-module) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#cat-gpt) Cat GPT [Cat GPT](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cat-gpt) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#rainbow-chalk) Rainbow Chalk [Rainbow Chalk](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/rainbow-chalk) [VorigeUnix Timestamp API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/unix-timestamp-api) [VolgendeMath Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/math-module) Laatst bijgewerkt 1 jaar geleden * [Theorie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#theorie) * [Math Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#math-module) * [Export interfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#export-interfaces) * [Cowsay Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#cowsay-module) * [Cat GPT](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#cat-gpt) * [Rainbow Chalk](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6#rainbow-chalk) --- # 5. Async & fetch | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#theorie) Theorie --------------------------------------------------------------------------------- Bekijk voor het labo aan te vangen eerst de volgende topics: * [Asynchroon programmeren](https://apwt.gitbook.io/webontwikkeling-2025/nodejs-+-typescript/asynchroon-programmeren) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#todo-list-fetch) Todo List Fetch [Todo List Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/todo-list-fetch) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#bitcoin-api) Bitcoin-API [Bitcoin API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/bitcoin-api) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#slowsum) slowSum [Slow Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#fakefetch) fakeFetch [Fake Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/fake-fetch) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#promise-all) **Promise All** [Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/promise-all) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#unix-timestamp-api) Unix Timestamp API [Unix Timestamp API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/unix-timestamp-api) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#cocktails-promise-all) **Cocktails Promise All** [Cocktails Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-promise-all) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#cocktails-api) **Cocktails-API** [Cocktails API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-api) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#joke-api) Joke API [Joke API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/joke-api) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#school-api) School API [School API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/school-api) [VorigeAt Least Two](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/at-least-two) [VolgendeFake Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/fake-fetch) Laatst bijgewerkt 10 maanden geleden * [Theorie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#theorie) * [Todo List Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#todo-list-fetch) * [Bitcoin-API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#bitcoin-api) * [slowSum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#slowsum) * [fakeFetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#fakefetch) * [Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#promise-all) * [Unix Timestamp API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#unix-timestamp-api) * [Cocktails Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#cocktails-promise-all) * [Cocktails-API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#cocktails-api) * [Joke API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#joke-api) * [School API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5#school-api) --- # Interest Calculator | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `interest-calculator`. We gaan in deze oefening een interest calculator maken. De gebruiker zal een bedrag en een interest percentage moeten ingeven. De applicatie zal vervolgens het bedrag na 1 jaar, 2 jaar en 5 jaar tonen. Het totaal bedrag kan berekend worden met de volgende formule: Totaal\=bedrag×(1+interest100)jarenTotaal = bedrag \\times (1 + \\frac{interest}{100})^jarenTotaal\=bedrag×(1+100interest​)jaren [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/interest-calculator#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------------- Kopiëren Geef het bedrag in: 1000 Geef het interest percentage in: 5 Na 1 jaar heb je 1050 Na 2 jaar heb je 1102.5 Na 5 jaar heb je 1276.28 [VorigeBMI Calculator Multi](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/bmi-calculator-multi) [VolgendeUren en Minuten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/uren-en-minuten) Laatst bijgewerkt 1 jaar geleden --- # Hello Query | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `hello-query` en installeer de `express` en de `ejs` module. Maak een nieuwe route aan op de root van de applicatie die een `GET` request afhandelt. De route verwacht een query parameter `language` die een string bevat. Deze string kan een van de volgende waarden bevatten: `en`, `es` of `fr` (Engels, Spaans of Frans). Als de query parameter niet aanwezig is, of een andere waarde bevat, dan wordt de standaard waarde `en` gebruikt. De route rendert een EJS template die de volgende boodschap toont, afhankelijk van de waarde van de query parameter: * `en`: "Hello World!" * `es`: "¡Hola Mundo!" * `fr`: "Bonjour le monde!" De template bevat een HTML pagina met een `h1` element waarin de boodschap wordt getoond. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6cce88f74f327b48b2a564fe28930f140748cd27%252Fhelloworld.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=99e9521f&sv=2) alt text ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-924600d58d11e03e78707789cf1dd60a2e135dc0%252Fbonjour.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=59ce7ed5&sv=2) alt text [Vorige9\. Get Request](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9) [VolgendeMath Service](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/math-service-express) Laatst bijgewerkt 1 jaar geleden --- # Pet Shelter | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `petshelter-form` en installeer de `express` en de `ejs` module. Maak een nieuw formulier met een invoer veld voor een naam en een dropdown voor een soort dier. De dropdown bevat drie dieren: cat, dog en rabbit. Het formulier bevat ook een submit knop. Als het formulier wordt ingediend, wordt een `POST` request naar dezelfde route gestuurd. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-1e42eefb954f33d861844718e901d3cda465a35f%252Fform.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=a2fe08cf&sv=2) formulier Als het formulier correct werd ingevuld wordt er willekeurig een foto van een dier gekozen met de vermelding `Hey {name}, we have a {type} for you!` waar uiteraard `{name}` en `{type}` worden vervangen door de waarden die de gebruiker heeft ingevuld. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-2595b325c62b80004ec52b87fb4d14909a7c879c%252Fform-response.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=cbbac78d&sv=2) Form response Je moet geen input validatie doen voor dit formulier. Je kan de afbeeldingen van de dieren vinden in deze [zip file](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/express/petshelter-form/animals.zip) . Je kan de afbeeldingen in de map `public/images` plaatsen. **Tips:** * Je hebt twee routes nodig voor dit formulier: een `GET` route om het formulier te tonen en een `POST` route om het formulier te verwerken. Ze mogen allebei dezelfde URL hebben. * Je kan een getal tussen 1 en 5 genereren om een willekeurige afbeelding te kiezen. Je kan hiervoor de `Math.random` functie gebruiken. Alle afbeeldingen hebben een naam van de vorm `{type}{number}.png` waar `{type}` een van de drie dieren is en `{number}` een getal tussen 1 en 5. Dus bv. `cat3.png` of `dog1.png`. * Gebruik twee verschillende ejs bestanden: een voor het formulier en een voor de response. [Vorige10\. Post Request](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10) [VolgendeRedirect Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/redirect-form) Laatst bijgewerkt 1 jaar geleden --- # Users CRUD | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `users-crud-express` en installeer de `express` en `mongodb` package. We gaan een kleine CRUD applicatie maken die data gebruikt afkomstig van `https://jsonplaceholder.typicode.com/users`. In het begin van de applicatie worden al deze `users` ingelezen en opgeslagen in een MongoDB database. Vanaf de data in de database zit moet je dus geen requests meer doen naar de externe API. * Zorg ervoor dat bij het opstarten van de express applicatie een verbinding wordt opgezet met de MongoDB database. En zorg ervoor dat deze verbinding wordt afgesloten bij het afsluiten van de applicatie. * Maak gebruik van een aparte `database.ts` module om al je database gerelateerde code in te plaatsen. * Voorzie de volgende routes: * `GET /users`: Toont een lijst van alle users. * `GET /users/create`: Toont een formulier om een nieuwe user toe te voegen. * `POST /users/create`: Voegt een nieuwe user toe aan de database. * `GET /users/:id/update`: Toont een formulier om een bestaande user aan te passen. * `POST /users/:id/update`: Past een bestaande user aan in de database. * `POST /users/:id/delete`: Verwijdert een user uit de database. * Zorg ervoor dat je een gebruiker kan verwijderen door op een knop te klikken in de lijst van users. * Zorg ervoor dat je een gebruiker kan aanpassen door op een knop te klikken in de lijst van users. * zorg ervoor dat je een gebruiker kan toevoegen door op de `create` button te klikken. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-e7fb4b39624333253e486656006e49f2f788b8a9%252Fusers-crud.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=b71eda70&sv=2) users-crud [Vorige16\. CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud) [VolgendePokedex](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express) Laatst bijgewerkt 1 jaar geleden --- # Pet Shelter Express | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `pet-shelter-express` en installeer de `express` en `mongodb` package. We starten van de database die we gemaakt hebben in de vorige [opgave](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter) . We gaan nu een express applicatie maken die gebruik maakt van deze database. * Zorg ervoor dat bij het opstarten van de express applicatie een verbinding wordt opgezet met de MongoDB database. En zorg ervoor dat deze verbinding wordt afgesloten bij het afsluiten van de applicatie. * Maak gebruik van een aparte `database.ts` module om al je database gerelateerde code in te plaatsen. * Maak een `/pets` route aan die alle pets toont in de database. Gebruik hiervoor een aparte `pets.ejs` view. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-668cc8cb9992ff87e4eb1a0f2b3c4fc65838e6cd%252Fpets.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=58b39bd0&sv=2) alt text * Maak een `/pets/:type` route aan die alle pets toont in de database van een bepaald type. Herbruik de `pets.ejs` view. `/pets/dog` toont alle honden, `/pets/cat` toont alle katten, ... * Maak een `/pets/sort` route aan die alle pets toont in de database gesorteerd op een bepaald veld. Gebruik hiervoor een aparte `pets.ejs` view. Je kan het veld meegeven via een query parameter `field`. Mogelijke waarden voor `field` zijn `name`, `type` en `age`. De default waarde is `name`. Herbruik de `pets.ejs` view. * Maak een `/pets/ageBetween` route aan die alle pets toont in de database met een leeftijd tussen een minimum en een maximum. Je kan een `min` en een `max` parameter meegeven via de query string. Herbruik de `pets.ejs` view. Als er geen `min` en `max` parameter meegegeven worden, dan worden alle pets getoond. * Maak een `/pets/search` route aan die alle pets toont in de database waarvan de naam, type of breed overeenkomt met een bepaalde zoekterm. Je kan een `search` parameter meegeven via de query string. Gebruik hier een nieuwe `search.ejs` view voor waar je ook een zoekterm kan ingeven aan de hand van een formulier. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-fd499856fc6ccc48ae555e98a8c35d8d94cb8714%252Fpetssearch.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=faa35a7e&sv=2) alt text * Zorg ervoor dat de connection string in een `.env` bestand staat. [Vorige15\. Mongo + Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express) [VolgendeGuestbook Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/guestbook-express) Laatst bijgewerkt 1 jaar geleden --- # Math Module | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `math-module`. Maak een nieuwe file aan met de naam `math.ts`. In deze file maak je een module aan met de naam `MathModule`. Deze module bevat de volgende functies: * `add(a: number, b: number): number` - Deze functie accepteert twee getallen en geeft de som van deze getallen terug. * `subtract(a: number, b: number): number` - Deze functie accepteert twee getallen en geeft het verschil van deze getallen terug. * `multiply(a: number, b: number): number` - Deze functie accepteert twee getallen en geeft het product van deze getallen terug. * `divide(a: number, b: number): number` - Deze functie accepteert twee getallen en geeft het resultaat van de deling van deze getallen terug. Exporteer deze functies en importeer deze in een nieuwe file met de naam `index.ts`. In deze file maak je gebruik van de functies die je hebt geëxporteerd. Test of de functies werken door de resultaten van de functies te loggen naar de console. [Vorige6\. Modules en NPM Packages](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6) [VolgendeExport Interfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/export-interfaces) Laatst bijgewerkt 9 maanden geleden --- # Pokedex Express Sessions | WebOntwikkeling 2025 We gaan verder op de code van [Pokedex Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express) en voegen sessions toe. In plaats van de player bij te houden in de URL via path parameters gaan we nu een sessie gebruiker om het player object bij te houden (met bijbehorende pokemon). Zo veranderd er wel wat aan de structuur van de applicatie en de routes. De routes zullen er als volgt uitzien: * GET `/`: Toont de startpagina met een lijst van alle spelers. * POST `/createPlayer`: Maakt een nieuwe speler aan met de naam uit de request body. * GET `/login/:id`: Logt een speler in door hun ID. Een sessie wordt aangemaakt en de gebruiker wordt doorgestuurd naar het menu. * GET `/menu`: Toont het menu van de speler. * GET `/pokemon`: Toont een lijst van Pokémon van de speler en de mogelijkheid om een Pokémon toe te voegen. * POST `/add/:pokeId`: Voegt een Pokémon toe aan de speler's collectie. * POST `/delete/:pokeId`: Verwijdert een Pokémon uit de speler's collectie. * POST `/exit`: Beëindigt de sessie van de speler. Je merkt op dat er nu nergens nog een player ID in de URL staat buiten uiteraard in de login route. Dit is omdat we nu de speler bijhouden in de sessie. Dit is een veel veiligere manier om data bij te houden dan in de URL. Gebruik een middleware om te controleren of er een player object zich in de sessie bevindt. Als dit niet het geval is, stuur de gebruiker terug naar de startpagina. [VorigeLogin Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/login-express) [Volgende19\. Token based login](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login) Laatst bijgewerkt 1 jaar geleden --- # School API | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `school-api`. We gaan in deze oefening een API gebruiken die het mogelijk maakt om alle hogescholen en universiteiten op te vragen van een bepaald land. De API die we hiervoor gaan gebruiken is http://universities.hipolabs.com/search?country=Netherlands (vervang `Netherlands` door het land dat je wil opvragen). De gebruiker krijgt eerst een keuze menu te zien met de landen waarvoor er data beschikbaar is. De landen mag je hardcoden in je applicatie. Vervolgens krijgt de gebruiker een lijst te zien van alle hogescholen en universiteiten van het gekozen land. Je mag zelf kiezen hoe je deze data toont aan de gebruiker. Na het tonen van de data wordt de gebruiker gevraagd of hij nog een land wil opvragen. Als de gebruiker `ja` antwoordt, wordt de gebruiker opnieuw gevraagd om een land te kiezen. Als de gebruiker `nee` antwoordt, wordt de applicatie afgesloten. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/school-api#voorbeeldinteractie) Voorbeeldinteractie: --------------------------------------------------------------------------------------------------------------------- Kopiëren [1] France [2] Netherlands [3] United Kingdom [4] Belgium [5] luxembourg [6] Ireland [7] Spain [8] Portugal [0] CANCEL Which country would you like to list its Colleges with high school education degrees? [1...8 / 0]: 2 Colleges in Netherlands: University of Sint Eustatius School of Medicine International University School of Medicine (IUSOM) St.James's School of Medicine, Bonaire University of the Netherlands Antilles, Curacao Dutch Delta University De Haagse Hogeschool Erasmus University Rotterdam Rotterdam School of Management European Open University Fontys University of Applied Sciences Foundation University Hanze University Groningen Hogeschool voor de Kunsten Utrecht (HKU) Hotelschool The Hague ... [VorigeJoke API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/joke-api) [VolgendeCocktails API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-api) Laatst bijgewerkt 1 jaar geleden --- # Wisselgeld | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `wisselgeld`. We gaan in deze oefening een programma maken dat een bedrag moet omzetten naar het kleinste aantal briefjes en munten. De gebruiker zal een bedrag moeten ingeven en de applicatie zal vervolgens het aantal briefjes en munten tonen. Je kan dit doen door gebruik te maken van de modulo operator. Deze operator geeft de rest van een deling terug. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/wisselgeld#voorbeeld-interactie) Voorbeeld interactie ---------------------------------------------------------------------------------------------------------------------- Kopiëren Geef het bedrag in: 123 Dit is 1 briefje van 100, 1 briefje van 20, 1 munt van 2 en 1 munt van 1 [VorigeUren en Minuten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/uren-en-minuten) [VolgendeName from Email](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/name-from-email) Laatst bijgewerkt 1 jaar geleden --- # Redirect Form | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `redirect-form` en installeer de `express` en de `ejs` module. Maak een nieuwe route aan op `/` van de applicatie die een `GET` request afhandelt. De route rendert een EJS template met een formulier. Het formulier bevat een input veld met de naam `url`. Het formulier bevat ook een submit knop. Als het formulier wordt ingediend, wordt een `POST` request naar dezelfde route gestuurd. Als de gebruiker een URL invult en het formulier indient, wordt de gebruiker geredirect naar de ingevulde URL (aan de hand van `res.redirect`). Als de gebruiker geen URL invult wordt de gebruiker naar een zelf te kiezen URL geredirect (bv google.com). ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-540a5082fbedb94b83e78ea844075e8ec980c98f%252Furlform.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=620e6685&sv=2) reddit Probeer hetzelfde te doen met een url die je kiest uit een dropdown list (bv. google.com, reddit.com, microsoft.com, ...). ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-f70c8b0f19a92d1f8bcd2441521f2d033498b4f1%252Fselect.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=836dd5d9&sv=2) alt text [VorigePet Shelter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/petshelter-form) [VolgendeContact Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/contact-form) Laatst bijgewerkt 1 jaar geleden --- # Hello Express | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `helloExpress` en installeer express volgens de instructies in de theorie les. We bouwen in deze oefening onze eerste **express** applicatie. Hier onder vind je een overzicht over alle routes die deze applicatie moet aanbieden en wat ze allemaal moeten doen. In deze oefening is het nog niet de bedoeling om EJS te gebruiken. We gaan enkel HTML pagina's of json terugsturen. **http://localhost:3000** * Zorg dat `localhost:3000` een html pagina stuurt waarin je een header met de titel van jouw applicatie (kies zelf iets) met een kleine paragraaf die een beschrijving geeft. **http://localhost:3000/whoami & http://localhost:3000/whoamijson** * Maak een globale variabele aan `thisisme` die een object bevat met 3 properties: * `name` * `age` * `profilePic` De `profilepic` property bevat een url van een foto van jezelf. De foto moet je in de public folder zetten. * Zorg dat `localhost:3000/whoami` een HTML pagina toont met: * de zin "My name is _XXX_ and I am _YYY_ years old" met XXX en YYY de waarden van de properties van de `thisisme` variabel en * de foto uit profilePic * Zorg dat `localhost:3000/whoamijson` de inhoud van `thisisme` stuurt als JSON. **http://localhost:3000/pikachujson & http://localhost:3000/pikachuhtml** * Doe een API call naar [https://pokeapi.co](https://pokeapi.co/) om de data van Pikachu op te halen en steek die in een globale variabel `pikachu`. * Zorg dat `localhost:3000/pikachujson` de data van `pikachu` als JSON terugstuurt * Zorg dat `localhost:3000/pikachuhtml` een mooie pikachu HTML pagina toont. Deze moet de volgende zaken zeker bevatten: * de naam * id * gewicht * een image van Pikachu's voorkant (zie sprites) * een image van Pikachu's achterkant (zie sprites) **http://localhost:3000/randomcolor** * Deze route toont elke keer dat je deze pagina bezoekt een andere kleur. * Zoek zelf uit hoe je een willekeurige kleur kan berekenen. Probeer zelf eerst iets in elkaar te steken voor je begint te googlen hoe het moet. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-ab31b2ebe15c76da33087757a96a7cd9db71b61d%252Frandomcolor.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8c93c41c&sv=2) **Foutafhandeling** Zorg voor een eigen ontworpen 404 pagina die getoond wordt als de gebruiker een route probeert te bezoeken die niet bestaat. [Vorige7\. Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7) [VolgendeDadJoke Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/dadjoke-express) Laatst bijgewerkt 1 jaar geleden --- # Maaltafels | WebOntwikkeling 2025 Maak een nieuw project **maaltafels** waarin je jouw bronbestanden voor deze oefening kan plaatsen. Installeer alle nodige libraries voor te werken met express en ejs. Maak een nieuw bestand `index.ts` aan met de volgende inhoud: Kopiëren import express from "express"; const app = express(); app.set("port",3000); app.set("view engine", "ejs"); app.get("/", (req,res) => { res.render("maaltafels"); }) app.listen(app.get("port"), () => { console.log(`Web application started at http://localhost:${app.get("port")}`) }); Maak nu een nieuwe ejs file aan die de maaltafels van 1 tot en met 10 toont in je browser als je surft naar http://localhost:3000 Je mag geen aanpassingen maken in de `index.ts` file. Het opbouwen van de tabel moet volledig gebeuren in het ejs bestand. **De output in de browser moet er als volgt uitzien:** ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-f8d8ca49ff0d2ed617ce58a9736e2ff1f6ebae24%252Fmaaltafels.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4876feb8&sv=2) [VorigeCat Static](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/catstatic) [VolgendeNewspaper](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/newspaper) Laatst bijgewerkt 1 jaar geleden --- # Puntenboek | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `puntenboek`. We willen een programma maken dat de punten van een aantal studenten bijhoudt. De gebruiker geeft de punten van de studenten op 20 in. Als de gebruiker geen punten meer wil ingeven dan geeft hij een lege string in. Het programma zal dan het gemiddelde van de punten tonen. Het geeft ook het aantal studenten dat een onvoldoende heeft (minder dan 10 punten). [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/puntenboek#voorbeeld-interactie) Voorbeeld interactie ---------------------------------------------------------------------------------------------------------------------- Kopiëren Geef de punten van student 1 in: 5 Geef de punten van student 2 in: 6 Geef de punten van student 3 in: 10 Geef de punten van student 4 in: Het gemiddelde van de punten is 6 Het aantal studenten met een onvoldoende is 2 [VorigeSom van getallen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/som-van-getallen) [VolgendeRot13](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/rot13) Laatst bijgewerkt 1 jaar geleden --- # Som van getallen | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `som-van-getallen`. We willen een programma maken dat de som van een aantal getallen berekent. De gebruiker zal eerst moeten ingeven hoeveel getallen hij wil optellen. Vervolgens zal hij de getallen moeten ingeven. Het programma zal dan de som van de getallen tonen. De getallen moeten opgeslagen worden in een array. Je mag een for loop gebruiken om de som te berekenen. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/som-van-getallen#voorbeeld-interactie) Voorbeeld interactie ---------------------------------------------------------------------------------------------------------------------------- Kopiëren Hoeveel getallen wil je optellen? 3 Geef getal 1 in: 5 Geef getal 2 in: 3 Geef getal 3 in: 7 De som van de getallen is 15 [Vorige3\. Arrays](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3) [VolgendePuntenboek](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/puntenboek) Laatst bijgewerkt 1 jaar geleden --- # Text Box | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `text-box`. We gaan in deze oefening een programma maken dat een tekst moet tonen in een text-box. De gebruiker zal een tekst moeten ingeven en de applicatie zal vervolgens de tekst tonen in een text-box. Hij zal de gebruiker blijven vragen om een tekst in te geven tot de gebruiker een lege tekst ingeeft. Je kan dit doen door gebruik te maken van de `console.log` functie en de `repeat` functie van een string. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/text-box#voorbeeld-interactie) Voorbeeld interactie -------------------------------------------------------------------------------------------------------------------- Kopiëren Geef de tekst in: Hello World +-------------+ | Hello World | +-------------+ Geef de tekst in: Hey broer +-----------+ | Hey broer | +-----------+ Geef de tekst in: Tot ziens! [VorigeName from Email](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/name-from-email) [Volgende3\. Arrays](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3) Laatst bijgewerkt 1 jaar geleden --- # Uren en Minuten | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `uren-en-minuten`. We gaan in deze oefening een programma maken dat een aantal minuten moet omzetten naar uren en minuten. De gebruiker zal een aantal minuten moeten ingeven en de applicatie zal vervolgens het aantal uren en minuten tonen. Je kan dit doen door gebruik te maken van de modulo operator. Deze operator geeft de rest van een deling terug. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/uren-en-minuten#voorbeeld-interactie) Voorbeeld interactie --------------------------------------------------------------------------------------------------------------------------- Kopiëren Geef het aantal minuten in: 150 Dit is 2 uur en 30 minuten [VorigeInterest Calculator](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/interest-calculator) [VolgendeWisselgeld](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/wisselgeld) Laatst bijgewerkt 1 jaar geleden --- # Pet Shelter | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `movies-db` en installeer de `mongodb` package. We beginnen met de volgende array: Kopiëren const pets : Pet[] = [\ { name: "Buddy", age: 2, type: "dog", breed: "Golden Retriever" },\ { name: "Daisy", age: 3, type: "dog", breed: "Beagle" },\ { name: "Coco", age: 1, type: "dog", breed: "Poodle" },\ { name: "Charlie", age: 2, type: "cat", breed: "Siamese" },\ { name: "Luna", age: 3, type: "cat", breed: "Persian" },\ { name: "Lucy", age: 1, type: "cat", breed: "Maine Coon" },\ { name: "Max", age: 4, type: "dog", breed: "Labrador Retriever" },\ { name: "Bella", age: 2, type: "dog", breed: "French Bulldog" },\ { name: "Milo", age: 1, type: "dog", breed: "Border Collie" },\ { name: "Oliver", age: 3, type: "cat", breed: "Bengal" },\ { name: "Tiger", age: 2, type: "cat", breed: "Ragdoll" },\ { name: "Zoe", age: 3, type: "cat", breed: "Sphynx" },\ { name: "Sophie", age: 5, type: "dog", breed: "Dachshund" },\ { name: "Lily", age: 1, type: "cat", breed: "British Shorthair" },\ { name: "Oscar", age: 4, type: "dog", breed: "Boxer" },\ { name: "Ruby", age: 2, type: "dog", breed: "Siberian Husky" },\ { name: "Rosie", age: 2, type: "cat", breed: "Scottish Fold" },\ { name: "Jack", age: 3, type: "dog", breed: "Cocker Spaniel" },\ { name: "Sadie", age: 2, type: "dog", breed: "Rottweiler" },\ { name: "Maggie", age: 1, type: "dog", breed: "Shih Tzu" }\ ]; [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter#functionaliteit) Functionaliteit ------------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat de applicatie de volgende queries uitvoert: * Verwijder alle documenten uit de collection `pets` * Voeg alle pets (de bovenstaande array) toe aan de collection `pets` * Zoek alle pets in de collection van het type "dog" en toon deze in de console * Zoek alle pets in de collection van het type "dog" of "cat" en toon deze in de console. Gebruik hiervoor de `$in` operator. * Zoek alle pets in de collection van het type "dog" of "cat" en toon deze in de console. Gebruik hiervoor de `$or` operator. * Zoek alle pets in de collection die tussen 2 en 4 jaar oud zijn en toon deze in de console. Gebruik hiervoor de `$gte` en `$lte` operators. * Zoek alle pets in de collection die "Retriever" in hun ras hebben en toon deze in de console. Gebruik hiervoor de `$text` operator. * Sorteer alle pets op leeftijd in oplopende volgorde en toon deze in de console. * Sorteer alle pets op naam in aflopende volgorde en toon deze in de console. * Sorteer alle pets op leeftijd in aflopende volgorde en toon enkel de oudste pet in de console. * Sorteer alle pets op leeftijd in oplopende volgorde, sla de eerste 5 pets over en toon enkel de 6de tot 10de jongste pets in de console. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter#voorbeeld-interactie) Voorbeeld interactie ----------------------------------------------------------------------------------------------------------------------------------- [Vorige14\. Mongo Queries](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries) [VolgendeGames DB](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db) Laatst bijgewerkt 1 jaar geleden * [Functionaliteit](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter#functionaliteit) * [Voorbeeld interactie](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter#voorbeeld-interactie) Kopiëren All pets in the collection of the type 'dog': Buddy dog Golden Retriever 2 Daisy dog Beagle 3 Coco dog Poodle 1 Max dog Labrador Retriever 4 Bella dog French Bulldog 2 Milo dog Border Collie 1 Sophie dog Dachshund 5 Oscar dog Boxer 4 Ruby dog Siberian Husky 2 Jack dog Cocker Spaniel 3 Sadie dog Rottweiler 2 Maggie dog Shih Tzu 1 All pets in the collection of the type 'dog' or 'cat': Buddy dog Golden Retriever 2 Daisy dog Beagle 3 Coco dog Poodle 1 Charlie cat Siamese 2 Luna cat Persian 3 Lucy cat Maine Coon 1 Max dog Labrador Retriever 4 Bella dog French Bulldog 2 Milo dog Border Collie 1 Oliver cat Bengal 3 Tiger cat Ragdoll 2 Zoe cat Sphynx 3 Sophie dog Dachshund 5 Lily cat British Shorthair 1 Oscar dog Boxer 4 Ruby dog Siberian Husky 2 Rosie cat Scottish Fold 2 Jack dog Cocker Spaniel 3 Sadie dog Rottweiler 2 Maggie dog Shih Tzu 1 All pets in the collection of the type 'dog' or 'cat': Buddy dog Golden Retriever 2 Daisy dog Beagle 3 Coco dog Poodle 1 Charlie cat Siamese 2 Luna cat Persian 3 Lucy cat Maine Coon 1 Max dog Labrador Retriever 4 Bella dog French Bulldog 2 Milo dog Border Collie 1 Oliver cat Bengal 3 Tiger cat Ragdoll 2 Zoe cat Sphynx 3 Sophie dog Dachshund 5 Lily cat British Shorthair 1 Oscar dog Boxer 4 Ruby dog Siberian Husky 2 Rosie cat Scottish Fold 2 Jack dog Cocker Spaniel 3 Sadie dog Rottweiler 2 Maggie dog Shih Tzu 1 All pets in the collection that are between 2 and 4 years old: Buddy dog Golden Retriever 2 Daisy dog Beagle 3 Charlie cat Siamese 2 Luna cat Persian 3 Max dog Labrador Retriever 4 Bella dog French Bulldog 2 Oliver cat Bengal 3 Tiger cat Ragdoll 2 Zoe cat Sphynx 3 Oscar dog Boxer 4 Ruby dog Siberian Husky 2 Rosie cat Scottish Fold 2 Jack dog Cocker Spaniel 3 Sadie dog Rottweiler 2 All pets that have 'Retriever' in their breed: Max dog Labrador Retriever 4 Buddy dog Golden Retriever 2 All pets sorted by age in ascending order: Coco dog Poodle 1 Lucy cat Maine Coon 1 Milo dog Border Collie 1 Lily cat British Shorthair 1 Maggie dog Shih Tzu 1 Buddy dog Golden Retriever 2 Charlie cat Siamese 2 Bella dog French Bulldog 2 Tiger cat Ragdoll 2 Ruby dog Siberian Husky 2 Rosie cat Scottish Fold 2 Sadie dog Rottweiler 2 Daisy dog Beagle 3 Luna cat Persian 3 Oliver cat Bengal 3 Zoe cat Sphynx 3 Jack dog Cocker Spaniel 3 Max dog Labrador Retriever 4 Oscar dog Boxer 4 Sophie dog Dachshund 5 All pets sorted by name in descending order: Zoe cat Sphynx 3 Tiger cat Ragdoll 2 Sophie dog Dachshund 5 Sadie dog Rottweiler 2 Ruby dog Siberian Husky 2 Rosie cat Scottish Fold 2 Oscar dog Boxer 4 Oliver cat Bengal 3 Milo dog Border Collie 1 Max dog Labrador Retriever 4 Maggie dog Shih Tzu 1 Luna cat Persian 3 Lucy cat Maine Coon 1 Lily cat British Shorthair 1 Jack dog Cocker Spaniel 3 Daisy dog Beagle 3 Coco dog Poodle 1 Charlie cat Siamese 2 Buddy dog Golden Retriever 2 Bella dog French Bulldog 2 The oldest pet in the collection: Sophie dog Dachshund 5 The 6th to 10th youngest pets in the collection: Charlie cat Siamese 2 Bella dog French Bulldog 2 Rosie cat Scottish Fold 2 Ruby dog Siberian Husky 2 Tiger cat Ragdoll 2 --- # Name from Email | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `name-from-email`. We gaan in deze oefening een programma maken dat de naam van een email adres moet tonen. De gebruiker zal een email adres moeten ingeven en de applicatie zal vervolgens de naam tonen. De naam wordt hierbij als volgt geformatteerd: `. `. Je mag er van uitgaan dat het email adres altijd correct ingegeven wordt. Vervolgens zal de applicatie vragen of de gebruiker nog een email adres wil ingeven (adhv `keyInYNStrict`). [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/name-from-email#voorbeeld-interactie) Voorbeeld interactie --------------------------------------------------------------------------------------------------------------------------- Kopiëren Geef het email adres in: andie.similon@ap.be De naam is A. Similon Wil je nog een email adres ingeven? (y/n) y Geef het email adres in: sven.maes@ap.be De naam is S. Maes Wil je nog een email adres ingeven? (y/n) n Nog een goede dag! [VorigeWisselgeld](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/wisselgeld) [VolgendeText Box](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo2/text-box) Laatst bijgewerkt 1 jaar geleden --- # DNA Match | WebOntwikkeling 2025 In deze opdracht ga je een functie schrijven die twee DNA sequenties met elkaar vergelijkt. De functie moet een percentage teruggeven dat aangeeft hoeveel procent van de sequenties overeenkomen. Kopiëren const dnaMatch = (sequence1: string, sequence2: string): number => { } Vul de functie aan zodat ze werkt zoals beschreven in de opdracht. * De functie moet een percentage teruggeven dat aangeeft hoeveel procent van de sequenties overeenkomen. Als de sequenties exact overeenkomen moet het percentage 100% zijn. Als de sequenties helemaal niet overeenkomen moet het percentage 0% zijn. * De functie moet een exception werpen met de error message "**Sequences must be of equal length**" als de twee sequenties niet dezelfde lengte hebben. * De functie moet een exception werpen met de error message "**Invalid character in sequence 1**" als de eerste sequentie niet alleen uit de letters A, T, C en G bestaat. * De functie moet een exception werpen met de error message "**Invalid character in sequence 2**" als de tweede sequentie niet alleen uit de letters A, T, C en G bestaat. * De functie moet een exception werpen met de error message "**Sequences must be of length > 0**" als 1 van de sequenties leeg is. Dus bv: Kopiëren dnaMatch("ATCG", "ATCG") // 100 dnaMatch("ATCG", "ATCC") // 75 dnaMatch("ATCG", "GCTA") // 0 dnaMatch("ATCG", "ATCCG") // Exception: Sequences must be of equal length Zorg voor een console applicatie die de gebruiker vraagt om twee DNA sequenties in te voeren. De error messages moeten worden opgevangen en de gebruiker moet opnieuw gevraagd worden om de sequenties in te voeren. Als de sequenties geldig zijn moet het percentage worden weergegeven. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/dna-match#voorbeeld-interactie) Voorbeeld interactie --------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-f05aa078ad2d9b3aa092a05622c89d284047f26d%252Fdna.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=260cb3fd&sv=2) DNA match [VorigeExtra oefeningen](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra) [VolgendeView Counter](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter) Laatst bijgewerkt 1 jaar geleden --- # Unix Timestamp API | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `unix-timestamp-api`. We willen een programma maken dat een unix timestamp omzet naar een leesbaar tijdsformaat. We zullen hiervoor gebruik maken van een REST API. Je kan de API aanroepen door een GET request te sturen naar `https://helloacm.com/api/unix-timestamp-converter/?cached&s=`, gevolgd door de unix timestamp. De API zal een eenvoudige string terugsturen met daarin de omgezette tijd. Je kan de API aanroepen met de fetch functie. Probeer deze opgave op te lossen met behulp van de `async` en `await` keywords. Let er wel op dat je de code in een `async` functie moet plaatsen. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/unix-timestamp-api#voorbeeldinteractie) Voorbeeldinteractie: ----------------------------------------------------------------------------------------------------------------------------- Kopiëren Geef een unix timestamp in aub vb.: 1549892280 : 1549892280 De unix timestamp 1549892280 omgezet naar ons tijdsformaat is gelijk aan 2019-02-11 13:38:00 [VorigeCocktails API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-api) [Volgende6\. Modules en NPM Packages](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6) Laatst bijgewerkt 1 jaar geleden --- # Cocktails API | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `cocktails-api`. Maak gebruik van de cocktail API om de gebruiker een ingrediënt te laten opgeven. Vervolgens toon je alle cocktails waarin dit ingrediënt voorkomt. Je kan de cocktails met een bepaald ingrediënt opvragen via de volgende URL: Kopiëren https://www.thecocktaildb.com/api/json/v1/1/search.php?s=kiwi Blijf cocktails opvragen tot de gebruiker een lege string opgeeft. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-api#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------- Kopiëren ------------------------------------------- | Welcome to the cocktail lookup service. | ------------------------------------------- Please provide an ingredient: Kiwi Cocktails with Kiwi: - Kiwi Lemon - Kiwi Martini - Kiwi Papaya Smoothie Please provide an ingredient: lemon Cocktails with lemon: - Gin Lemon - Lemon Shot - Lemon Drop - Kiwi Lemon - Vodka Lemon - New York Lemonade - California Lemonade - Strawberry Lemonade - Cherry Electric Lemonade - Lemon Elderflower Spritzer - Grape lemon pineapple Smoothie Please provide an ingredient: [VorigeSchool API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/school-api) [VolgendeUnix Timestamp API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/unix-timestamp-api) Laatst bijgewerkt 1 jaar geleden --- # Fake Fetch | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `fake-fetch` waarin je jouw bronbestanden voor deze oefening kan plaatsen. Vorm de onderstaande code om zodat het gebruik maakt van promises in plaats van callbacks. Daarna kan je de code omvormen zodat het gebruik maakt van **async/await** in plaats van promises. Kopiëren interface Callback { (n: number): void } const getRandom = (callback: Callback) => { setTimeout(() => { callback(Math.floor(Math.random() * 100)) },1000); } getRandom((n) => { console.log(`The number was ${n}`); }); [Vorige5\. Async & fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5) [VolgendePromise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/promise-all) Laatst bijgewerkt 1 jaar geleden --- # Shopping Cookie | WebOntwikkeling 2025 Voor deze oefening beginnen we met een [starter project](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/security/shopping-cookie/starter.zip) . Download dit project en pak het uit in een nieuwe folder. Als we het starter project opstart krijg je de volgende situatie te zien: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2Fgithub.com%2Fsimilonap%2Fwebontwikkeling-2024%2Fblob%2Fmain%2Fexercises%2Fsecurity%2Fshopping-cookie%2Fimage.png&width=768&dpr=4&quality=100&sign=6945b88a&sv=2) Starter Geen van de functionaliteiten werkt momenteel. Het is aan jou om de applicatie te voorzien van de nodige functionaliteiten. Voorzie de implementatie van de volgende endpoints: * `GET /`: Toont de homepagina met een overzicht van de producten en de inhoud van de winkelwagen. De inhoud van de winkelwagen is een cookie die je kan uitlezen met `req.cookies.cart`. Deze cookie bevat een JSON object met als key de naam van het product en als value het aantal van dat product in de winkelwagen. * `POST /add`: Voegt een product toe aan de winkelwagen en vervolgens redirect naar de homepagina. * `POST /remove`: Verwijdert een product van de winkelwagen en vervolgens redirect naar de homepagina. * `POST /clear`: Verwijdert alle producten van de winkelwagen en vervolgens redirect naar de homepagina. Let op dat ook producten die nog niet in de winkelwagen zitten ook getoond moeten worden op het scherm (met een aantal van 0). [Vorige17\. Session & Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies) [VolgendeView Counter Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-cookies) Laatst bijgewerkt 8 maanden geleden --- # Interfaces | WebOntwikkeling 2025 ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-recepten) Oefening: Recepten [Recepten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/recepten) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-movies) Oefening: Movies [Movies Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/movies-objects) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-todo-list) Oefening: Todo list [Todo List Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/todo-list-objects) [Vorige4\. Interfaces & functies](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4) [VolgendeRecepten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/recepten) Laatst bijgewerkt 1 jaar geleden * [Oefening: Recepten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-recepten) * [Oefening: Movies](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-movies) * [Oefening: Todo list](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces#oefening-todo-list) --- # Rate Limiter | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `rate-limiter-middleware` en installeer de `express` en de `ejs` module. Maak een nieuwe middleware aan die een rate limiter implementeert. Een rate limiter zorgt ervoor dat een bepaalde route maar om de zoveel tijd aangeroepen kan worden. In eerste instantie willen we dat een route maar 1 keer per seconde aangeroepen kan worden. Als dit gebeurd is, moet de gebruiker een foutmelding krijgen (bijvoorbeeld een 429 status code). Je mag gebruik maken van 1 globale variabele om de tijd bij te houden wanneer de route voor het laatst is aangeroepen. Maak een nieuwe route aan op `/` van de applicatie die een `GET` request afhandelt. De route rendert een simpele Hello World pagina. Gebruik de rate limiter middleware om ervoor te zorgen dat de route maar 1 keer per seconde aangeroepen kan worden. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/rate-limiter-middleware#uitbreiding) Uitbreiding ------------------------------------------------------------------------------------------------------------------ Breid de rate limiter middleware uit zodat je de tijd tussen de requests kan instellen. Dit kan je bijvoorbeeld doen door een parameter mee te geven aan de middleware. Als de parameter niet wordt meegegeven, moet de standaard tijd 1 seconde zijn. Je kan bijvoorbeeld de volgende error meegeven aan de gebruiker: Kopiëren Too many requests. You can do only one request per 10 seconds. Breid de rate limiter middleware uit zodat deze ook rekening houdt met de IP van de gebruiker. Dit kan je bijvoorbeeld doen door een object bij te houden waarin je de tijd bijhoudt wanneer de route voor het laatst is aangeroepen per IP. [VorigeUtility Middleware](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/utility-middleware) [Volgende12\. Herhaling](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12) Laatst bijgewerkt 1 jaar geleden --- # Milestone 3 - MongoDB | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#data-naar-mongodb-schrijven) Data naar MongoDB schrijven ---------------------------------------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat je alle data dat je via de `fetch` API ophaalt in MongoDB naar mongoDB schrijft. Kijk bij de opstart van de applicatie altijd eerst of er data in de database zit. Als er geen data in de database zit, dan moet je de data ophalen via de `fetch` API en in de database schrijven. Als er data inzit gebruik je de data die afkomstig is uit de MongoDB database. [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#data-ophalen-uit-mongodb) Data ophalen uit MongoDB ---------------------------------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat alle endpoints worden aangepast zodat de data uit de MongoDB database wordt gehaald ipv de data die je via de `fetch` API ophaalt. [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#edit-functionaliteit) Edit functionaliteit -------------------------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat je de edit functionaliteit implementeert. Dit betekent dat je een item kan aanpassen. Je hoeft alleen maar de hoofd entiteit te kunnen aanpassen. Dus in het voorbeeld van de `TradingCards` moet je enkel de `Trading Cards` kunnen aanpassen en niet de gerelateerde `Guilds`. Je mag zelf kiezen welke velden je wil aanpassen. Zorg ervoor dat je minstens 4 velden kan aanpassen. Er moet minstens 1 keer een veld zijn dat een `select` element gebruikt. Als het formulier wordt ingediend, dan moet de data worden aangepast in de MongoDB database. [VorigeMilestone 2 - Express](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express) [VolgendeMilestone 4 - Security](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-4-security) Laatst bijgewerkt 11 maanden geleden * [Data naar MongoDB schrijven](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#data-naar-mongodb-schrijven) * [Data ophalen uit MongoDB](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#data-ophalen-uit-mongodb) * [Edit functionaliteit](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb#edit-functionaliteit) --- # Twitter | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#startbestanden) 🗃️ Startbestanden ------------------------------------------------------------------------------------------------------------ Je begint van een file [starter.zip](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/express/twitter/starter.zip) . Deze bevat een aantal belangrijke bestanden: * `data.ts` - bevat alle tweets en gebruikersprofielen. Alsook de functies om deze op te halen. * `index.ts` - bevat de basis van de Express applicatie. Hierin worden de routes aangemaakt en de templates geregeld. * `types.ts` - bevat de types die gebruikt worden in de applicatie. * `views` - bevat de EJS templates die gebruikt worden in de applicatie. * `public` - bevat de static files die gebruikt worden in de applicatie. Unzip alle bestanden van de zip file en installeer de nodige dependencies met `npm install`. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#opdracht) 🛠️ Opdracht ------------------------------------------------------------------------------------------------ Je begint met een start project waarin de basis van een twitter applicatie is uitgewerkt. Niet alle knoppen en delen van de applicatie zijn belangrijk voor de opgave. We gaan ons voornamelijk richten op de twitter feed, het posten van tweets en de gebruikersprofielen. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-1-statische-bestanden-beschikbaar-maken) Deel 1: Statische bestanden beschikbaar maken In het begin zal de applicatie er als volgt uitzien: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3aeddb5659d702ab1593fdc953ec95b229cc459b%252F2023-04-25-16-14-50.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=9f75430d&sv=2) Je ziet dat de afbeeldingen en de CSS niet geladen worden. Voer de volgende stappen uit om dit op te lossen: * Zorg dat de public map beschikbaar gemaakt wordt voor de gebruiker. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-2-de-feed) Deel 2: De feed Om de feed te laten werken, moet je de volgende stappen uitvoeren: * Geef de variabele `tweets` door aan de `index.ejs` template zodat deze beschikbaar is in de template. * Zorg dat de tweets in de feed worden weergegeven. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-3-het-posten-van-tweets) Deel 3: Het posten van tweets Om een tweet te kunnen posten, moet je de volgende stappen uitvoeren: * Maak een post route aan waarmee je een tweet kan posten. Kijk naar het formulier in de template om te zien welke data je moet ontvangen. * Gebruik de `createTweet` functie om een tweet aan de feed toe te voegen. Deze functie is beschikbaar in de `data.ts` file. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-4-de-gebruikersprofielen) Deel 4: De gebruikersprofielen Om de gebruikersprofielen te laten werken, moet je de volgende stappen uitvoeren: * Pas de `app.get("/TheLichKing")` route aan dat je eender welke gebruikersnaam kan meegeven. Je kan dit doen aan de hand van een route parameter. * Gebruik de `getProfileByHandle` functie om de juiste gebruiker op te halen. Deze functie is beschikbaar in de `data.ts` file. * Haal de tweets van deze gebruiker op aan de hand van de `getTweetsByHandle` functie. Deze functie is beschikbaar in de `data.ts` file. * Geef de tweets en de gebruiker door aan de `profile.ejs` template zodat deze beschikbaar is in de template. * Zorg dat de tweets en de gebruikersprofiel informatie in de template worden weergegeven. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-5-templates) Deel 5: Templates Momenteel worden grote stukken HTML code herhaald in de templates. Maak gebruik van `include` om deze code te hergebruiken: * Maak een `header.ejs` template aan waarin je de header van de pagina kan plaatsen. Dit omvat het openen van de html tag, de volledige head tag en het openen van de body tag. * Maak een `nav.ejs` template aan waarin je de navigatie van de pagina kan plaatsen. Dit omvat de linkerkant van de applicatie. Dus alles wat in de nav `tag` staat. * Maak een `aside.ejs` template aan waarin je de rechterkant van de applicatie kan plaatsen. Dit omvat de de rechterkant van de applicatie. Dus alles wat in de `aside` tag staat. * Maak een `tweets.ejs` template aan waarin je de tweets kan plaatsen. Dit omvat de tweets die in de feed en op het profiel worden weergegeven. [Vorige12\. Herhaling](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12) [VolgendeWord Guess](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess) Laatst bijgewerkt 1 jaar geleden * [🗃️ Startbestanden](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#startbestanden) * [🛠️ Opdracht](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#opdracht) * [Deel 1: Statische bestanden beschikbaar maken](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-1-statische-bestanden-beschikbaar-maken) * [Deel 2: De feed](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-2-de-feed) * [Deel 3: Het posten van tweets](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-3-het-posten-van-tweets) * [Deel 4: De gebruikersprofielen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-4-de-gebruikersprofielen) * [Deel 5: Templates](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter#deel-5-templates) --- # Beerster | WebOntwikkeling 2025 Maak een nieuw express project aan met de naam `beerster`. In dit project gaan we een applicatie bouwen die het mogelijk maakt om in te checken op een locatie en te registreren welk bier je daar drinkt. Je kan starten van een aantal starter html bestanden door het [starter project](https://github.com/similonap/webontwikkeling-2024/raw/main/exercises/herhaling/beerster/starter.zip) te downloaden. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#apis) API's --------------------------------------------------------------------------------------------- We vertrekken van de volgende APIs **Beers** URL: https://raw.githubusercontent.com/slimmii/mock\_api/main/beers/beers.json Dit geeft een lijst van bieren terug. Elk bier heeft een `id`, `name`, `alcoholPercentage`, `description`, `type` en `logo`. **Bars** URL: https://raw.githubusercontent.com/slimmii/mock\_api/main/bars/bars.json Dit geeft een lijst van bars terug. Elke bar heeft een `id`, `name`, `location`, `description`, `images` en `rating`. Images is een array van urls naar afbeeldingen van de bar. Als er een image moet getoond worden in de frontend, kies dan een willekeurige image uit de array tenzij ze allemaal gevraagd worden. **Checkins** URL: https://raw.githubusercontent.com/slimmii/mock\_api/main/checkins/checkins.json Dit geeft een lijst van checkins terug. Elke checkin heeft een `id`, `barId`, `beerId`, `name`, `comment`, `date` en `image`. Bij het inlezen moet je de `bar` en `beer` objecten toevoegen aan de checkin. Je kan deze opzoeken via de `barId` en `beerId` in de respectievelijke arrays. In de database zal je dus geen `beerId` en `barId` opslaan, maar wel de volledige objecten. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#inlezen-in-de-database) Inlezen in de database -------------------------------------------------------------------------------------------------------------------------------- Bij het opstarten van de applicatie moet je de data inlezen in de database. Je roept de API's aan via een GET request en slaat de data op in de database. Je zorgt voor de volgende collecties: * beers (met de bieren) * bars (met de bars) * checkins (met de checkins) * users (met de gebruikers) Je zorgt ervoor dat de checkins geen `beerId` en `barId` bevatten, maar wel de volledige objecten. Ook maak je 2 gebruikers aan in de database. Bv: [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#login-pagina) Login pagina ------------------------------------------------------------------------------------------------------------ Maak een login pagina waarop je kan inloggen. Je kan inloggen met de gebruikers die je hebt aangemaakt in de database. Als je inlogt, wordt je doorgestuurd naar de home pagina. Gebruik hiervoor JWT tokens en dus geen sessies. Je mag de username en de fullname van de gebruiker in de token steken. Het wachtwoord mag niet in de token zitten. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-a416d295d1dd4e6f28db71cb551b074604600aa7%252Flogin.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=9ba76cbd&sv=2) Login Succesful Voorzie een error message als de gebruiker niet bestaat of het wachtwoord fout is. Gebruik hiervoor flash messages in de session. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-a248598de4d4519b96644a00e48bdffe2bc29680%252Flogin-failed.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e93dbee6&sv=2) Login Failed [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#home-pagina) Home pagina ---------------------------------------------------------------------------------------------------------- Het home scherm bestaat uit een aantal verschillende onderdelen. Je kan deze vinden op de `/` route. Je moet ingelogd zijn om deze pagina te kunnen zien. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-58beb7941495f71c323b27f739ddd6ddecc3dec8%252Fhomescreen.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=2265b7db&sv=2) Home Screen ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#recent-check-ins) Recent Check-ins Is een overzicht van alle check-ins die gedaan zijn. Je toont de naam van de gebruiker, de naam van het bier, de naam van de bar, de datum en een eventuele comment. Bovenaan elke checkin toon je een willkeurige afbeelding van de bar en het logo van het bier. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-5d4e1fd64ae12d3cadb523794f56d7188b96aeb2%252Frecent.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=6a25cf0e&sv=2) Recent checkins Limiteer het aantal check-ins dat getoond wordt tot 5. Je kan dit overschrijven door een query parameter `limit` mee te geven. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#check-in-formulier) Check-in formulier Boven de recent check-ins toon je een formulier waarmee je een nieuwe check-in kan toevoegen. Je kan een bier kiezen uit een dropdown en een bar kiezen uit een andere dropdown. Je kan een comment toevoegen. Als je op submit klikt, wordt de check-in toegevoegd aan de database en zie je deze verschijnen in de recent check-ins. Je krijgt ook een succes message te zien. Je mag willeurig een image kiezen van de bar voor de image van de check-in. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-94b1d19b4be7a36fc07a8f610959672a74add5ca%252Fcheckinform.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4656a2f1&sv=2) checkinform ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-15de962c6c51ff530af8cbefc0ac4582fbac9a95%252Fcheckinform-clean.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=fefbd89a&sv=2) checkinform Na het toevoegen krijg je een succes message te zien. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-1723cabcaa367954909914339aa4142788784a14%252Fcheckinform-success.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ee0f141&sv=2) alt text ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#top-bar) Top Bar De top bar toont de top 3 bars met de hoogste rating. Je toont de naam van de bar en de description. Je toont ook een willekeurige afbeelding van de bar. Als je op de naam van de bar klikt, ga je naar de detailpagina van de bar. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-0b8b162a599b6f063a7ba21b236ee0f2518d5758%252Ftopbars.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=51147075&sv=2) Top Bars ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#top-beers) Top Beers De top beers toont de top 3 bieren. Jammer genoeg is er geen rating voor de bieren, dus je toont gewoon de 3 bieren met de meeste check-ins. Je toont de naam van het bier en de description. Je toont ook het logo van het bier. Als je op een bier klikt, ga je naar de detailpagina van het bier. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#beers-pagina) Beers pagina ------------------------------------------------------------------------------------------------------------ Als je naar de /beers route gaat, krijg je een overzicht van alle bieren. Je toont de naam van het bier, de alcohol percentage en de description. Je toont ook het logo van het bier. Als je op een bier klikt, ga je naar de detailpagina van het bier. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-dd905aa74e65ddcc03992c66f496f5777775ff98%252Fbeerspage.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=fef376d0&sv=2) Beers page Je kan het percentage van het bier tonen in een kleur. Als het percentage lager is dan 5, toon je het in het groen. Als het percentage lager is dan 7.5, toon je het in het oranje. Anders toon je het in het rood. Je toont ook een label met `LOW`, `MEDIUM` of `HIGH` afhankelijk van het percentage. Je kan eventueel ook het alcohol percentage laten zien aan de hand van een balkje. Zoek zelf een manier om dit te implementeren. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#beers-detail-pagina) Beers detail pagina -------------------------------------------------------------------------------------------------------------------------- Als je naar de /beers/:id pagina gaat, krijg je hetzelfde overzicht als op de beers pagina, maar dan enkel voor dat specifieke bier. Je toont ook een lijst van alle check-ins voor dat bier. Je toont de naam van de gebruiker, de naam van de bar, de datum en de comment. Je toont ook een willekeurige afbeelding van de bar. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-a6acd9471f0fe3a59f585e243c5e097c144a6d02%252Fbeerdetail.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=253dc346&sv=2) Beer detail [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#bars-pagina) Bars pagina ---------------------------------------------------------------------------------------------------------- Als je naar de /bars route gaat, krijg je een overzicht van alle bars. Je toont de naam van de bar, de locatie en de description. Je toont ook de rating van de bar. Als je op een bar klikt, ga je naar de detailpagina van de bar. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-fcf3a1984791845a7157a598874f98c8c26883a0%252Fbarlist.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=3fb82f68&sv=2) Bar List [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#bars-detail-pagina) Bars detail pagina ------------------------------------------------------------------------------------------------------------------------ Als je naar de /bars/:id pagina gaat, krijg je hetzelfde overzicht als op de bars pagina, maar dan enkel voor die specifieke bar. Je toont hiernaast ook alle images van de bar. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-cd427e58452351dbdfe4370448270a0c2245293c%252Fbardetail.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=64b93dca&sv=2) Bar detail [](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#profile-pagina) Profile pagina ---------------------------------------------------------------------------------------------------------------- Je hebt bovenaan elke pagina (buiten de login pagina) een navigatiebalk. Rechtsbovenaan zie je een cirkel met de eerste letter van de je username. Als je hier op klikt krijg je een menu waar je kan kiezen tussen uitloggen en naar je profiel gaan. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-576a7e7e6211bd65ce9f179b800722b5591b7a72%252Fprofile-button.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d0de8b3c&sv=2) Profile button Als je naar je profiel gaat, zie je een overzicht van al je check-ins. Je krijgt ook je username en fullname te zien. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-4f9194c2a32ef6dabe6f5ecba84992f18a4f9a50%252Fprofile.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=3e08463f&sv=2) Profile page [VorigeYoutube Favorites](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/youtube-playlists) [VolgendeExtra oefeningen](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra) Laatst bijgewerkt 1 jaar geleden * [API's](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#apis) * [Inlezen in de database](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#inlezen-in-de-database) * [Login pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#login-pagina) * [Home pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#home-pagina) * [Recent Check-ins](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#recent-check-ins) * [Check-in formulier](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#check-in-formulier) * [Top Bar](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#top-bar) * [Top Beers](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#top-beers) * [Beers pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#beers-pagina) * [Beers detail pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#beers-detail-pagina) * [Bars pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#bars-pagina) * [Bars detail pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#bars-detail-pagina) * [Profile pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster#profile-pagina) Kopiëren const initialUsers: User[] = [\ {\ username: "solo",\ fullname: "Han Solo",\ password: "hanshotfirst"\ },\ {\ username: "princess",\ fullname: "Leia Organa",\ password: "obiwan"\ }\ ]; --- # JWT Sign | WebOntwikkeling 2025 Maak een nieuw node.js project aan met de naam `jwt-sign`. In dit project gaan we een JWT token signen en verifieren aan de hand van de `jsonwebtoken` library en via de http://www.jwt.io website. Maak een object aan met de volgende interface: Kopiëren interface User { id: number; email: string; } * Maak een object aan dat deze interface implementeert en vul het met waarden naar keuze. * Maak twee constanten `secret` en `secret2` aan met een willekeurige string waarde. En gebruik deze constanten om een JWT token te signen (`sign`) en verifieren (`verify`). * Print de JWT token naar de console en kopieer deze naar de http://www.jwt.io website om de payload te bekijken. * Probeer nu ook eens een token te verifieren met een andere secret en kijk wat er gebeurt. * Ga nu eens aan de slag om zelf een token te lezen aan de hand van de `Buffer.from(part, 'base64').toString()` functie. Deze functie kan je gebruiken om de aparte delen van de JWT token om te zetten naar een leesbare string. Tip: de delen van de JWT token zijn gescheiden door een `.`. * Zou het veilig zijn om een paswoord op te slagen in een JWT token? Waarom wel/niet? [Vorige19\. Token based login](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login) [VolgendeLogin Express JWT](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/login-express-jwt) Laatst bijgewerkt 1 jaar geleden --- # At Least Two | WebOntwikkeling 2025 Maak een nieuw project aan met een bestand `at-least-two` met de volgende inhoud: Kopiëren interface TestFunction { (n: number): boolean } * Schrijf een arrow functie `isOdd` die deze interface implementeert die teruggeeft of een getal oneven is. * Schrijf een arrow functie `isEven` die deze interface implementeert die teruggeeft of een getal even is. * Verzin twee andere functie's die deze interface implementeert. * Schrijf een arrow functie genaamd `atLeastTwo` die twee argumenten aanvaard. Het eerste argument is een array van getallen en de tweede argument is een functie van het type `TestFunction` * Deze functie geeft true terug als minstens twee elementen voldoen aan de meegegeven functie. Bijvoorbeeld: Kopiëren console.log(atLeastTwo([2,3,4,6,8], isOdd)); console.log(atLeastTwo([2,3,4,5,6,8], isOdd)); geeft de volgende output: Kopiëren false true [VorigeFilter Numbers](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers) [Volgende5\. Async & fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5) Laatst bijgewerkt 1 jaar geleden --- # View Counter Cookies | WebOntwikkeling 2025 Maak een nieuwe express applicatie en installeer de nodige dependencies. Voorzie een homepagina die een bezoeker verwelkomt en het aantal keer dat de bezoeker de pagina heeft bezocht toont. Dit aantal wordt bijgehouden in een cookie. Als de bezoeker de pagina voor de eerste keer bezoekt, toon je een speciale boodschap. De eerste keer dat je de pagina bezoekt krijg je volgende boodschap te zien: Kopiëren Welkom voor de eerste keer op deze pagina. Kom nog eens terug! De volgende keer dat je de pagina bezoekt krijg je volgende boodschap te zien: Kopiëren Welkom terug! Je bezocht deze pagina al 2 keer. De cookie die het aantal bezoeken bijhoudt heeft een expiry date van 1 dag. Als de bezoeker de pagina 1 dag niet bezoekt, begint de teller opnieuw vanaf 1. Probeer het via `maxAge` en `expires` in te stellen. [VorigeShopping Cookie](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/shopping-cookie) [VolgendeView Counter Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-sessions) Laatst bijgewerkt 1 jaar geleden --- # Utility Middleware | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `utility-middleware` en installeer de `express` en de `ejs` module. Schrijf een middleware die een aantal handige functies bevat. De middleware moet de volgende functies bevatten: * `caesar`: een functie die een string en een shift meekrijgt en de string versleuteld met de Caesar cipher. De shift is een getal dat aangeeft hoeveel plaatsen de letters in het alfabet verschoven moeten worden. Bijvoorbeeld: `caesar('abc', 1)` geeft `'bcd'`. * `reverse`: een functie die een string meekrijgt en de string omdraait. Bijvoorbeeld: `reverse('abc')` geeft `'cba'`. * `shorten`: een functie die een string en een lengte meekrijgt en de string inkort tot de lengte. Als de string langer is dan de lengte, moet er een `...` achter de string geplaatst worden. Bijvoorbeeld: `shorten('abcde', 3)` geeft `'abc...'`. Zorg dat deze middleware beschikbaar is voor alle routes van de applicatie en test de functies uit in je ejs bestanden. [VorigeRouter Combi](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/router-combi) [VolgendeRate Limiter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/rate-limiter-middleware) Laatst bijgewerkt 1 jaar geleden --- # Login Express JWT | WebOntwikkeling 2025 Gebruik de code van [Login-Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/login-express) en vervang de session based authenticatie door JWT authenticatie. De rest van de functionaliteit blijft hetzelfde. [VorigeJWT Sign](https://apwt.gitbook.io/webontwikkeling-2025/labos/19.-token-based-login/jwt-sign) [Volgende20\. Testing](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing) Laatst bijgewerkt 1 jaar geleden --- # Youtube Favorites | WebOntwikkeling 2025 In deze opdracht ga je een applicatie bouwen die het toelaat om youtube videos aan te duiden als favoriet. De applicatie zal een lijst van favoriete videos tonen en het zal mogelijk zijn om videos toe te voegen en te verwijderen. Als de applicatie opstart zal een json van youtube videos ingeladen worden. Deze json moet worden ingelezen via de fetch api op het volgende adres: `https://raw.githubusercontent.com/similonap/json/master/videos.json`. Vervolgens moeten deze videos in een mongodb database worden opgeslagen. Bij het opstarten worden ook twee users toegevoegd aan de database met een username en password. Het passwoord moet gehashed worden met bcrypt. Als er al data in de database zit, mag deze data niet overschreven worden. Voorzie een environment variable in een dotenv bestand CLEAR\_DB\_ON\_RESTART. Als deze op true staat mag de database wel overschreven worden. De applicatie moet een login pagina hebben waar de gebruiker kan inloggen. Als de gebruiker niet ingelogd is, mag hij niet naar de hoofdpagina gaan. Als de gebruiker niet ingelogd is, moet hij naar de login pagina worden gestuurd. Als de gebruiker inlogt, moet hij naar de hoofdpagina worden gestuurd. De gebruiker moet ook kunnen uitloggen. Als de gebruiker verkeerde gegevens ingeeft, moet er een foutmelding getoond worden (gebruik flash messages in de session). De hoofdpagina toont een lijst van de youtube videos die in de database zitten. Naast de velden van de video moet er een knop zijn om de video als favoriet aan te duiden. Als de video al als favoriet is aangeduid, moet de knop de video als niet favoriet aanduiden. Bovenaan de pagina staat een zoekbalk waarmee je op de titel van het lied kunt zoeken. Als je op de titel van het lied zoekt, moet je enkel de videos tonen die de zoekterm in de titel hebben. Als je niets invult in de zoekbalk, moet je alle videos tonen. Voorzie ook database sorting op alle velden. Je kan deze oplopend of aflopend sorteren. Voorzie ook een manier om nieuwe videos toe te voegen. Er moet geen server side validation gebeuren. Als de video correct is toegevoegd, moet de gebruiker terug naar de hoofdpagina worden gestuurd. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-059d7dcd16d2e79fa037f720077f0096e5aa8764%252Fyoutubevideos.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=11598040&sv=2) youtube-demo [Vorige21\. Herhaling](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling) [VolgendeBeerster](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling/beerster) Laatst bijgewerkt 1 jaar geleden --- # Guestbook | WebOntwikkeling 2025 We beginnen in deze opgave met een bestaande node applicatie die een gastenboek bijhoudt. Als je de applicatie opstart wordt er achter een naam gevraagd en vervolgens wordt er een bericht ingevoerd. Deze gegevens worden opgeslagen in een MongoDB database en worden vervolgens getoond in de console. Je kan het bestaande project vinden in het [starter.zip](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/mongodb/guestbook/starter.zip) bestand. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook#opdracht) Opdracht ---------------------------------------------------------------------------------------------- Zorg ervoor dat deze applicatie werkt en dat de gegevens worden opgeslagen in de MongoDB database. Je moet hier enkel de URI van de database aanpassen in de `index.ts` file. Zorg ervoor dat dit werkt voor zowel een lokale MongoDB database als een MongoDB Atlas database. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook#voorbeeld-interactie) Voorbeeld interactie ---------------------------------------------------------------------------------------------------------------------- Kopiëren What is your name? Andie Similon What is your message? I like mongoDB very much! [4/13/2024, 8:05:08 PM] Andie Similon: Hey guys [4/13/2024, 8:05:59 PM] Andie Similon: How are you? [4/13/2024, 8:17:01 PM] Andie Similon: I like mongoDB very much! [Vorige13\. Mongo Basics](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13) [VolgendeMoviesDB](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db) Laatst bijgewerkt 1 jaar geleden * [Opdracht](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook#opdracht) * [Voorbeeld interactie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook#voorbeeld-interactie) --- # Bitcoin current | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `bitcoin-current` en installeer express volgens de instructies in de theorie les. We gaan in deze oefening een eenvoudige express applicatie maken die de huidige prijs van Bitcoin in EUR, USD en GBP toont in een HTML pagina. Voor deze oefening gaan we gebruik maken van de volgende API: [https://sampleapis.assimilate.be/bitcoin/current](https://sampleapis.assimilate.be/bitcoin/current) . Deze heb je al eens gebruikt in de [bitcoin-api](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/bitcoin-api) oefeninge. De applicatie moet luisteren op poort 3500 en de volgende routes hebben: * `GET /`: Toont een welkomstbericht in een HTML pagina met een link naar de `/bitcoin` route. * `GET /bitcoin`: Toont de huidige prijs van Bitcoin in EUR, USD en GBP in een HTML pagina. De prijs moet opgehaald worden van de API en getoond worden in een tabel. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3e902b85fcb7ea1661288d6da81e7de210dbd177%252Fscreenshot.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=80d8963&sv=2) [VorigeDadJoke Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/dadjoke-express) [Volgende8\. EJS + Static](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8) Laatst bijgewerkt 10 maanden geleden --- # Pokemon Team Express | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `pokemon-team-express` en installeer de `express` en `mongodb` package. We starten van de database die we gemaakt hebben in de vorige [opgave](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/pokemon-team) . We gaan nu een express applicatie maken die gebruik maakt van deze database. * Zorg ervoor dat bij het opstarten van de express applicatie een verbinding wordt opgezet met de MongoDB database. En zorg ervoor dat deze verbinding wordt afgesloten bij het afsluiten van de applicatie. * Maak gebruik van een aparte `database.ts` module om al je database gerelateerde code in te plaatsen. * Maak een `/` GET route aan die dropdown (`select`) toont met alle pokemon in een vooraf bepaalde lijst. Onder de dropdown laat je een lijst zien van alle pokemon in het team. * Maak een `/` POST route aan die een pokemon toevoegt aan het team. Als de pokemon al in je team zit dan wordt deze niet toegevoegd. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-cdbaece4a520ace5b2deb4976c1c7513e21a1608%252Fpokemon-team.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d542bdd&sv=2) alt text [VorigeGuestbook Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/guestbook-express) [Volgende16\. CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud) Laatst bijgewerkt 1 jaar geleden --- # MoviesDB | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `movies-db` en installeer de `mongodb` package. Maak volgende variabele aan: Kopiëren let movies = [\ {name: "The Matrix", myScore: 90, timesViewed: 10},\ {name: "Pulp Fuction", myScore: 100, timesViewed: 100},\ {name: "Monster Hunter", myScore: 5, timesViewed:1},\ {name: "Blade Runner", myScore: 100, timesViewed:30},\ {name: "Austin Powers", myScore: 80, timesViewed:10},\ {name: "Jurasic Park 2", myScore: 40, timesViewed:1},\ {name: "Ichi the Killer", myScore: 80, timesViewed:1}\ ]; [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#stap-1-toevoegen-van-de-films-aan-de-database) Stap 1: Toevoegen van de films aan de database ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Maak een interface aan die overeenkomt met de objecten in movies. * Geef movies het juiste type * Zorg dat deze films in jouw collection Movies in MongoDB terechtkomen. Je kan hiervoor gebruik maken van een lokale MongoDB database of een MongoDB Atlas database. Gebruik als db "exercises" en als collection "movies". * Kijk na via de mongoDB vscode extension of de films in de database zitten. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#stap-2-films-tonen) Stap 2: Films tonen ------------------------------------------------------------------------------------------------------------------- * Zet de de code die de insert doet in de database in commentaar anders worden de films telkens opnieuw toegevoegd. We zien later nog hoe we dit kunnen oplossen. * Doe een query op de database en toon de eerste film via de console. * Doe een query op de database en toon alle films via de console. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#voorbeeld-interactie) Voorbeeld interactie ---------------------------------------------------------------------------------------------------------------------- [VorigeGuestbook](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook) [VolgendePokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/pokemon-team) Laatst bijgewerkt 1 jaar geleden * [Stap 1: Toevoegen van de films aan de database](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#stap-1-toevoegen-van-de-films-aan-de-database) * [Stap 2: Films tonen](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#stap-2-films-tonen) * [Voorbeeld interactie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db#voorbeeld-interactie) Kopiëren First movie: Movie: The Matrix, My Score: 90, Times Viewed: 10 All movies: Movie: The Matrix, My Score: 90, Times Viewed: 10 Movie: Pulp Fuction, My Score: 100, Times Viewed: 100 Movie: Monster Hunter, My Score: 5, Times Viewed: 1 Movie: Blade Runner, My Score: 100, Times Viewed: 30 Movie: Austin Powers, My Score: 80, Times Viewed: 10 Movie: Jurasic Park 2, My Score: 40, Times Viewed: 1 Movie: Ichi the Killer, My Score: 80, Times Viewed: 1 --- # Newspaper Search | WebOntwikkeling 2025 Bouw verder aan de [newspaper-route](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-route) opdracht. Maak een nieuwe route `/search` die een zoekformulier toont. Dit formulier moet een inputveld bevatten waarin de gebruiker een zoekterm kan invullen. Het formulier moet een GET request sturen naar de server met de zoekterm als query parameter (bv `q`). Als de gebruiker een zoekterm heeft ingevuld, moet de server de artikels filteren op basis van de zoekterm en de artikels tonen. Als de zoekbalk leeg is, moeten er geen artikels getoond worden. We zoeken op basis van de titel van het artikel en de inhoud van het artikel. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-8499ce2fe7cb2f58e94b545013c6b3c856f7ff99%252Fsearch-2.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7f2120fc&sv=2) alt text [VorigeNewspaper Route](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-route) [VolgendeSteam](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/steam) Laatst bijgewerkt 1 jaar geleden --- # Math Test | WebOntwikkeling 2025 Download het [starter](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/testing/math-test/starter.zip) project. Dit project bevat een `math.ts` module. Schrijf de volgende testen: * Test dat de functie `add` twee getallen optelt. * Test dat de functie `subtract` het tweede getal van het eerste aftrekt. * Test dat de functie `multiply` twee getallen vermenigvuldigt. * Test dat de functie `divide` het eerste getal door het tweede deelt. * Test dat de functie `divide` een error gooit als het tweede getal 0 is. * Test dat de functie `add`, `subtract`, `multiply` en `divide` een error gooit als de argumenten geen getallen zijn. (in het geval van NaN) * Run de testen met de code coverage tool en ga na of alles getest is. [Vorige20\. Testing](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing) [VolgendeString Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/string-test) Laatst bijgewerkt 1 jaar geleden --- # Cat GPT | WebOntwikkeling 2025 Maak een nieuw project `cat-gpt` waarin je jouw bronbestanden voor deze oefening kan plaatsen. In deze oefening gaan we een command line applicatie schrijven die de website https://catgpt.wvd.io/ nabootst. Deze website is een parodie op de zeer bekende chatgpt, alleen geeft hij geen antwoorden op je vragen, maar geeft hij een willekeurig aantal "Meow"s terug. De applicatie werkt als volgt: * Vraag via readline-sync input van de gebruiker aan de hand van een ">" prompt. * Maak een functie aan "repeatWords" die een woord een aantal keer herhaalt en afprint. De functie heeft 3 parameters: * word: het woord dat herhaald moet worden. * times: het aantal keer dat het woord herhaald moet worden. * delimiter: het teken dat gebruikt wordt om de woorden te scheiden. * Gebruik de npm package "sloth-log" om een tekst vertraagd af te printen. Voor meer informatie bekijk de documentatie. * Zorg ervoor dat elke sequentie van Meow's een willekeurig leesteken krijgt aan het einde (?,! en .). * Zorg ervoor dat de gebruiker de applicatie kan afsluiten door "bye" in te geven. De kat zal nog een laatste keer een aantal "Meow"'s teruggeven. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cat-gpt#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6d9dee34a6ade225d02d5a2a47c7c3286e22851e%252Fcatgpt.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5f3780fc&sv=2) cat [VorigeCowsay Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cowsay-module) [VolgendeRainbow Chalk](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/rainbow-chalk) Laatst bijgewerkt 1 jaar geleden --- # Cowsay Module | WebOntwikkeling 2025 Maak een nieuw project `cowsay-module` waarin je jouw bronbestanden voor deze oefening kan plaatsen. Installeer de `cowsay` module via npm en maak een nieuw bestand `index.ts` aan. Lees eerst de documentatie van de module en importeer de module in je bestand. https://www.npmjs.com/package/cowsay Maak een functie `say` die een string als argument neemt en de string doorgeeft aan de `say` functie van de `cowsay` module. Gebruik de readline-sync module om de gebruiker een string te laten invoeren. Als de gebruiker "Meow!" invoert, dan moet de `say` functie een error gooien met de boodschap "Cows don't meow!". Vang deze error op en geef de boodschap weer in de console. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cowsay-module#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------- Kopiëren What should the cow say? Meow! Cows don't say that! What should the cow say? Moo! ______ < Moo! > ------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || What should the cow say? exit [VorigeExport Interfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/export-interfaces) [VolgendeCat GPT](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cat-gpt) Laatst bijgewerkt 1 jaar geleden --- # Hello Express EJS | WebOntwikkeling 2025 In deze oefening gaan we de `hello-express` applicatie uit het vorige labo uitbreiden met EJS. Neem de broncode over zodat je de vrijheid hebt om de code aan te passen zonder dat je de oorspronkelijke code verliest. De routes die json terugsturen gebruiken uiteraard nog steeds json en geen ejs. * Plaats de image van jezelf in een public map. Zorg ervoor dat express deze map kan gebruiken om statische bestanden te serveren. * Pas de / route aan zodat deze een ejs template gebruikt. Je hoeft hier niets door te geven aan de ejs template. * Pas de /whoami route aan zodat deze een ejs template gebruikt. Geef het `thisisme` object door aan de ejs template. * Pas de /pikachuhtml route aan zodat deze een ejs template gebruikt. Geef enkel de waarden door aan de ejs template die je toont in de html pagina. Je mag dus niet het hele pikachu object doorgeven aan de ejs template (tenzij je Pokemon object al alleen de waarden bevat die je nodig hebt). * Maak nog 2 andere routes aan voor 2 andere pokemon. Je moet de ejs template van de pikachu route kunnen hergebruiken. bv: /bulbasaurhtml, /charmanderhtml * Pas de /randomcolor route aan zodat deze een ejs template gebruikt. Geef de kleur door aan de ejs template. De werking van de applicatie moet hetzelfde blijven. De ejs templates moeten in een aparte map views staan. [Vorige8\. EJS + Static](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8) [VolgendeCat Static](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/catstatic) Laatst bijgewerkt 1 jaar geleden --- # Math Service | WebOntwikkeling 2025 Maak een nieuw project mathservice waarin je jouw bronbestanden voor deze oefening kan plaatsen. Installeer alle nodige libraries voor te werken met express. Maak een nieuwe express applicatie in een index.ts bestand. We gaan een web applicatie maken die de volgende wiskundige operatoren kan uitvoeren: add, min, mult en div Zorg voor 1 GET-route die urls in de volgende vorm kan afhandelen: Kopiëren http://localhost:3000/add?a=3&b=5 http://localhost:3000/min?a=3&b=5 http://localhost:3000/mult?a=3&b=5 http://localhost:3000/div?a=3&b=5 Je moet dus query parameters (voor a en b) EN route parameters (voor de operatoren) gebruiken. Je krijgt dan een output in de volgende vorm (json): Kopiëren { "result": 8 } Als 1 van de twee parameters (a en b) niet zijn opgegeven krijg je het volgende json object terug: Kopiëren { "error": "Both query parameters (a,b) have to be specified." } Bij een deling door 0 krijg je het volgende json object terug: Kopiëren { "error": "Division by 0 is not allowed." } Als de query parameters niet van het type number zijn krijg je het volgende json object terug: Bij een onbekekende operator krijg je het volgende json object terug: [VorigeHello Query](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/hello-query) [VolgendeNewspaper Route](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-route) Laatst bijgewerkt 1 jaar geleden Kopiëren { "error": "Both query parameters (a,b) have to be of type number." } Kopiëren { "error": "Unknown operator." } --- # Word Guess | WebOntwikkeling 2025 We beginnen met een bestaande express applicatie. Deze applicatie bevat al een aantal routes en ejs bestanden. De bedoeling is dat je deze applicatie verder uitbreidt met extra functionaliteit. Je kan de starter applicatie hier vinden: [Word Guess](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/express/word-guess/starter.zip) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#includes) Includes ----------------------------------------------------------------------------------------------- * Maak een `header.ejs` bestand aan dat de header van de pagina bevat (en de bovenkant van de html). * Maak een `footer.ejs` bestand aan dat de footer van de pagina bevat (en de onderkant van de html). * Pas `index.ejs` aan zodat deze de `header.ejs` en `footer.ejs` bevat. * Zorg dat elke ejs pagina vanaf nu de `header.ejs` en `footer.ejs` bevat. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-module) Words Module ------------------------------------------------------------------------------------------------------- * Schrijf een functie `isFiveLetterWord` die controleert of een woord 5 letters lang is. Deze functie moet een boolean teruggeven. * Schrijf een functie `getFiveLetterWords` die alle woorden van een meegegeven array teruggeeft die 5 letters lang zijn. Gebruik hiervoor de `filter` functie. Gebruik de `isFiveLetterWord` functie die je hiervoor gemaakt hebt. * Schrijf een function `toUpperCase` die een array van woorden omzet naar een array van woorden in hoofdletters. * Schrijf een functie `getRandomWord` die een willekeurig woord teruggeeft van een meegegeven array. * Plaats deze functies in een apart bestand `words.ts` en zorg dat deze kunnen geimporteerd worden. * Vul de `createNewWord` functie aan in de `index.ts` file die de `randomWord` variabele invult met een willekeurig 5 letter woord uit de `words` array. Voorbeeld: Kopiëren isFiveLetterWord('hello') // true getFiveLetterWords(['hello', 'world', 'test', 'word']) // ['hello', 'world'] toUpperCase(['hello', 'world', 'test', 'word']) // ['HELLO', 'WORLD', 'TEST', 'WORD'] getRandomWord(['hello', 'world', 'test', 'word']) // 'world' [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-route) Words Route ----------------------------------------------------------------------------------------------------- * Maak een nieuwe `get` route voor het pad `/words` * Maak gebruik van de `toUpperCase` functie van de vorige opgave om een array aan te maken van woorden in hoofdletters. Gebruik de al reeds aangemaakte array `words`. * Geef de array door aan een ejs bestand `words.ejs`. * Toon de woorden aan de hand van een for lus en `
  • ` tags. * De woorden die geen 5 letters lang zijn geef je een rode kleur. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3bdcd43958493ad2cfdde970c0e8e09369870c12%252Fwords.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=53a94756&sv=2) alt text [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-form) Words Form --------------------------------------------------------------------------------------------------- * Maak een nieuwe `get` route voor het pad `/guess`. Zorg ervoor dat het de `guess.ejs` pagina toont. * Maak een nieuwe `post` route voor het pad `/guess`. * Gebruik de al voorgemaakte `checkWord` functie om te controleren of het woord correct is. Deze functie geeft dit aan met een kleuren code. Groen als de letter op de juiste plaats staat, geel als de letter wel in het woord zit maar niet op de juiste plaats en grijs als de letter niet in het woord zit. Geef het resultaat door aan de ejs pagina. * Toon elke letter van het woord dat je hebt ingegeven in het input veld als een ``. De background color van de `` moet de kleur zijn die je hebt meegekregen van de `checkWord` functie. (letter 0 = kleur 0, letter 1 = kleur 1, ...) * Als je een woord dat geen 5 letters bevat toon je een foutmelding op de pagina. (Please enter a 5 letter word.) * Als alle kleuren groen zijn toon je een succesmelding op de pagina. (Congratulations! You guessed the word.) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6f674ca139557b9f5ffa3619fa4e91c632b8d5e2%252Fwordguess.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7208e21f&sv=2) alt text [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#restart-game) Restart Game ------------------------------------------------------------------------------------------------------- * Maak een nieuwe `get` route voor het pad `/restart`. * Zorg ervoor dat de `randomWord` variabele opnieuw wordt ingevuld met een willekeurig 5 letter woord uit de `words` array. * Stuur de gebruiker terug naar de `/guess` pagina. (redirect) * Voeg een link toe aan de `guess.ejs` pagina die de gebruiker naar de `/restart` route stuurt. Toon deze enkel als het spel is afgelopen (bij success message). [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#possible-words-api) Possible Words API ------------------------------------------------------------------------------------------------------------------- * Bij het opstarten van de web server moet de `WORDS` array gevuld worden met de woorden uit de API. Deze bevat een lijst van woorden die mogelijk geraden kunnen worden. Gebruik hiervoor een fetch op https://raw.githubusercontent.com/similonap/word-guess-api/main/words.json * Pas de code aan van de `guess` POST route zodat deze de `WORDS` array gebruikt om te controleren of het woord in deze lijst staat. Geef een foutmelding als het woord niet in de lijst staat. WIOHR is een voorbeeld van een woord dat niet in de lijst staat. KRUID is een voorbeeld van een woord dat wel in de lijst staat. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6591a26946a50a71bde21661009eaf29a95bc621%252Fwordguess-2.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=6191fbb&sv=2) alt text [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#possible-words-search) Possible Words Search ------------------------------------------------------------------------------------------------------------------------- * Pas de `/words` route aan zodat hij alleen de eerste 40 woorden van de WORDS array toont. * Voeg een query parameter `q` toe aan de `/words` route. Als deze aanwezig is toon je enkel de woorden die deze query parameter bevatten. (bv. /words?q=hello) * Sorteer de woorden alfabetisch. Als je de query parameter `direction` meegeeft kan je de sorteer richting bepalen (asc of desc). * Voorzie een form op de `words.ejs` pagina die de gebruiker toelaat om te zoeken naar woorden. (GET request) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-62988af1a8e0c6a3c892b980cac42a29de658a18%252Fwords-2.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=637bb593&sv=2) alt text [VorigeTwitter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/twitter) [Volgende13\. Mongo Basics](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13) Laatst bijgewerkt 9 maanden geleden * [Includes](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#includes) * [Words Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-module) * [Words Route](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-route) * [Words Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#words-form) * [Restart Game](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#restart-game) * [Possible Words API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#possible-words-api) * [Possible Words Search](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo12/word-guess#possible-words-search) --- # Steam | WebOntwikkeling 2025 #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/steam#steam) Steam In deze oefening bouwen we verder op het volgende starter project: [steam-starter.zip](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/express/steam/steam-starter.zip) . Deze applicatie is een eenvoudige express applicatie die een route heeft die een lijst van games toont. Bovenaan staat er al formulier om te kunnen sorteren. De sorteer functionaliteit is echter nog niet geïmplementeerd. We willen dat de gebruiker kan sorteren op Name, Release Year,Minimum Age en developer. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-ff3e63236432546e35f4539eb72cfa6e04320a02%252Fsort.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5ceb6abb&sv=2) alt text De sorteer functionaliteit moet werken op basis van een GET request en werken met query parameters. Een voorbeeld url kan er als volgt uitzien: Dit zou de games sorteren op naam in dalende volgorde. #### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/steam#uitbreiding) Uitbreiding Zorg ervoor dat de gebruiker ook kan sorteren aan de hand van de headers van de tabel. Als de gebruiker op de header klikt, moet de tabel gesorteerd worden op basis van de kolom waarop geklikt is. Als de gebruiker nogmaals klikt op dezelfde header, moet de sorteer volgorde omgekeerd worden. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-517fb026247af15c798094e057927a52c0770bd2%252Fsort_header.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=1c75ead3&sv=2) alt text [VorigeNewspaper Search](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-search) [Volgende10\. Post Request](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10) Laatst bijgewerkt 1 jaar geleden Kopiëren http://localhost:3000/?sortField=name&sortDirection=desc --- # Games DB | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `games-db` en installeer de `mongodb` package. In deze oefening gaan we een node js applicatie maken die gebruik maakt van een MongoDB database. We gaan een eenvoudige applicatie maken met een lijst van games. Voorbeeld data We beginnen met een lijst van Game objecten volgens de volgende interface: Kopiëren interface Game { _id?: ObjectId; name: string; price: number; releaseDate: Date; rating: number; publisher: string; } en de volgende data: Kopiëren [\ {\ name: 'The Witcher 3: Wild Hunt',\ price: 39.99,\ releaseDate: new Date('2015-05-19'),\ rating: 9.3,\ publisher: 'CD Projekt',\ },\ {\ name: 'Red Dead Redemption 2',\ price: 59.99,\ releaseDate: new Date('2018-10-26'),\ rating: 9.7,\ publisher: 'Rockstar Games',\ },\ {\ name: 'The Legend of Zelda: Breath of the Wild',\ price: 59.99,\ releaseDate: new Date('2017-03-03'),\ rating: 9.6,\ publisher: 'Nintendo',\ },\ {\ name: 'The Elder Scrolls V: Skyrim',\ price: 39.99,\ releaseDate: new Date('2011-11-11'),\ rating: 9.5,\ publisher: 'Bethesda Softworks',\ },\ {\ name: 'The Last of Us Part II',\ price: 59.99,\ releaseDate: new Date('2020-06-19'),\ rating: 9.2,\ publisher: 'Sony Interactive Entertainment',\ },\ {\ name: 'God of War',\ price: 39.99,\ releaseDate: new Date('2018-04-20'),\ rating: 9.4,\ publisher: 'Sony Interactive Entertainment',\ },\ {\ name: 'Dark Souls III',\ price: 59.99,\ releaseDate: new Date('2016-04-12'),\ rating: 9.1,\ publisher: 'FromSoftware',\ },\ {\ name: 'Grand Theft Auto V',\ price: 29.99,\ releaseDate: new Date('2013-09-17'),\ rating: 9.8,\ publisher: 'Rockstar Games',\ },\ ]; [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-1) Opdracht 1 ------------------------------------------------------------------------------------------------------------ Zorg ervoor dat de data van de games in een MongoDB database terecht komt. Je kan deze data toevoegen in de collection games. De databasenaam mag je zelf kiezen. Kijk eerst na of er al games in de collection staan. Als dat zo is, dan voeg je de games niet toe. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-2) Opdracht 2 ------------------------------------------------------------------------------------------------------------ Maak een functie `showAllGames` die alle games uit de database ophaalt en in de console toont. Toon alleen de naam, de prijs, de release date en de rating van de games. Je kan console.table gebruiken om de data in een tabel te tonen. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-3) Opdracht 3 ------------------------------------------------------------------------------------------------------------ Maak een functie `showGamesByPublisher` die alle games uit de database ophaalt die gepubliceerd zijn door een bepaalde uitgever. De functie heeft als parameter een uitgever. De functie toont de games in de console. Toon alleen de naam, de prijs, de release date en de rating van de games. Je kan console.table gebruiken om de data in een tabel te tonen. Gebruik deze functie met de parameter "Sony Interactive Entertainment" om te testen of de functie werkt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-4) Opdracht 4 ------------------------------------------------------------------------------------------------------------ Maak een functie `showGamesCheaperThan` die alle games uit de database ophaalt die goedkoper zijn dan een bepaald bedrag. De functie heeft als parameter een bedrag. De functie toont de games in de console. Toon alleen de naam, de prijs, de release date en de rating van de games. Je kan console.table gebruiken om de data in een tabel te tonen. Gebruik deze functie met de parameter 40 om te testen of de functie werkt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-5) Opdracht 5 ------------------------------------------------------------------------------------------------------------ Pas de `showAllGames` functie aan zodat een parameter sort kan meegegeven worden. De parameter sort kan de volgende waarden hebben: name, price, releaseDate en rating. De functie sorteert de games op basis van de parameter sort. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-6) Opdracht 6 ------------------------------------------------------------------------------------------------------------ Maak een functie `showHighestRatedGame` die de game met de hoogste rating uit de database ophaalt en in de console toont. Toon alleen de naam, de prijs, de release date en de rating van de game. Je kan console.table gebruiken om de data in een tabel te tonen (zelfs al is er maar 1 game). Gebruik deze functie om te testen of de functie werkt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-7) Opdracht 7 ------------------------------------------------------------------------------------------------------------ Maak een functie `showGamesWithPriceBetween` die alle games uit de database ophaalt die tussen een bepaald bedrag liggen. De functie heeft als parameters een minimum en een maximum bedrag. De functie toont de games in de console. Toon alleen de naam, de prijs, de release date en de rating van de games. Je kan console.table gebruiken om de data in een tabel te tonen. Gebruik deze functie met de parameters 40 en 50 om te testen of de functie werkt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-8) Opdracht 8 ------------------------------------------------------------------------------------------------------------ Maak een functie `discountAllGames` die een parameter discount heeft. De parameter discount is een percentage. De functie verlaagt de prijs van alle games met het percentage dat meegegeven is. De functie toont de games in de console. Toon alleen de naam, de prijs, de release date en de rating van de games. Je kan console.table gebruiken om de data in een tabel te tonen. Toon de games voor en na de korting om te testen of de functie werkt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-9) Opdracht 9 ------------------------------------------------------------------------------------------------------------ Maak een functie `deleteAllGames` die alle games uit de database verwijdert. Voer deze functie uit om te testen of de functie werkt. Toon de games in de console om te testen of de games verwijderd zijn. [VorigePet Shelter](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/pet-shelter) [Volgende15\. Mongo + Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express) Laatst bijgewerkt 1 jaar geleden * [Opdracht 1](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-1) * [Opdracht 2](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-2) * [Opdracht 3](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-3) * [Opdracht 4](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-4) * [Opdracht 5](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-5) * [Opdracht 6](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-6) * [Opdracht 7](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-7) * [Opdracht 8](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-8) * [Opdracht 9](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries/games-db#opdracht-9) --- # Milestone 2 - Express | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#opdracht-specificaties) Opdracht Specificaties ------------------------------------------------------------------------------------------------------------------------------------------ ### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#undefined) Vanaf nu is het verplicht om de data via een fetch in te lezen van je publiekelijk beschikbare json file! ### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#overzichtspagina-met-objecten-in-een-tabel) Overzichtspagina met Objecten in een Tabel Creëer een overzichtspagina waar alle objecten worden weergegeven in een tabelvorm. Je mag zelf kiezen welke vijf velden van de objecten niet getoond worden in de tabel. Dit betekent dat sommige informatie van de objecten bewust wordt weggelaten voor een overzichtelijker weergave. #### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#functionaliteiten) Functionaliteiten: * **Doorklikken naar Detailpagina**: Voor elk object in de tabel, moet er een optie zijn om door te klikken naar een gedetailleerde pagina waar alle informatie van het object zichtbaar is, inclusief een afbeelding van het object. * **Filterfunctie op Naam**: Op de overzichtspagina moet een filterfunctie aanwezig zijn waarmee gebruikers kunnen filteren op de naam van de objecten. Dit filter checkt of de ingevoerde tekst aanwezig is in de namen van de objecten. * **Sorteermogelijkheden**: Gebruikers moeten in staat zijn om de objecten in de tabel te sorteren op basis van elk veld, zowel in oplopende (asc) als in aflopende (desc) volgorde. * **Doorklikken naar Gerelateerde Objecten**: Als een object verwijst naar een ander object, moet er een mogelijkheid zijn om vanuit de detailpagina van het eerste object door te klikken naar de detailpagina van het gerelateerde object. * **Weergave van Subobjecten**: Op de detailpagina van een object moet er een lijst zijn van alle subobjecten die bij dit object horen. Deze lijst moet basisinformatie van de subobjecten bevatten en een optie om door te klikken naar de detailpagina's van deze subobjecten. * **Navigatiebalk**: Introduceer een navigatiebalk die gebruikers in staat stelt gemakkelijk tussen de verschillende delen van de applicatie te navigeren, zoals de overzichtspagina's. De positie van de navigatiebalk is flexibel en kan worden aangepast aan de layout en het design van de applicatie. #### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#opmerkingen) Opmerkingen: * **Styling**: Je bent vrij om zelf CSS te schrijven voor de styling van de pagina's. Daarnaast is het toegestaan om frameworks zoals **Tailwind** of **Bootstrap** te gebruiken voor het design. Zorg ervoor dat de interface gebruiksvriendelijk en overzichtelijk blijft. * **Responsief Ontwerp**: Het wordt sterk aangemoedigd om een responsief ontwerp te hanteren voor de applicatie. * **Herbruikbaarheid**: Implementeer de navigatiebalk met behulp van include files om hergebruik van code te bevorderen. Dit zorgt voor een consistent uiterlijk over alle pagina's heen, zonder dat er sprake is van code duplicatie, wat bijdraagt aan een meer gestructureerde en onderhoudbare codebase. * **Server-side**: Alle filtering en sortering gebeurt server-side. Deze specificaties zijn bedoeld om een interactieve en gebruiksvriendelijke interface te bieden waarmee gebruikers gemakkelijk door de objecten en hun details kunnen navigeren, filteren en sorteren voor betere toegankelijkheid en overzicht. ### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#voorbeeldproject-trading-cards) Voorbeeldproject: Trading Cards Als onderdeel van deze opdracht is er een voorbeeldproject gemaakt dat de functionaliteiten illustreert met gebruik van trading cards. Dit voorbeeld dient als inspiratie en richtlijn voor het ontwikkelen van je eigen project. #### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#screenshots) Screenshots Bij dit voorbeeldproject zijn screenshots inbegrepen om een visuele indruk te geven van hoe de functionaliteiten geïmplementeerd kunnen worden. Let op de volgende aspecten in de screenshots: * **Tabelweergave**: Hoe de objecten in tabelvorm worden gepresenteerd, met aandacht voor welke velden zijn weggelaten voor overzichtelijkheid. * **Detailpagina**: De vormgeving en inrichting van de detailpagina van een object, inclusief afbeelding. * **Filter- en sorteeropties**: Hoe de filter- en sorteermogelijkheden zijn geïntegreerd in de gebruikersinterface. Deze screenshots dienen als voorbeeld en zijn niet bedoeld om exact gekopieerd te worden. Gebruik ze als inspiratiebron en pas de ideeën toe binnen de context van je eigen project. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FV27ksJCRmVRq4W5VJGce%252Fimage.png%3Falt%3Dmedia%26token%3Df042f292-f406-49c6-be36-eff0ca27938f&width=768&dpr=4&quality=100&sign=330c0898&sv=2) Navigatiebalk ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FXDkF6dcaTiGJrFHM720R%252Fimage.png%3Falt%3Dmedia%26token%3Db558bd35-f699-407c-86d0-cb40dc37d8ea&width=768&dpr=4&quality=100&sign=a82a55af&sv=2) Overzichtspagina met navigatiebalk ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FcxYyWwX18HsNFHezntnk%252Fimage.png%3Falt%3Dmedia%26token%3Da1030500-5e5a-4280-b035-04ece88fd4c8&width=768&dpr=4&quality=100&sign=1c5839ab&sv=2) Overzichtpagina van de trading cards ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FhJn9Qp4D0VAhUiRabc5d%252Fimage.png%3Falt%3Dmedia%26token%3D4f55aff2-29da-4efc-a0dc-de8f8cea38d3&width=768&dpr=4&quality=100&sign=9c19cf15&sv=2) Sortering van velden ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FM5tz52xNXLoOBiUbHj9D%252Fimage.png%3Falt%3Dmedia%26token%3D9db05145-b239-4302-afd3-28baaa6358c4&width=768&dpr=4&quality=100&sign=778d99cd&sv=2) Search functionaliteit ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FzVKeR8U8pwL5ErlbkcGD%252Fimage.png%3Falt%3Dmedia%26token%3D4dfb09f4-96dd-4012-970a-0c02bb9aa5b4&width=768&dpr=4&quality=100&sign=82f968ce&sv=2) Overzicht van de guilds (De gerelateerde objecten) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fn2xgx3XgXm2WHbKOBRpP%252Fimage.png%3Falt%3Dmedia%26token%3Df8d2e30b-8e8b-49da-b320-c93a1c05a2e2&width=768&dpr=4&quality=100&sign=856fc26c&sv=2) Detail pagina van de trading cards (hoofdobjecten) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252FpNvLGqn0NkmbzdxuQjYz%252Fimage.png%3Falt%3Dmedia%26token%3Dcbf4bcc2-b85e-463a-8461-bc21f1834287&width=768&dpr=4&quality=100&sign=749bd8b2&sv=2) Detail pagina van de gerelateerde guilds (geralateerde objecten) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Frn3999UanXLGqSNN7wXF%252Fmilestone2.gif%3Falt%3Dmedia%26token%3De3fa50e3-4b2b-4558-afc2-5f135a41a7fc&width=768&dpr=4&quality=100&sign=fe5f6e9a&sv=2) [VorigeMilestone 1 - Terminal App](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app) [VolgendeMilestone 3 - MongoDB](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb) Laatst bijgewerkt 9 maanden geleden * [Opdracht Specificaties](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#opdracht-specificaties) * [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#undefined) * [Overzichtspagina met Objecten in een Tabel](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#overzichtspagina-met-objecten-in-een-tabel) * [Voorbeeldproject: Trading Cards](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express#voorbeeldproject-trading-cards) --- # Todo List String | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `todo-list-string`. We willen een programma maken dat een todo lijst bijhoudt. De gebruiker kan taken toevoegen aan de lijst. De gebruiker kan ook taken op de lijst afvinken. Voorzie bij het opstarten van het programa twee arrays. Eén voor de taken en één voor de taken die afgevinkt zijn. Een taak is gewoon een string. Bij het opstarten van de applicatie wordt er een menu getoond. De gebruiker kan kiezen uit de volgende opties: Kopiëren [1] Add a task [2] Show tasks [3] Check a task [4] Exit Gebruik hiervoor de `keyInSelect` functie van de readline-sync library. Als de gebruiker kiest voor "Add a task" dan kan hij een taak toevoegen aan de lijst. De taak wordt toegevoegd aan de array van de taken. Kopiëren Enter a task: Task 1 Als de gebruiker kiest voor "Show tasks" dan worden de taken getoond. De taken die afgevinkt zijn worden getoond met een "X" ervoor. De taken die nog niet afgevinkt zijn worden getoond met een " " ervoor. Dit zal er als volgt uitzien: Kopiëren 1. [ ] Task 1 2. [X] Task 2 3. [X] Task 3 Als de gebruiker kiest voor "Check a task" dan kan hij een taak afvinken. De gebruiker geeft het nummer van de taak in die hij wil afvinken. De taak wordt dan verplaatst van de array van de taken naar de array van de afgevinkte taken. Kopiëren [1] Task 1 [2] Task 2 [3] Task 3 What did you do? [1, 2, 3]: 2 Als de gebruiker kiest voor "Exit" dan stopt het programma. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/todo-list-string#voorbeeldinteractie) **Voorbeeldinteractie:** ------------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-80ba9df17b1e66c8dc9e6ab28d73a247e7f7bcdb%252Ftodos.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=1466e651&sv=2) [VorigePokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/pokemon-team) [VolgendeTick Tac Toe](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/tic-tac-toe) Laatst bijgewerkt 1 jaar geleden --- # Pokemon Team | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `pokemon` Gegeven is de volgende array van 20 pokemon: Kopiëren let pokemon: string[] = [\ "Bulbasaur",\ "Ivysaur",\ "Venusaur",\ "Charmander",\ "Charmeleon",\ "Charizard",\ "Squirtle",\ "Wartortle",\ "Blastoise",\ "Caterpie",\ "Metapod",\ "Butterfree",\ "Weedle",\ "Kakuna",\ "Beedrill",\ "Pidgey",\ "Pidgeotto",\ "Pidgeot",\ "Rattata",\ "Raticate",\ "Spearow",\ ]; * Maak een variabele `team`van het type string\[\]. Deze array bevat de pokemon van de gebruiker van het programma. * Gebruik een lus om de pokemon te tonen aan de gebruiker. Toon eerst de index gevolgd door de naam van de pokemon. Je gebruikt dus nog NIET de ingebouwde `keyInSelect` van de readline-sync library. * Vraag daarna aan de gebruiker welke pokemon er moet toegevoegd worden aan het team. Dit doe je aan de hand van de index van de pokemon. Dit doe je tot de gebruiker STOP ingeeft. Je kan dit doen aan de hand van een `do while` loop. * Als de gebruiker een pokemon ingeeft die al in het team zet dan krijgt hij hiervan een melding en wordt de pokemon niet toegevoegd: * Als de pokemon niet bekend is (dus het ingegeven nummer groter is dan de lengte van de array) wordt er ook een melding gegeven: * Als je STOP hebt ingegeven dan wordt het team van de gebruiker op het scherm getoond: **Voorbeeld interactie:** ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-4df388eec6827414a287d0588c3a6b5b7efcff3d%252Fpokemon.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=150fcb09&sv=2) [VorigeRot13](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/rot13) [VolgendeTodo List String](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/todo-list-string) Laatst bijgewerkt 1 jaar geleden Kopiëren 0. Bulbasaur 1. Ivysaur 2. Venusaur 3. Charmander 4. Charmeleon ... Kopiëren Welke pokemon wil je in je team? [0-20]: 4 Welke pokemon wil je in je team? [0-20]: 3 Welke pokemon wil je in je team? [0-20]: STOP Kopiëren Welke pokemon wil je in je team? [0-20]: 4 Welke pokemon wil je in je team? [0-20]: 3 Welke pokemon wil je in je team? [0-20]: 4 Deze pokemon zit al in je team Welke pokemon wil je in je team? [0-20]: 2 Welke pokemon wil je in je team? [0-20]: STOP Kopiëren Welke pokemon wil je in je team? [0-20]: 21 Deze pokemon ken ik niet Welke pokemon wil je in je team? [0-20]: 4 Kopiëren Welke pokemon wil je in je team? [0-20]: 1 Welke pokemon wil je in je team? [0-20]: 2 Welke pokemon wil je in je team? [0-20]: 3 Welke pokemon wil je in je team? [0-20]: 4 Welke pokemon wil je in je team? [0-20]: 5 Welke pokemon wil je in je team? [0-20]: 6 Welke pokemon wil je in je team? [0-20]: STOP Jouw team van pokemon is: 1. Ivysaur 2. Venusaur 3. Charmander 4. Charmeleon 5. Charizard 6. Squirtle --- # Milestone 1 - Terminal App | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#json-aanmaken) JSON Aanmaken ----------------------------------------------------------------------------------------------------------------------------- We gaan een json bestand nodig hebben dat we gaan gebruiken als basis van een API. Iedereen mag zelf beslissen welke soort data hij/zij in het bestand steekt. Het is wel belangrijk dat het bestand aan een aantal voorwaarden voldoet: * Het bestand moet een array van objecten bevatten (minimum 10). * Elk object moet minstens de volgende soort properties bevatten : * Een id property met een unieke waarde. * Property met een korte string als waarde: Dit kan bijvoorbeeld een naam zijn. * Property met een lange string als waarde: Dit kan bijvoorbeeld een beschrijving zijn. * Property met een number als waarde: Dit kan bijvoorbeeld de leeftijd zijn. * Property met een boolean als waarde: Dit kan aangeven of iemand bijvoorbeeld een actieve status heeft. * Property met een datum als waarde: Dit kan de geboortedatum zijn. * Property met een image URL als waarde: Dit kan de URL van een profielfoto zijn. * Property waarvan de waarde een string is met een beperkt aantal mogelijke waarden. * Property met een array van strings als waarde: Dit kunnen bijvoorbeeld hobby's zijn. * Property met een ander object als waarde. Dit object moet op zijn beurt ook een aantal properties bevatten * Een id met een unieke waarde * Een aantal properties (mogen string, booleans, numbers, image url, ...) * Dit object is afkomstig van een 2de json bestand. Let op dat dit een minimale vereiste is. Je mag gerust meer properties toevoegen als dat nodig is voor je idee. Zorg vooral voor realistische data. Images kunnen eenvoudig worden gegenereerd aan de hand van AI generation tools zoals DALL-E (via bing of chatgpt) **Voorbeelden:** **Fantasy Card Game** **Music artists** [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#json-hosten) JSON Hosten ------------------------------------------------------------------------------------------------------------------------- We gaan github gebruiken voor ons JSON bestand te hosten. Hoewel github gebruikt wordt kunnen we dit ook gebruiken om bestanden in op te slaan en publiekelijk te hosten (in beperkte mate) * Maak een nieuwe github repository aan en zet deze publiek. * Je kan deze clonen of gewoon via de web interface de bestanden toevoegen. * Upload je image bestanden naar github (of push deze naar je repository) * Update de image urls in je json file zodat deze naar github urls wijzen. Zorg zeker dat je de raw url gebruikt als image url. Bv: [https://raw.githubusercontent.com/similonap/fake-gpt/main/images/chatbot.png](https://raw.githubusercontent.com/similonap/fake-gpt/main/images/chatbot.png) * Upload je json naar github (of push deze naar je repository) Je mag uiteraard zelf ook hosting voorzien voor je json bestand en images. Zorg er gewoon voor dat je json publiekelijk beschikbaar is en je images. [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#interfaces) Interfaces ----------------------------------------------------------------------------------------------------------------------- Maak een apart bestand aan waarin je de interfaces definieert voor de data die je hebt aangemaakt. Zorg ervoor dat alle interfaces zijn geexporteerd zodat je ze kan gebruiken in andere bestanden. [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#console-app) Console App ------------------------------------------------------------------------------------------------------------------------- Maak een console app aan die de data uit je json file inleest en deze op een overzichtelijke manier weergeeft in de console. Zorg ervoor dat je aan de hand van een menu de gebruiker de mogelijkheid geeft om de data te filteren op een id. Als de gebruiker een id ingeeft die niet bestaat in de data, geef je een gepaste melding. De applicatie kan er als volgt uitzien: ### [](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#inzenden) Inzenden Zorg ervoor dat je alles pushed naar je repository en de link naar je repository inzendt via digitap. De deadline vind je op digitap. [VorigeSemester 2](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2) [VolgendeMilestone 2 - Express](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-2-express) Laatst bijgewerkt 11 maanden geleden * [JSON Aanmaken](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#json-aanmaken) * [JSON Hosten](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#json-hosten) * [Interfaces](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#interfaces) * [Console App](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#console-app) * [Inzenden](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-1-terminal-app#inzenden) cards.json Kopiëren [\ {\ "id": "FTC-001",\ "name": "Aether Knight",\ "description": "A legendary knight who harnesses the ethereal powers of the Aether, wielding them to maintain balance across the realms.",\ "age": 457,\ "isActive": true,\ "birthDate": "1567-03-05",\ "imageUrl": "https://example.com/images/aether-knight.jpg",\ "rarity": "Legendary",\ "abilities": ["Teleportation", "Energy Manipulation", "Dimensional Travel"],\ "element": "Aether",\ "guildAffiliation": {\ "id": "GUILD-009",\ "name": "Order of the Cosmic Veil",\ "guildMaster": "Celestial Mage",\ "guildEmblemUrl": "https://example.com/images/guilds/cosmic-veil-emblem.jpg",\ "foundedYear": 1423,\ "motto": "Balance in All, All in Balance"\ }\ },\ {\ "id": "FTC-002",\ "name": "Shadow Enchantress",\ "description": "A mysterious sorceress cloaked in darkness, wielding shadow magic to manipulate the fabric of reality and ensnare her foes.",\ "age": 324,\ "isActive": false,\ "birthDate": "1699-10-31",\ "imageUrl": "https://example.com/images/shadow-enchantress.jpg",\ "rarity": "Epic",\ "abilities": ["Shadow Manipulation", "Illusion Casting", "Night Vision"],\ "element": "Shadow",\ "guildAffiliation": {\ "id": "GUILD-015",\ "name": "Brotherhood of the Dusk",\ "guildMaster": "Darkness Wielder",\ "guildEmblemUrl": "https://example.com/images/guilds/dusk-brotherhood-emblem.jpg",\ "foundedYear": 1578,\ "motto": "In Shadows, Truth"\ }\ }\ ] guilds.json Kopiëren [\ {\ "id": "GUILD-009",\ "name": "Order of the Cosmic Veil",\ "guildMaster": "Celestial Mage",\ "guildEmblemUrl": "https://example.com/images/guilds/cosmic-veil-emblem.jpg",\ "foundedYear": 1423,\ "motto": "Balance in All, All in Balance"\ },\ {\ "id": "GUILD-015",\ "name": "Brotherhood of the Dusk",\ "guildMaster": "Darkness Wielder",\ "guildEmblemUrl": "https://example.com/images/guilds/dusk-brotherhood-emblem.jpg",\ "foundedYear": 1578,\ "motto": "In Shadows, Truth"\ }\ ] artists.json Kopiëren [\ {\ "id": "ART-001",\ "name": "Elena Ray",\ "description": "Elena Ray is a visionary pop artist known for her electrifying performances and innovative soundscapes that blend electronic music with traditional pop.",\ "age": 28,\ "isActive": true,\ "birthDate": "1995-07-22",\ "imageUrl": "https://example.com/images/artists/elena-ray.jpg",\ "genre": "Pop/Electronic",\ "instruments": ["Vocals", "Keyboard", "Synthesizer"],\ "recordLabel": {\ "id": "LABEL-101",\ "name": "Neon Groove Records",\ "labelLogoUrl": "https://example.com/images/labels/neon-groove-logo.jpg",\ "foundedYear": 2010,\ "founder": "Maxwell Turner",\ "headquarters": "Los Angeles, California"\ }\ },\ {\ "id": "ART-002",\ "name": "The Midnight Howlers",\ "description": "An indie rock band hailing from Austin, Texas, known for their gritty guitar riffs and raw, emotional lyrics.",\ "age": 5, // This could represent the number of years the band has been together\ "isActive": true,\ "birthDate": "2019-05-16",\ "imageUrl": "https://example.com/images/artists/midnight-howlers.jpg",\ "genre": "Indie Rock",\ "instruments": ["Guitar", "Drums", "Bass"],\ "recordLabel": {\ "id": "LABEL-202",\ "name": "Lone Star Records",\ "labelLogoUrl": "https://example.com/images/labels/lone-star-logo.jpg",\ "foundedYear": 2005,\ "founder": "Elijah Reed",\ "headquarters": "Austin, Texas"\ }\ }\ ] recordLabel.json Kopiëren [\ {\ "id": "LABEL-101",\ "name": "Neon Groove Records",\ "labelLogoUrl": "https://example.com/images/labels/neon-groove-logo.jpg",\ "foundedYear": 2010,\ "founder": "Maxwell Turner",\ "headquarters": "Los Angeles, California"\ },\ {\ "id": "LABEL-202",\ "name": "Lone Star Records",\ "labelLogoUrl": "https://example.com/images/labels/lone-star-logo.jpg",\ "foundedYear": 2005,\ "founder": "Elijah Reed",\ "headquarters": "Austin, Texas"\ }\ ] Kopiëren Welcome to the JSON data viewer! 1. View all data 2. Filter by ID 3. Exit Please enter your choice: 1 - Aether Knight (FTC-001) - Shadow Enchantress (FTC-002) - ... Kopiëren Welcome to the JSON data viewer! 1. View all data 2. Filter by ID 3. Exit Please enter your choice: 2 Please enter the ID you want to filter by: FTC-001 - Aether Knight (FTC-001) - Description: A legendary knight who harnesses the ethereal powers of the Aether, wielding them to maintain balance across the realms. - Age: 457 - Active: true - Birthdate: 1567-03-05 - Image: https://example.com/images/aether-knight.jpg - Rarity: Legendary - Abilities: Teleportation, Energy Manipulation, Dimensional Travel - Element: Aether - Guild: Order of the Cosmic Veil - Name: Order of the Cosmic Veil - Guild Master: Celestial Mage - Emblem: https://example.com/images/guilds/cosmic-veil-emblem.jpg - Founded: 1423 - Motto: Balance in All, All in Balance --- # Newspaper | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `newspaper` en installeer express volgens de instructies in de theorie les. Zorg ervoor dat ejs wordt geinstalleerd en dat je de view engine instelt op ejs. We bouwen in deze oefening een kleine applicatie om krantenartikels te tonen. Hier onder vind je een overzicht over alle routes die deze applicatie moet aanbieden en wat ze allemaal moeten doen. Je kan starten van deze code die al een aantal artikels bevat: Kopiëren import express from "express"; const app = express(); app.set("view engine", "ejs"); app.set("port", 3000); app.use(express.static("public")); interface NewsArticle { id: number; title: string; content: string; topic: string; } const topics : string[] = [\ "politics",\ "economy",\ "sports",\ "entertainment",\ "technology"\ ]; const articles: NewsArticle[] = [\ {\ id: 1,\ title: "Local Duck Accidentally Elected Mayor, Promises Unlimited Bread for Parks",\ content: "In an unexpected turn of events, a local duck was elected mayor after a mix-up at the ballot box. The duck's first order of business? Unlimited bread for all parks. Residents are quacking up over the decision.",\ topic: "politics"\ },\ {\ id: 2,\ title: "Economy Crashes as Bitcoin is Replaced by Dogecoin as Leading Currency",\ content: "In a shocking turn of events, Dogecoin has overtaken Bitcoin as the world's leading cryptocurrency, causing the economy to spin into a frenzied tailspin. Investors are advised to buckle up for a bumpy ride to the moon.",\ topic: "economy"\ },\ {\ id: 3,\ title: "Esports Team Drafts AI Bot, Claims It's a 'Real Gamer'",\ content: "An up-and-coming esports team has drafted an AI bot as their latest player, claiming it's not just a machine but a 'real gamer'. The bot's favorite snack? Bytes and bits.",\ topic: "sports"\ },\ {\ id: 4,\ title: "Breaking: Cats to Star in a Remake of 'The Matrix', Internet Pawsitively Excited",\ content: "In an unexpected announcement, a new version of 'The Matrix' will star an all-cat cast. The internet is already purring with excitement, and the feline actors are ready to show off their bullet-dodging skills.",\ topic: "entertainment"\ },\ {\ id: 5,\ title: "New Programming Language 'CaffeineScript' Only Functions with Coffee Machine Connected",\ content: "Tech innovators have unveiled 'CaffeineScript', a new programming language that only compiles when a coffee machine is detected. Programmers are now brewing up code more than ever.",\ topic: "technology"\ },\ {\ id: 6,\ title: "Penguins Protest Lack of Linux Support at Local Zoo",\ content: "A group of tech-savvy penguins at the local zoo have started a peaceful protest over the lack of Linux support in their habitat's computer systems. 'We demand open source fish tracking!' one penguin was quoted.",\ topic: "politics"\ },\ {\ id: 7,\ title: "World Bank Announces New Currency Based on Avocado Toast",\ content: "In a bid to appeal to millennials, the World Bank has announced the launch of a new currency based on the stable value of avocado toast. Economists are puzzled, brunch enthusiasts are thrilled.",\ topic: "economy"\ },\ {\ id: 8,\ title: "Chess Boxing Championship Draws Tech Crowd with Live Coding Rounds",\ content: "The latest craze in the sports world, Chess Boxing, has added live coding rounds to the competition, drawing a massive tech crowd. Participants must checkmate or code their way to victory.",\ topic: "sports"\ },\ {\ id: 9,\ title: "Aliens Invade Hollywood, Demand Roles in Sci-Fi Films",\ content: "A group of aliens has landed in Hollywood, not with plans for world domination, but with headshots and resumes, demanding to be cast in authentic sci-fi roles. Directors are reportedly considering their demands.",\ topic: "entertainment"\ },\ {\ id: 10,\ title: "Internet Explorer Launches Comeback as Hipster Browser, Features 'Slow Surf' Mode",\ content: "In an unexpected twist, Internet Explorer is making a comeback as the browser of choice for hipsters, featuring an exclusive 'Slow Surf' mode for a more 'authentic' browsing experience.",\ topic: "technology"\ },\ {\ id: 11,\ title: "Politicians Debate Over Who Gets to Control the Weather Machine",\ content: "A heated debate has erupted among politicians over who should have the control over the newly invented weather machine. Proposals range from 'Rainy Day Funds' to 'Sunny Money Policies'.",\ topic: "politics"\ },\ {\ id: 12,\ title: "Global Economy Now Backed by Memes, 'Pepe' Declared Reserve Currency",\ content: "In a bold move, global economies have shifted to a meme-based standard, with 'Rare Pepes' being declared as the new reserve currency. Financial analysts are scrambling to adjust their portfolios.",\ topic: "economy"\ },\ {\ id: 13,\ title: "Virtual Reality Marathon Running: Athletes Compete from Couches",\ content: "The first-ever Virtual Reality Marathon allows athletes to compete from the comfort of their couches. Participants report severe thumb cramps but high levels of satisfaction.",\ topic: "sports"\ },\ {\ id: 14,\ title: "Time Travel Film Festival Confuses Audiences with Non-Linear Schedule",\ content: "The first Time Travel Film Festival has left audiences bewildered as the schedule is presented in a non-linear format. Films start in the middle, end at the beginning, and tickets are sold last week.",\ topic: "entertainment"\ },\ {\ id: 15,\ title: "'Quantum Debugging' Becomes New Buzzword Among Programmers, Still No One Understands It",\ content: "The tech world is abuzz with the latest trend: 'Quantum Debugging'. Despite its popularity, no one can explain what it is, but it reportedly fixes bugs not even created yet.",\ topic: "technology"\ }\ ]; app.listen(app.get("port"), () => { console.log(`Server is running on port ${app.get("port")}`); }); Zorg nu voor de volgende routes (je moet nog geen dynamische routes maken): * `/` laat alle artikels zien * `/politics` laat enkel de artikels zien die over politiek gaan * `/economy` laat enkel de artikels zien die over economie gaan * `/sports` laat enkel de artikels zien die over sport gaan * `/entertainment` laat enkel de artikels zien die over entertainment gaan * `/technology` laat enkel de artikels zien die over technologie gaan * Voorzie ook een 404 pagina die getoond wordt als de gebruiker een route probeert te bezoeken die niet bestaat. Alle routes gebruiken dezelfde ejs template om de artikels te tonen. Buiten de 404 pagina, die een eigen ejs template gebruikt. Hieronder een aantal voorwaarden waaraan je applicatie moet voldoen: * Bovenaan de pagina moet een navigatiebalk staan met links naar alle topics * De topics moeten dynamisch gegenereerd worden op basis van de topics array. (Via een for loop in de ejs template) * De artikels moeten `
    ` elementen gebruiken om de artikels te tonen. * Zorg voor styling van de artikels. * Zorg voor 2 partials `header` en `footer` die je kan includen in je ejs template. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3e63bd2ad81eff49e0fb8b3ddaed9839068a38d2%252Farticles.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5a59ee7b&sv=2) alt text [VorigeMaaltafels](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/maaltafels-ejs) [Volgende9\. Get Request](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9) Laatst bijgewerkt 1 jaar geleden --- # Todo List Fetch | WebOntwikkeling 2025 Maak een nieuw project met de naam `todo-list-fetch`. Gebruik de vorige todo list (met objecten) als basis. In plaats van de json data in een bestand te zetten ga je nu de data ophalen via een fetch request. Gebruik hiervoor de volgende url: `https://jsonplaceholder.typicode.com/todos/`. Zorg voor een goede error handling en geef de gebruiker feedback als er iets mis gaat. De werking van de todo list moet hetzelfde blijven. [VorigeSlow Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum) [VolgendeCocktails Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-promise-all) Laatst bijgewerkt 10 maanden geleden --- # Slow Sum | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `slow-sum` waarin je jouw bronbestanden voor deze oefening kan plaatsen. Plaats de onderstaande code in een bestand `index.ts` Kopiëren const slowSum = (a: number, b: number) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(a+b); },1000) }); } const slowMult = (a: number, b: number) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(a*b); },1500) }); } Dit zijn 2 functies die een promise terug geven. Ze simuleren een trage som functie en een trage vermenigvuldigings functie. 1. Roep de `slowSum` functie aan met de getallen 1 en 5 en zorg dat ze het resultaat van deze functie op het scherm laat zien. (zie output) 2. Roep de `slowSum` functie opnieuw aan met de getallen 1 en 5 maar zorg deze keer dat na het optellen de vermenigvuldigings functie \``slowMult` wordt aangeroepen dat het resultaat vermenigvuldigd met 2 en dan op het scherm laat zien. (zie output) 3. Maak een eigen `slowDiv` functie dat een deling doet (laat deze 2000 milliseconden duren). Zorg ervoor dat als je een deling door nul doet dat je de promise afkeurt met de melding "You cannot divide by zero". 4. Roep deze functie aan met de getallen 6 en 3 en laat het resultaat op het scherm zien. (zie output) 5. Roep deze functie aan met de getallen 6 en 0 en laat de error op het scherm zien. (zie output) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum#voorbeeld-interactie) Voorbeeld interactie -------------------------------------------------------------------------------------------------------------------- [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum#uitbreiding) Uitbreiding -------------------------------------------------------------------------------------------------- Maak een kopie van het `index.ts` oefening en noem deze `index_async.ts` Gebruik nu **async/await** in plaats van promises. [VorigePromise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/promise-all) [VolgendeTodo List Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/todo-list-fetch) Laatst bijgewerkt 1 jaar geleden * [Voorbeeld interactie](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum#voorbeeld-interactie) * [Uitbreiding](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum#uitbreiding) Kopiëren You cannot divide by zero 1 + 5 = 6 (6 / 3) = 2 (1 + 5) * 2 = 12 --- # Login Express | WebOntwikkeling 2025 Maak een nieuwe Express applicatie aan met de naam `login-express`. In deze applicatie gaan we een login systeem maken met de volgende vereisten: * Een login pagina met een formulier waarin de gebruiker zijn e-mailadres en wachtwoord kan invullen. * Een gebruiker kan inloggen met zijn e-mailadres en wachtwoord. * Alle wachtwoorden moeten gehasht worden opgeslagen in de database. Gebruik hiervoor de bcrypt library. * Als een gebruiker succesvol is ingelogd, wordt hij doorgestuurd naar een geheime pagina die zijn e-mailadres toont. * Voorzie twee rollen: `admin` en `user`. * Gebruik een middleware om te controleren of een gebruiker is ingelogd. * Gebruik een flash message om de gebruiker te informeren over fouten of successen bij het inloggen. * Gebruik een sessie om de gebruiker ingelogd te houden. Deze sessie moet over 1 week vervallen. * Voorzie een logout functionaliteit. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-f0ab84eefa7088a5445bcb110cacd666cd0d4ced%252Fscreen1.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=841a3fb2&sv=2) alt text ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-dfc1020f3828ad4a28540db42c5f76a342533113%252Fscreen2.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=17849dd9&sv=2) alt text [Vorige18\. Session based login](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login) [VolgendePokedex Express Sessions](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login/pokedex-express-sessions) Laatst bijgewerkt 1 jaar geleden --- # View Counter | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter#opdracht) Opdracht ----------------------------------------------------------------------------------------------- Maak een webserver in express die telkens een pagina teruggeeft met het totaal aantal bezoeken (globaal) en het aantal bezoeken per pad. Je moet dus een globale teller bijhouden en een teller per pad (bv door een object te gebruiken dat als key het pad heeft en als value het aantal views). Bij het herstarten van de server mogen de tellers opnieuw op 0 gezet worden. **Voor een handler te schrijven voor alle paden kan je best eens kijken hoe we de 404 handler hebben geschreven in de theorie.** [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter#voorbeeldinteractie) Voorbeeldinteractie --------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-7c76d866bbebd685d0ddaab0e0eb14eae2e419d9%252Fvisits.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=41338f98&sv=2) [VorigeDNA Match](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/dna-match) [VolgendeHogwarts Express CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud) Laatst bijgewerkt 1 jaar geleden * [Opdracht](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter#opdracht) * [Voorbeeldinteractie](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter#voorbeeldinteractie) --- # Pokemon Team | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `pokemon-team` en installeer de `mongodb` package. Je kan hiervoor starten vanuit het project [pokemon-team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/pokemon-team) dat je al eerder hebt gemaakt. Pas de code aan zodat je een MongoDB database gebruikt om je pokemon team op te slaan. Gebruik als db "exercises" en als collection "pokemon-team". In de originele oefening werd je team opgeslagen in een array van strings. In een mongoDB database kan je niet rechtstreeks een array van strings opslaan, dus je zal moeten werken met objecten met de interface `TeamPokemon` die er als volgt uitziet: Kopiëren interface TeamPokemon { _id?: ObjectId; pokemon: string; } Voor de rest moet de werking van de applicatie hetzelfde blijven. Met het verschil dat je nu de data uit de database haalt in plaats van uit een array en je dus je team kan bewaren tussen verschillende sessies. [VorigeMoviesDB](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/movies-db) [Volgende14\. Mongo Queries](https://apwt.gitbook.io/webontwikkeling-2025/labos/14.-mongo-queries) Laatst bijgewerkt 1 jaar geleden --- # Milestone 4 - Security | WebOntwikkeling 2025 * Bij het opstarten van de applicatie voeg je twee default gebruikers toe: een admin en een user. Zorg ervoor dat de wachtwoorden van deze gebruikers veilig worden opgeslagen (hint: bcrypt). De admin gebruiker heeft een ADMIN role en de user een USER role. * Voeg een login pagina toe aan de applicatie. De login pagina moet toegankelijk zijn voor iedereen. De login pagina moet een form bevatten met twee input velden: username en password. De login pagina moet ook een knop bevatten om het formulier te versturen. * Zorg ervoor dat de gebruiker na het inloggen wordt doorgestuurd naar het overzicht je dashboard dat je in vorige milestones hebt gemaakt. * Zorg ervoor dat de gebruiker niet bij de login pagina kan komen als hij al is ingelogd. Als de gebruiker al is ingelogd en hij gaat naar de login pagina, dan moet hij worden doorgestuurd naar het dashboard. * Zorg ervoor dat de gebruiker niet bij de dashboard pagina kan komen als hij niet is ingelogd. Als de gebruiker niet is ingelogd en hij gaat naar het dashboard, dan moet hij worden doorgestuurd naar de login pagina. * Alleen een ADMIN gebruiker mag de edit button zien op de dashboard pagina. Je kan dit doen door de button te verbergen voor de USER role. Zorg er ook voor dat de pagina zelf niet toegankelijk is voor de USER role. * Zorg ervoor dat de gebruiker zich ook kan uitloggen. Voeg een logout knop toe aan de dashboard pagina. Als de gebruiker op de logout knop klikt, dan moet hij worden uitgelogd en worden doorgestuurd naar de login pagina. * Zorg ervoor dat een gebruiker ook kan registreren. Dit moet gewoon een eenvoudige pagina zijn met een form met twee input velden: username en password. Als de gebruiker het formulier invult, dan moet hij worden geregistreerd en worden doorgestuurd naar de login pagina. Kijk ook of de gebruikersnaam al bestaat in de database. Als de gebruikersnaam al bestaat, geef dan een foutmelding. Zorg ervoor dat het wachtwoord veilig wordt opgeslagen. * Zorg dat je applicatie wordt gehosted op een cloud provider naar keuze en dus je applicatie online is te bezoeken. Voeg de link toe aan je README.md bestand. [VorigeMilestone 3 - MongoDB](https://apwt.gitbook.io/webontwikkeling-2025/project/semester-2/milestone-3-mongodb) Laatst bijgewerkt 8 maanden geleden --- # View Counter Sessions | WebOntwikkeling 2025 We bouwen hier verder op de oefening [View Counter Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-cookies) . In plaats van de bezoeken bij te houden in een cookie, houden we ze nu bij in een sessie. Vooraleer je aan deze oefening begint, kan je best de huidige cookies voor deze site verwijderen in de developer tools van je browser. Bekijk zeker het verschil tussen de twee oefeningen gebruik makend van de developer tools van je browser. [VorigeView Counter Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies/view-counter-cookies) [Volgende18\. Session based login](https://apwt.gitbook.io/webontwikkeling-2025/labos/18.-session-based-login) Laatst bijgewerkt 1 jaar geleden --- # DadJoke Express | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `dadjoke-express` en installeer express volgens de instructies in de theorie les. Schrijf een express server die de volgende routes ondersteund: * /joke/json * /joke/html Deze routes moeten allebij een dadjoke ophalen van `https://icanhazdadjoke.com/` en deze teruggeven. Als de route /joke/json is, moet de dadjoke in JSON formaat teruggegeven worden. Als de route /joke/html is, moet de dadjoke in HTML formaat teruggegeven worden. Bij het ophalen van de dadjoke moet je de headers aanpassen zodat de server weet dat je een JSON verwacht: Kopiëren const response = await fetch('https://icanhazdadjoke.com/', { headers: { Accept: 'application/json' }, }); De applicatie moet op poort 3000 draaien. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-3b6f6a513e0e9c3587f2e069a60d0c17c0667441%252Fdadjoke-html.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=9fdc4d5d&sv=2) /joke/html ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-c7ba454358ba0d62babc4ffa2e1bb587948c3f3a%252Fdadjoke-json.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=db14d93e&sv=2) /joke/json [VorigeHello Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/hello-express) [VolgendeBitcoin current](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7/bitcoin-current) Laatst bijgewerkt 1 jaar geleden --- # Form Express Test | WebOntwikkeling 2025 Download het [starter](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/testing/form-express-test/starter.zip) project. Dit project bevat een express applicatie. Deze applicatie bevat een form waar de geboorte datum en de huidige datum wordt gevraagd. Als de gebruiker dan op `Submit` drukt krijgt hij te zien hoe oud hij was op de gegeven datum. Schrijf testen voor deze applicatie. Run de testen met de code coverage tool en ga na of alles getest is. [VorigeMath Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-express-test) [VolgendePet Shelter Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/pet-shelter-express-test) Laatst bijgewerkt 1 jaar geleden --- # Cat Static | WebOntwikkeling 2025 Maak een nieuw project **catstatic** waarin je jouw bronbestanden voor deze oefening kan plaatsen. Installeer alle nodige libraries voor te werken met express en ejs. Maak een nieuwe express applicatie in een `index.ts` bestand. Zorg voor een GET route op `/cats/images` Zorg ervoor dat de volgende images getoond worden als je naar `http://localhost:8888/cats/images` surft. Zorg dat de array van image urls wordt doorgegeven via de render methode van de ejs template. [Cats.zip](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/express/catstatic/cats.zip) Zorg voor een **extern css bestand** waar je een eigen style geeft aan de pagina. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-0ef89421aa1d15875d4dac072f1603569ee171c6%252Fcats.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=122285c6&sv=2) [VorigeHello Express EJS](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/hello-express-ejs) [VolgendeMaaltafels](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/maaltafels-ejs) Laatst bijgewerkt 1 jaar geleden --- # Pet Shelter Express Test | WebOntwikkeling 2025 Bekijk de code van de Pet Shelter Express applicatie. [Pet Shelter Express](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/mongodb/pet-shelter-express/pet-shelter-express.zip) . Run hier de code coverage tool op en ga na of alles getest is. Bekijk ook uitvoerig de testen. [VorigeForm Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/form-express-test) [Volgende21\. Herhaling](https://apwt.gitbook.io/webontwikkeling-2025/labos/21.-herhaling) Laatst bijgewerkt 1 jaar geleden --- # Export Interfaces | WebOntwikkeling 2025 Pas voorgaande oefeningen aan zodat de interfaces die je hebt aangemaakt in een apart bestand worden geëxporteerd. Dit doen we door een nieuw bestand aan te maken met de naam `types.ts`. In dit bestand exporteer je de interfaces die je hebt aangemaakt. Importeer vervolgens deze interfaces in de bestanden waar je deze interfaces gebruikt. Zorg dat de oefening blijft werken zoals het hoort. [VorigeMath Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/math-module) [VolgendeCowsay Module](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cowsay-module) Laatst bijgewerkt 1 jaar geleden --- # Math Express Test | WebOntwikkeling 2025 Download het [starter](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/testing/math-express-test/starter.zip) project. Dit project bevat een express applicatie die een GET en een POST van `/sum` endpoint voorziet. De GET endpoint verwacht twee query parameters `a` en `b` en geeft de som van deze twee getallen terug. De POST endpoint verwacht een JSON body met twee getallen `a` en `b` en geeft de som van deze twee getallen terug. Schrijf de volgende tests aan de hand van `jest` en `supertest`: * Test dat de POST/GET endpoint de som van twee getallen teruggeeft. * Test dat de POST/GET endpoint een error geeft als een string wordt meegegeven. (bv "five") * Test dat de POST/GET endpoint een error geeft als een parameter ontbreekt. * Run de testen met de code coverage tool en ga na of alles getest is. [VorigeString Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/string-test) [VolgendeForm Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/form-express-test) Laatst bijgewerkt 1 jaar geleden --- # String Test | WebOntwikkeling 2025 Download het [starter](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/testing/string-test/starter.zip) project. Dit project bevat een `string-utils.ts` module. Schrijf de volgende testen: * Test dat de functie `toUpperFunction` een string naar hoofdletters omzet. bv. "hello" * Test dat de functie `toUpperFunction` een string die al in hoofdletters is niet verandert. bv. "HELLO" * Test dat de functie `toUpperFunction` een string die geen letter is niet verandert. bv. "123" * Test dat de functie `toUpperFunction` een string met gemixte karakters naar hoofdletters omzet. bv. "Hello123" * Test dat de functie `toUpperFunction` een string met spaties naar hoofdletters omzet. bv. "hello world" * Test dat de functie `toUpperFunction` karakters zoals umlauts naar hoofdletters omzet. bv. "äöü" * De implementatie van `toUpperFunction` is foutief. Pas de implementatie aan zodat alle testen slagen. * Run de testen met de code coverage tool en ga na of alles getest is. [VorigeMath Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-test) [VolgendeMath Express Test](https://apwt.gitbook.io/webontwikkeling-2025/labos/20.-testing/math-express-test) Laatst bijgewerkt 1 jaar geleden --- # Contact Form | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `contact-form` en installeer de `express` en de `ejs` module. Maak een nieuwe route aan op `/contact` van de applicatie die een `GET` request afhandelt. De route rendert een EJS template met een contactformulier. Het contactformulier bevat de volgende velden: * firstname (verplicht) * lastname (verplicht) * email (verplicht) * message (verplicht) * agree (voor terms and conditions) (verplicht aangevinkt) Het formulier bevat ook een submit knop. Als het formulier wordt ingediend, wordt een `POST` request naar dezelfde route gestuurd. Als de gebruiker een van de verplichte velden niet invult, wordt het formulier opnieuw gerenderd met een foutmelding bovenaan het formulier. De foutmelding bevat de tekst "{fieldname} is required." waar uiteraard `{fieldname}` wordt vervangen door de naam van het veld dat niet werd ingevuld. Als de gebruiker de terms and conditions niet aanvaardt, wordt het formulier opnieuw gerenderd met een foutmelding bovenaan het formulier. De foutmelding bevat de tekst "You must agree to the terms and conditions." Als het formulier correct werd ingevuld, wordt een bedanktbericht gerenderd. Het bedanktbericht bevat de tekst "Thank you for contacting us, {firstname} We will get back to you on the following email: {email}" waar uiteraard `{firstname}` en `{email}` worden vervangen door de waarden die de gebruiker heeft ingevuld. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-858a28eae9ff1dddba61622387ebcad91d3482bf%252Fcontact.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=95912c39&sv=2) Contact form ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-9f18b0d7233413ed13d0ae32c8401f0e1606b78d%252Ftos.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=719e0de6&sv=2) Terms and conditions ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-4068f9b817c255fdc9f1e1c3284c89f3ddd8865c%252Fmessage_empty.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=677316b1&sv=2) Message Empty ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-4395abb0b356fd47da1231ef695468307a6abb15%252Fok.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=b58e2292&sv=2) Ok [VorigeRedirect Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/redirect-form) [Volgende11\. Router en Middleware](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11) Laatst bijgewerkt 1 jaar geleden --- # Rainbow Chalk | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `rainbow-chalk`. Installeer de volgende npm packages: * chalk@4 (https://www.npmjs.com/package/chalk) * rainbow-color-array-ts (https://www.npmjs.com/package/rainbow-colors-array-ts) Bekijk goed de documentatie van de packages om te zien hoe je deze packages kunt gebruiken. Maak een nieuwe file aan met de naam `index.ts`. Importeer de packages die je hebt geïnstalleerd. Gebruik de packages om een regenboog van kleuren te loggen naar de console. Volg het volgende stappenplan om de oefening te maken: 1. Importeer de RgbColor en rainbow functies uit de rainbow-colors-array-ts module. 2. Importeer de chalk module. 3. Bepaal de hoogte en breedte van de terminal. Dit kan je doen aan de hand van de `process.stdout.rows` en `process.stdout.columns` eigenschappen. 4. Genereer een array van kleuren aan de hand van de rainbow functie. Gebruik de hoogte van de terminal als eerste argument en "rgb" als tweede argument. Kijk zeker eerst naar wat exact de functie teruggeeft. Je kan dit doen door de console log functie te gebruiken op de array van kleuren. 5. Loop over de array van kleuren en print een regel met een achtergrondkleur voor elke kleur. Gebruik hiervoor de `bgRgb` functie van de chalk module. Gebruik de breedte van de terminal om te bepalen hoeveel karakters je moet printen. 6. Sit back and enjoy the rainbow! [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/rainbow-chalk#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-0b6c967975cc8d9492c25f5cad24f48299da2152%252Frainbow.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5b7fa6b8&sv=2) alt text [VorigeCat GPT](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo6/cat-gpt) [Volgende7\. Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo7) Laatst bijgewerkt 1 jaar geleden --- # Hogwarts Express CRUD | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#doel) Doel ------------------------------------------------------------------------------------------------- Je breidt een bestaande webtoepassing uit die een lijst van Harry Potter-spreuken toont. Je voegt functionaliteit toe om spreuken aan te maken, aan te passen en te verwijderen. De gegevens worden opgeslagen in een MongoDB-database. De front-end is opgebouwd met EJS. Je kan het bestaande project vinden in het [starter.zip](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/mongodb/hogwarts-express-crud/starter.zip) bestand. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#wat-is-er-al-voorzien) Wat is er al voorzien? ------------------------------------------------------------------------------------------------------------------------------------ * Een overzichtspagina met zoek- en sorteermogelijkheden * Een detailpagina per spreuk * Een MongoDB-verbinding * Een datastructuur `Spell` en een basistemplate met EJS [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#opdracht) Opdracht --------------------------------------------------------------------------------------------------------- Breid de bestaande toepassing uit met de volgende functionaliteit: ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-1.-create) 1\. Create * Voeg een GET-route toe voor `/spells/create` die een formulier toont. * Voeg een POST-route toe die een nieuwe spreuk aanmaakt in de database. * Genereer het formulier dynamisch op basis van `res.locals.FIELDS` en `res.locals.SPELL_TYPES`. * Ken automatisch een uniek ID toe aan de nieuwe spreuk (hoogste bestaande ID + 1). ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-2.-update) 2\. Update * Voeg een GET-route toe voor `/spells/:id/update` die het bestaande formulier toont, vooraf ingevuld met de huidige gegevens. * Voeg een POST-route toe die de aangepaste gegevens opslaat. * Het `id`\-veld moet read-only zijn. ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-3.-delete) 3\. Delete * Voeg een POST-route toe voor `/spells/:id/delete` die een spreuk verwijdert. * Voeg op de overzichtspagina een verwijderknop toe per rij. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#gegevensstructuur) Gegevensstructuur --------------------------------------------------------------------------------------------------------------------------- Gebruik de bestaande types: * `Spell` voor de data * `SpellField` voor de formuliervelden Ondersteunde invoertypes zijn: `text`, `number`, en `spelltype` (een dropdown). [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#te-bewerken-of-toe-te-voegen-bestanden) Te bewerken of toe te voegen bestanden --------------------------------------------------------------------------------------------------------------------------------------------------------------------- * `index.ts`: routes toevoegen * `database.ts`: functies schrijven voor `createSpell`, `updateSpellById`, `deleteSpellById` * `views/createSpell.ejs` en `views/updateSpell.ejs`: formulieren bouwen * `views/index.ejs`: knoppen toevoegen voor "Create", "Update" en "Delete" [](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#wat-wordt-er-verwacht) Wat wordt er verwacht? ------------------------------------------------------------------------------------------------------------------------------------ * Een werkend formulier voor het toevoegen van nieuwe spreuken * Mogelijkheid om bestaande spreuken te bewerken * Mogelijkheid om spreuken te verwijderen via de overzichtspagina * Alle formulieren gebruiken `FIELDS` en `SPELL_TYPES` om inputs correct te genereren [VorigeView Counter](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/viewcounter) [VolgendeVoorbereiding (devcontainer + github)](https://apwt.gitbook.io/webontwikkeling-2025/project/dev-container) Laatst bijgewerkt 8 maanden geleden * [Doel](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#doel) * [Wat is er al voorzien?](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#wat-is-er-al-voorzien) * [Opdracht](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#opdracht) * [1\. Create](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-1.-create) * [2\. Update](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-2.-update) * [3\. Delete](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#id-3.-delete) * [Gegevensstructuur](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#gegevensstructuur) * [Te bewerken of toe te voegen bestanden](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#te-bewerken-of-toe-te-voegen-bestanden) * [Wat wordt er verwacht?](https://apwt.gitbook.io/webontwikkeling-2025/labos/extra/hogwarts-express-crud#wat-wordt-er-verwacht) --- # Newspaper Route | WebOntwikkeling 2025 Bouw verder aan de [newspaper](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo8/newspaper) opdracht. In de vorige oefening moest je voor elke topic een eigen route maken. Dit zorgt ervoor dat er veel code herhaald wordt. We willen dit vermijden door gebruik te maken van route parameters. Vervang de routes die je in de vorige oefening hebt gemaakt door een enkele route die de topic als parameter meekrijgt. Kopiëren /:topic Voor de rest moet de werking van de applicatie hetzelfde blijven. [VorigeMath Service](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/math-service-express) [VolgendeNewspaper Search](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-search) Laatst bijgewerkt 1 jaar geleden --- # Router Combi | WebOntwikkeling 2025 We gaan een combinatie oefening maken van drie voorgaande oefeningen: [Math Service](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/math-service-express) , [News Paper Search](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo9/newspaper-search) en [Contact Form](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo10/contact-form) . Je mag zelf kiezen van welk project je als begin wilt gebruiken, je mag ook helemaal opnieuw beginnen en een nieuw project maken. Maak 3 verschillende routers aan, die elk een van de bovenstaande oefeningen uitvoeren. De routers moeten de volgende paden hebben: * `/math` * `/newspaper` * `/contact` Je mag zelf kiezen welke naam je de bestanden geeft, maar zorg ervoor dat je de bestanden in een aparte map zet, bijvoorbeeld `routers`. De werking van de applicatie moet hetzelfde blijven als de oefeningen die je hebt gekozen, maar dan verdeeld over drie routers. Zorg dat de `/` route van je applicatie een overzicht geeft van de drie verschillende routes die je hebt gemaakt. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-0f5ec41dd8acfe22018087a43225e18c33e24772%252Frouter-combi.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c27c7351&sv=2) alt text [Vorige11\. Router en Middleware](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11) [VolgendeUtility Middleware](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo11/utility-middleware) Laatst bijgewerkt 1 jaar geleden --- # Guestbook Express | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `guestbook-express` en installeer de `express` en `mongodb` package. Je kan deel van de code van de vorige [opgave](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo13/guestbook) hergebruiken. We gaan nu een express applicatie maken die gebruik maakt van deze database. * Zorg ervoor dat bij het opstarten van de express applicatie een verbinding wordt opgezet met de MongoDB database. En zorg ervoor dat deze verbinding wordt afgesloten bij het afsluiten van de applicatie. * Maak gebruik van een aparte `database.ts` module om al je database gerelateerde code in te plaatsen. * Maak een `/` GET route aan die alle berichten toont in de database. Gebruik hiervoor een aparte `index.ejs` view. Deze view bevat een formulier om een nieuw bericht toe te voegen. Je kan een naam en een bericht ingeven. * Zorg ervoor dat de nieuwste berichten bovenaan staan. Gebruik hiervoor een sort in de query. * Maak een `/` POST route aan die een nieuw bericht toevoegt aan de database. Na het toevoegen van het bericht wordt de gebruiker terug gestuurd naar de `/` route. Je mag hier gebruik maken van een redirect. * Plaats de connection string in een `.env` bestand. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-afde168a3c6ddbb02b59476d8c045be3b4b2fb2f%252Fguestbook.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=f70780d9&sv=2) alt text [VorigePet Shelter Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pet-shelter-express) [VolgendePokemon Team Express](https://apwt.gitbook.io/webontwikkeling-2025/labos/15.-mongo-+-express/pokemon-team-express) Laatst bijgewerkt 1 jaar geleden --- # Tick Tac Toe | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `tic-tac-toe`. We willen een programma maken dat het spelletje Tic Tac Toe kan spelen. We gaan dit doen met een 2D array. We gaan het spel spelen met 2 spelers. De eerste speler zal altijd "X" zijn en de tweede speler "O". We werken met een 2D array van 3x3. We gaan het spel spelen met de coordinaten van de array. De bovenste rij is 0, de middelste rij 1 en de onderste rij 2. De meest linkse kolom is 0, de middelste kolom 1 en de meest rechtse kolom 2. De gebruiker geeft de coordinaten in in de vorm van rij,kolom. Dus bijvoorbeeld 0,0 is de bovenste rij en de meest linkse kolom. 2,2 is de onderste rij en de meest rechtse kolom. Als de gebruiker een zet doet op een plaats waar al een zet is gedaan dan krijgt hij een melding en moet hij opnieuw een zet doen. Als de gebruiker een zet doet op een plaats die niet bestaat dan krijgt hij een melding en moet hij opnieuw een zet doen. Als de gebruiker een zet doet die geldig is dan wordt het bord getoond. Als er een winnaar is dan wordt dit getoond en het programma stopt. Als het bord vol is en er is geen winnaar dan wordt dit getoond en het programma stopt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/tic-tac-toe#voorbeeld-interactie) Voorbeeld interactie: ------------------------------------------------------------------------------------------------------------------------ ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-6926a8e981f319fbf4786a9506cdacb66fe2b349%252Ftictactoe.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5985b0a9&sv=2) [VorigeTodo List String](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/todo-list-string) [Volgende4\. Interfaces & functies](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4) Laatst bijgewerkt 1 jaar geleden --- # Rot13 | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `rot13`. We willen een programma maken dat een string encodeert met de rot13 methode. De rot13 methode is een simpele methode om een string te coderen. Elke letter wordt vervangen door de letter die 13 plaatsen verder in het alfabet staat. Als je aan het einde van het alfabet komt dan ga je terug naar het begin. De gebruiker geeft een string in en het programma toont de gecodeerde string. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-841acfca401af10f1b05e7bfd8367e9fe2058c8b%252Frot13.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4767b018&sv=2) De werkwijze is als volgt: * Je begint met een array van het alfabet in kleine letters. * Je vraagt de gebruiker om een string in te geven. * Je gaat door elke letter van de string en je zoekt de index van de letter in de array van het alfabet. * Je telt 13 op bij de index en je neemt de modulo van 26. Dit is de nieuwe index van de letter. * Je neemt de letter op de nieuwe index en je voegt deze toe aan een nieuwe string. * Als de letter een spatie is of een ander teken dan een letter dan voeg je deze ook toe aan de nieuwe string. Je moet dus controleren of de letter in de array van het alfabet staat. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/rot13#voorbeeld-interactie) Voorbeeld interactie ----------------------------------------------------------------------------------------------------------------- [VorigePuntenboek](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/puntenboek) [VolgendePokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo3/pokemon-team) Laatst bijgewerkt 1 jaar geleden Kopiëren Enter a string: hello uryyb --- # Functies | WebOntwikkeling 2025 ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#short-notation) Short Notation [Short Notation](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/short-notation) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#wiskundige-functies) Wiskundige functies [Math Fun](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/math-fun) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#array-sum) Array sum [Array Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/array-sum) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#movies-vervolg) Movies (vervolg) [Movies Functions](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/movies-functions) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#filter) Filter [Filter Numbers](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers) ### [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#atleasttwo) atLeastTwo [At Least Two](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/at-least-two) [VorigeTodo List Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/todo-list-objects) [VolgendeMath Fun](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/math-fun) Laatst bijgewerkt 1 jaar geleden * [Short Notation](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#short-notation) * [Wiskundige functies](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#wiskundige-functies) * [Array sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#array-sum) * [Movies (vervolg)](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#movies-vervolg) * [Filter](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#filter) * [atLeastTwo](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions#atleasttwo) --- # Cocktails Promise All | WebOntwikkeling 2025 Maak een nieuw project `cocktails-promise-all` waarin je jouw bronbestanden voor deze oefening kan plaatsen. Maak gebruik van `Promise.all` om de drie volgende cocktails via de cocktail api met de volgende ids in te lezen: **11000**, **11001**, **11002** en vervolgens de naam van de drie cocktails op het scherm te laten zien. Je kan een cocktail via een id via de volgende api call binnenhalen: Kopiëren https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=11000 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-promise-all#voorbeeld-interactie) Voorbeeld interactie --------------------------------------------------------------------------------------------------------------------------------- Kopiëren Mojito Old Fashioned Long Island Tea [VorigeTodo List Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/todo-list-fetch) [VolgendeBitcoin API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/bitcoin-api) Laatst bijgewerkt 1 jaar geleden --- # Pokedex | WebOntwikkeling 2025 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#project-beschrijving) Project Beschrijving ------------------------------------------------------------------------------------------------------------------------------------ In deze opgave gaan we een uitgebreide Pokedex applicatie bouwen met Node/Express en MongoDB. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#startproject) Startproject -------------------------------------------------------------------------------------------------------------------- Een groot deel van de applicatie routes en views zijn al op voorhand klaargemaakt. Je mag dit project gebruiken om van te starten. Er zitten hier een aantal voorgeprogrammeerde vaste waarden in om alles te doen werken. Je moet uiteraard deze wegwerken zodat de applicatie volledig werkt met mongoDB. [Start Project](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/mongodb/pokedex-mongo-express/starter.zip) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#header-footer) Header/Footer ---------------------------------------------------------------------------------------------------------------------- Zorg ervoor dat alle pagina's de header en de footer includeert zodat de css automatisch wordt toegepast op elke pagina. In het begin zal je pagina er zo uit zien: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-79d2ed635b60319ac59e67e41812632d1250056f%252Fscreenshot.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=fff62c1d&sv=2) Met de header en footer ziet ze er als volgt uit: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-9d966ca0a9d2f3438f0eb3bd024b8c5e66801c3f%252Fstartpage_empty.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c6152c89&sv=2) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#start-pagina) Start Pagina -------------------------------------------------------------------------------------------------------------------- De start pagina ziet er als volgt uit. Als je naar de root path gaat ([http://localhost:3000](http://localhost:3000/) ) dan krijg je de volgende pagina te zien. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-9d966ca0a9d2f3438f0eb3bd024b8c5e66801c3f%252Fstartpage_empty.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c6152c89&sv=2) De gebruiker krijgt hier een invoerveld te zien met daarnaast een Submit knop. Als deze submit knop wordt aangeklikt dan wordt er in de database een nieuwe Player aangemaakt met de meegegeven naam. Na het aanmaken wordt de gebruiker terug naar deze root pagina gestuurd (met `res.redirect("/")`) en krijgt de gebruiker zijn naam te zien in een lijst: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-792249c3a323dff6dfeb37d169ac28287fee00ee%252Fstartpage_red.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=62c150bf&sv=2) De gebruiker kan dan vervolgens op zijn naam klikken en wordt dan naar zijn persoonlijke hoofdpagina gestuurd. **Belangrijk:** Het aanmaken van de Player gebeurt direct in de database maar er dient wel een array bij gehouden te worden met alle Players. Deze wordt in het begin van de applicatie ingeladen. Zorg ervoor dat deze ook geupdated wordt na het aanpassen van de database. Zo moeten we dus niet elke keer een database call doen telkens de gebruiker moet opgevraagd worden. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#de-player-pagina) De Player pagina ---------------------------------------------------------------------------------------------------------------------------- De player pagina bevindt zich op de route `/player/:id` waarvan de id overeenkomt met de database id in mongodb. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-75091f76521b1173964102a939602f0b107ac4ee%252Fplayer.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=601e4662&sv=2) Hier staan 3 knoppen: * Als de gebruiker klikt op MANAGE dan gaat de gebruiker naar zijn Pokemon page op de route `/player/:id/pokemon` * Als de gebruiker klikt op EXIT moet je terug naar de root page (/) gaan. * Als de gebruiker op SAVE klikt zal de huidige gebruiker aangepast worden in de database. De verdere werking van dit wordt nog later in detail toegelicht. Je mag deze momenteel dus even negeren. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#de-pokemon-pagina) De Pokemon pagina ------------------------------------------------------------------------------------------------------------------------------ De pokemon pagina bestaat uit 2 delen: * Het overzicht van het pokemon team van de Player. * Een overzicht van alle pokemon met nummers 1 tot en met 151. We zullen met de laatste beginnen. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#pokemon-overzicht) Pokemon overzicht ------------------------------------------------------------------------------------------------------------------------------ Gebruik [https://pokeapi.co/](https://pokeapi.co/) om alle pokemon met id 1 tot en met 151 in te laden. Slaag deze op in een mongodb database. Zorg ervoor dat je enkel de nodige data opslaagt in de database. Je mag dus niet gewoon het originele json object in de database opslagen. We houden de volgende data van een pokemon bij: * id: getal * name: tekst * types: een lijst van types (bv. grass, fire) * image: de url van de image * height: de hoogte van de pokemon * weight: het gewicht van de pokemon * maxHP: de base HP van de pokemon De pokemon worden als button elementen getoond. Je zou dus 151 buttons op het scherm moeten hebben. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-7d8e6b4d5a9edc10eb69a285a36de27cd2bca483%252Fpokemonlist.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=aae99869&sv=2) Als je op een van de buttons klikt wordt deze toegevoegd aan de pokemon lijst van de gebruiker. Wat dit betekent zie je later. **Belangrijk**: Omdat de API niet mag overbevraagd worden (te veel API calls per dag) moet je voorkomen dat de API call elke keer wordt gedaan bij het opstarten. Eenmaal de data in de database zit, moet je deze niet meer inlezen. Je kan dit doen door na te kijken of de collection al gevuld is of niet. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#pokemon-team) Pokemon Team -------------------------------------------------------------------------------------------------------------------- **Pokemon toevoegen** Het 2de deel van de pokemon pagina is het pokemon team overzicht. Door in het voorgaande deel een pokemon aan te klikken wordt deze toegevoegd aan een lijst van pokemon in het players object. Het toevoegen gebeurd aan de hand van de volgende route: `POST /player/:id/pokemon/add/:pokeId` Alle informatie moet zichtbaar zijn in de volgende tabel: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-78a53e157cd1bd4feb35fe542b6dc7dbb955a153%252Fpokemonteam.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c0b9faf8&sv=2) Je kan de images gebruiken van de types om een icon te tonen van de pokemon types. Breidt je pokemon object uit met een currentHP key en geef deze een waarde tussen 0 en maxHP. Bv als de maxHp 79 is dan zal er een random waarde tussen 0 en 79 gekozen worden. **Belangrijk:** Het pokemon team mag nog niet worden opgeslagen in de database. Dit mag pas gebeuren op het moment dat de SAVE button gebeurd op de player pagina: ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-75091f76521b1173964102a939602f0b107ac4ee%252Fplayer.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=601e4662&sv=2) Het saven van de player zijn pokemon gebeurd met: `POST /player/:id/save` Deze call gebeurd zonder body. Je gebruikt gewoon de id om het player object op te vragen en daarna te saven. Als een pokemon is toegevoegd aan je persoonlijke team dan zal deze niet meer in de algemene lijst van pokemon staan. **Pokemon verwijderen** Je kan ook een pokemon uit je team verwijderen. Dit doe je door op X te drukken naast de pokemon in je team. `POST /player/:id/pokemon/delete/:pokeId` Ook hier zal het Player object met zijn pokemon worden niet verwijderd worden uit database tot er op SAVE gedrukt wordt. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#uitbreidingen) Uitbreidingen ---------------------------------------------------------------------------------------------------------------------- * Zorg voor een filtering systeem zodat je de pokemon lijst kan filteren op basis van type. ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-9f3bc8fb6b5d1d5fdda9f92217668111b8627442%252Ffiltering.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8e74f209&sv=2) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-969ddfd97635653231ef4cb4f4d5a4525c2f8ea7%252Ffirefilter.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=a9d40070&sv=2) * Zorg voor een overzicht van je pokemon team: * De grootste pokemon * De kleinste pokemon * Een overzicht van alle types uit je team (mag geen dubbele bevatten) ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-b6192b7f49020195d1f50065bc95c460abc7f617%252Fsummary.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8cceb2d&sv=2) [VorigeUsers CRUD](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/users-crud-express) [Volgende17\. Session & Cookies](https://apwt.gitbook.io/webontwikkeling-2025/labos/17.-session-and-cookies) Laatst bijgewerkt 1 jaar geleden * [Project Beschrijving](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#project-beschrijving) * [Startproject](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#startproject) * [Header/Footer](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#header-footer) * [Start Pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#start-pagina) * [De Player pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#de-player-pagina) * [De Pokemon pagina](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#de-pokemon-pagina) * [Pokemon overzicht](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#pokemon-overzicht) * [Pokemon Team](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#pokemon-team) * [Uitbreidingen](https://apwt.gitbook.io/webontwikkeling-2025/labos/16.-crud/pokedex-mongo-express#uitbreidingen) --- # Bitcoin API | WebOntwikkeling 2025 Maak een nieuw project `bitcoin-api` waarin je jouw bronbestanden voor deze oefening kan plaatsen. Bij het opstarten van de applicatie wordt er gevraagd welke valuta je wilt zien. De keuze bestaat uit de volgende valuta: EUR, USD, GBP. Vervolgens zal de applicatie de huidige prijs van bitcoin in de gekozen valuta tonen. Maak gebruik van de `fetch` functie om de data op te halen. [Coindesk API](https://api.coindesk.com/v1/bpi/currentprice.json) [Mirror](https://sampleapis.assimilate.be/bitcoin/current) [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/bitcoin-api#voorbeeld-interactie) Voorbeeld interactie ----------------------------------------------------------------------------------------------------------------------- Kopiëren Welke valuta wil je zien? (EUR, USD, GBP): USD De huidige prijs van bitcoin is 51547.13 USD Kopiëren Welke valuta wil je zien? (EUR, USD, GBP): JPY Deze valuta wordt niet ondersteund [VorigeCocktails Promise All](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/cocktails-promise-all) [VolgendeJoke API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/joke-api) Laatst bijgewerkt 10 maanden geleden --- # Promise All | WebOntwikkeling 2025 Na hoeveel tijd zal deze code "done!" op het scherm tonen? Voer de code dus niet uit maar denk even zelf na. Kopiëren const delay = (delay: number): Promise => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, delay); }); } (async() => { await Promise.all([delay(1000), delay(10000), delay(15000)]) console.log("Done!"); })(); [VorigeFake Fetch](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/fake-fetch) [VolgendeSlow Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/slow-sum) Laatst bijgewerkt 1 jaar geleden --- # Joke API | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `joke-api`. Bij het opstarten van de applicatie worden eerst alle categorieën van grappen opgehaald. Die kan je op de volgende URL met fetch ophalen: https://v2.jokeapi.dev/categories Nadat je de categorieën hebt opgehaald, kan je de gebruiker vragen om een categorie te kiezen. Vervolgens wordt er de gebruiker gevraagd om het type van de grap te kiezen. De mogelijke types zijn: `single`, `twopart`. Vervolgens wordt er een grap opgehaald van de gekozen categorie en type. Je kan de grappen ophalen op de volgende URL: https://v2.jokeapi.dev/joke/``?type=`` bv. https://v2.jokeapi.dev/joke/Programming?type=single Let op dat de `single` grappen een `joke` veld hebben en de `twopart` grappen een `setup` en `delivery` veld. Hou hier dus rekening mee bij het tonen van de grap. Na het vertonen van de grap wordt de gebruiker gevraagd of hij nog een grap wil zien. Als de gebruiker `ja` antwoordt, wordt de gebruiker opnieuw gevraagd om een categorie en type te kiezen. Als de gebruiker `nee` antwoordt, wordt de applicatie afgesloten. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/joke-api#voorbeeldinteractie) Voorbeeldinteractie: ------------------------------------------------------------------------------------------------------------------- ![](https://apwt.gitbook.io/webontwikkeling-2025/~gitbook/image?url=https%3A%2F%2F2831726711-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fxvt2rmebUG0xiZPSvaRd%252Fuploads%252Fgit-blob-b683fd81c4aad7ade886ac1b27dfaf4f17ca19d3%252Fjokes.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8e13899b&sv=2) Jokes Interactie [VorigeBitcoin API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/bitcoin-api) [VolgendeSchool API](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo5/school-api) Laatst bijgewerkt 10 maanden geleden --- # Todo List Objects | WebOntwikkeling 2025 Maak een nieuw project met de naam `todo-list-objects`. Gebruik de vorige todo list als basis. Je maakt eerst een interface voor het `Todo` object. Dit bevat een * id (number) * title (string) * completed (boolean) Bij het opstarten van het programma laad je de todos in vanuit een bestand `todos.json`. [todos.json](https://github.com/similonap/webontwikkeling-2024/blob/main/exercises/node-typescript/todo-list-objects/todos.json) Voor de rest moet de functionaliteit hetzelfde zijn als de vorige todo list maar deze keer gebruik je geen 2 arrays van strings meer maar een array van `Todo` objecten. [VorigeMovies Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/movies-objects) [VolgendeFuncties](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions) Laatst bijgewerkt 1 jaar geleden --- # Recepten | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `recepten`. Je maakt eerst een interface voor het \`Recept\`\` object. Dit bevat een * naam (tekst) * beschrijving (tekst) * personen (getal) * ingredienten (array van ingredienten) voor de ingredienten maak je een interface `Ingredient`. Dit bevat een * naam (tekst) * hoeveelheid (tekst) (bv "1 stuk", "1 kg") * prijs (number) Maak nu een object aan voor een lasagne recept. Je kan de ingredienten zelf kiezen. Print het recept af en bereken de totale kostprijs van het recept. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/recepten#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------------- Kopiëren Recept: Lasagne Beschrijving: Lekkere lasagne Personen: 4 Ingredienten: - 1 pak lasagnevellen - 500g gehakt - 1 ui - 1 teentje look Totale kostprijs: 10 euro [VorigeInterfaces](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces) [VolgendeMovies Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/movies-objects) Laatst bijgewerkt 1 jaar geleden --- # Filter Numbers | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `filter-numbers`. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-1) Deel 1 -------------------------------------------------------------------------------------------------------- Schrijf een functie `filterPositive` die een array van getallen als parameter verwacht. De functie `filterPositive` moet een nieuwe array teruggeven met enkel de positieve getallen uit de array die als parameter werd meegegeven. Deze functie **MOET** aan de hand van een `**for**`**\-loop** geschreven worden en mag **geen** gebruik maken van de **ingebouwde functie** `**filter**` **van een array**. Roep de functie `filterPositive` aan met de volgende array als parameter: Kopiëren const numbers: number[] = [-4,-4,1,2,3,4,5]; console.log(filterPositive(numbers)); // 1,2,3,4,5 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-2) Deel 2 -------------------------------------------------------------------------------------------------------- Schrijf een functie `filterNegative` die een array van getallen als parameter verwacht. De functie `filterNegative` moet een nieuwe array teruggeven met enkel de negatieve getallen uit de array die als parameter werd meegegeven. Roep de functie `filterNegative` aan met de volgende array als parameter: Kopiëren const numbers: number[] = [-4,-4,1,2,3,4,5]; console.log(filterNegative(numbers)); // -4,-4 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-3) Deel 3 -------------------------------------------------------------------------------------------------------- Schrijf een functie `filterEven` die een array van getallen als parameter verwacht. De functie `filterEven` moet een nieuwe array teruggeven met enkel de even getallen uit de array die als parameter werd meegegeven. Roep de functie `filterEven` aan met de volgende array als parameter: Kopiëren const numbers: number[] = [-4,-4,1,2,3,4,5]; console.log(filterEven(numbers)); // -4,-4,2,4 [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-4) Deel 4 -------------------------------------------------------------------------------------------------------- Schrijf nu een functie `filter` die een array van getallen als eerste parameter verwacht en een functie als tweede parameter. De functie `filter` moet een nieuwe array teruggeven met enkel de getallen uit de array die als eerste parameter werd meegegeven waarvoor de functie die als tweede parameter werd meegegeven `true` teruggeeft. Herschrijf de functies `filterPositive`, `filterNegative` en `filterEven` door gebruik te maken van de functie `filter`. Voorbeeld van gebruik: [VorigeMovies Functions](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/movies-functions) [VolgendeAt Least Two](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/at-least-two) Laatst bijgewerkt 1 jaar geleden * [Deel 1](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-1) * [Deel 2](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-2) * [Deel 3](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-3) * [Deel 4](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers#deel-4) Kopiëren const numbers: number[] = [-4,-4,1,2,3,4,5]; const isPositive = (number: number) => number >= 0; console.log(filter(numbers, isPositive)); // 1,2,3,4,5 --- # Movies Functions | WebOntwikkeling 2025 Deze oefening gaat verder op de Movies oefening. Maak 3 functies aan en probeer deze uit: * de functie `wasMovieMadeInThe90s`: * met de parameter movie van het type Movie * met return waarde true als de film in de jaren 90 gemaakt is, anders false * print of de film The Matrix in de jaren 90 gemaakt is adhv deze functie * de functie `averageMetaScore` * met de parameter movies die een array van het type Movie bevat * met return waarde de gemiddelde score van alle films in die array * print het gemiddelde van metascore van de 3 films adhv deze functie * de functie `fakeMetaScore` * met de parameters * movie van het type Movie * newscore die een nieuwe score bevat * met return waarde een nieuw Movie object met de nieuwe score [VorigeArray Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/array-sum) [VolgendeFilter Numbers](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/filter-numbers) Laatst bijgewerkt 1 jaar geleden --- # Array Sum | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `array-sum`. Maak een nieuwe functie `sum` die de som van alle getallen in een array berekent. Gebruik hiervoor een for loop en probeer ook eens de `reduce` functie van een array. als je de volgende array meegeeft aan de functie: Kopiëren [1, 2, 3, 4, 5] dan moet de functie 15 teruggeven want 1 + 2 + 3 + 4 + 5 = 15. [VorigeShort Notation](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/short-notation) [VolgendeMovies Functions](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/movies-functions) Laatst bijgewerkt 1 jaar geleden --- # Math Fun | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `math-fun`. Schrijf de volgende functies: * `add` die twee getallen optelt * `subtract` die twee getallen van elkaar aftrekt * `multiply` die twee getallen met elkaar vermenigvuldigt. Zorg voor een default waarde van 1 als de tweede parameter niet meegegeven wordt. * `divide` die twee getallen deelt. Zorg voor een default waarde van 1 als de tweede parameter niet meegegeven wordt. Zorg dat je deze kan schrijven met het function keyword en met een arrow function. Gebruik deze functies om de volgende berekening uit te voeren: Kopiëren (4 + 5) * (6 - 3) / 2 = 13.5 Print het resultaat van de berekening af. [VorigeFuncties](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions) [VolgendeShort Notation](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/short-notation) Laatst bijgewerkt 1 jaar geleden --- # Short Notation | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `short-notation` * Deze oefening maak je in bestand `short-notation.ts`. * Schrijf de volgende functies in de kortst mogelijke arrow notaties: Kopiëren const printStuff = (amount: number, text: string):void => { console.log(`Hello ${text}, you are number ${amount}`); } const twoDArray = (element1: string, element2: string): string[] => { return [element1, element2]; } const numberToString = (number: number): string => { return `${number}`; } [VorigeMath Fun](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/math-fun) [VolgendeArray Sum](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/functions/array-sum) Laatst bijgewerkt 1 jaar geleden --- # Movies Objects | WebOntwikkeling 2025 Maak een nieuw project aan met de naam `movies-objects`. Maak een JSON bestand `movie.json` met de volgende inhoud: Kopiëren { "title": "The Matrix", "year": 1999, "actors": ["Keanu Reeves", "Laurence Fishburne", "Carrie-Anne Moss"], "metascore": 73, "seen": true } Maak een interface voor het bovenstaande Movie object en lees het in aan de hand van een `import` statement. Ken deze toe aan een variabele `movie` en print deze af. Maak een tweede variable aan myfavoritemovie van het type Movie en geef die een object mee die de info over jouw favoriete film bevat en print deze af. Maak een derde variable aan myworstmovie van het type Movie en geef die een object mee die de info over jouw meest gehate film bevat en print deze af. [](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/movies-objects#voorbeeld-interactie) Voorbeeld interactie ------------------------------------------------------------------------------------------------------------------------------------- Kopiëren Movie from file: The Matrix (1999) Actors: Keanu Reeves, Laurence Fishburne, Carrie-Anne Moss Metascore: 73 Seen: NO My favorite movie: The Shawshank Redemption (1994) Actors: Tim Robbins, Morgan Freeman, Bob Gunton Metascore: 80 Seen: YES My worst movie: The Room (2003) Actors: Tommy Wiseau, Juliette Danielle, Greg Sestero Metascore: 9 Seen: YES [VorigeRecepten](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/recepten) [VolgendeTodo List Objects](https://apwt.gitbook.io/webontwikkeling-2025/labos/labo4/interfaces/todo-list-objects) Laatst bijgewerkt 1 jaar geleden ---