# Prompt Engineering 1
[cursus 28568](https://talnet.instructure.com/courses/28568)
## Introductie
[datasource](https://www.roc.ovh/books/software-development-2025/page/prompt-engineering-1)
Prompt Engineering is alsof je een buitenstaander die niets van je weet iets wilt vragen. Omdat te doen moet je dus duidelijk en geod communiceren.
We gaan leren hoe we goede prompt kunnen schrijven.
Voor een **goede prompt** moet je rekening houden met de volgende zaken:
1. 1. **Context** - een goede prompt heeft voldoende context.
2. **Details**/**Specifiek** - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
3. **Duidelijkheid** - een goede prompt is duidelijk.
4. **Doelgericht** - een goede prompt is doelgericht.
5. **Vorm** - in een goede prompt kan je de output in een bepalade vorm vragen.
6. **Toon** -door in de prompt de toon op te nemne, bepaal je de vorm van het antwoord.
Al deze punten worden stuk-voor-stuk behandeled. De eerste drie zijn **rood **omdat é*lke* prompt altijd moet voldoen aan deze kenmerken.
Maar laten we eerst even kiijk wat nu eigelijk *promting* precies is.
#### Wat is prompting?
**Prompting** betekent dat je iets vraagt aan een AI, zoals ChatGPT, op een manier waardoor je een goed antwoord krijgt. Je *geeft een opdracht of stelt een vraag*, en dat noemen we een **prompt**.
Je kunt het vergelijken met hoe je een klasgenoot iets vraagt:
1. Als je gewoon zegt: “Doe dit,” snapt die ander misschien niet precies wat je bedoelt.
2. Maar als je zegt: “Kun je me helpen met deze code, want ik snap het niet?", is dat al een stukje beter.
3. Maar het kan nog beter: "Kun je me helpen met deze code want ik krijg een foutmelding 'unknown variable on line 23', ik snap niet wat de foutmelding betekent? '".
4. En zelfs dit kan nog beter want je vergeet een belangrijk detail, zie jij welke detail?
**Kort gezegd:** prompting is het slim stellen van een vraag of opdracht aan AI, zodat je krijgt wat je nodig hebt.
In de laatste zin staat niets over in welke omgeving en met welke programmeertaal je werkt. Ook zou je kunnen overwegen om de code of een stuk daarvan mee te sturen.
### **✍️** Opdracht 1
Weet jij welke verbetering je bij punt 4 nog kan toevoegen?
Pas de prompt zoals die bij 3 staat aan en en voeg één of meer details toe.
## 1. Context
We hebben geleerd dat een goede prompt detail en context heeft.
Context is een soort van omgeving.
Als je vraagt om code aan passen dan moet je dus aangeven wat de 'omgeving' is, in dit geval PHP en als het je bepaalde frameworks gebruikt of andere zaken die van belang zijn dan noem je die ook.
- **Context** betekent: de omgeving waarin iets zich afspeelt.
- Bij programmeren is dat bijvoorbeeld: de taal (zoals PHP), het framework (zoals Laravel), of iets anders dat belangrijk is om te weten.
- Een AI snapt je vraag beter als jij eerst vertelt wat de **omgeving/context** is.
### **✍️** Opdracht 2
#### Situatie
Je hebt de volgende PHP-code gekregen.
Deze code toont de huidige datum:
```php
```
Maar jij wil dat de datum verschijnt in het **Nederlands**, zoals: 9 mei 2025
De AI moet je helpen om de code aan te passen.
### **📝** Jouw taak:
1. **Schrijf een prompt aan ChatGPT** waarin je vraagt om deze code aan te passen zodat de datum in het Nederlands verschijnt.
2. Let erop dat je **duidelijk aangeeft wat de context is**:
- Je werkt met **PHP**
- De code moet draaien op een gewone server (geen framework zoals Laravel)
- Je wil de **datum in het Nederlands**
### Inleveren
1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
2. Screenshot van het resultaat in je browser.
## 2. Detail/Specifiek
### Doel
Je leert hoe belangrijk **detail en specificiteit** zijn in een goede prompt. Hoe specifieker je bent, hoe beter de AI je kan helpen met het schrijven of verbeteren van PHP-code.
### **📚** Theorie
- Een vage prompt zoals *“Maak een contactformulier”* geeft een vaag resultaat.
- Welke velden moeten erin?
- Wat moet er met de ingevulde gegevens gebeuren?
- Moet het formulier controle uitvoeren?
- Moet er een succesbericht komen?
Een **specifieke prompt** vertelt precies wat je wil.
Een goede prompt bevat concrete dingen en bevat geen (of zo min mogelijk) 'vage' [termen](https://www.roc.ovh/books/portfolio-kerntaak-examen/page/chatgpt-en-concreet).
#### Test je prompt
Als je over een prompt vragen kan stellen dan is die niet 100% concreet.
##### Voorbeeld prompt:
*Maak de bannder iets breder en verander het letter type zodat het groter is.*
**Wat is 'iets breder' en wat is 'groter'?**
##### Beter zou zijn:
*Maak de banner 5% breder en maak het font 2px groter.*
### **✍️** Opdracht 3
#### Situatie
Je wil een **contactformulier in PHP** laten maken door ChatGPT.
### Jouw taak
1. **Schrijf een prompt aan ChatGPT** waarin je duidelijk vraagt om een contactformulier in PHP.
Je moet in je prompt minimaal deze 4 dingen **specifiek vermelden**:
- Welke velden het formulier moet hebben (bv. naam, e-mail, bericht)
- Wat er met de data moet gebeuren (bijv. opslaan, versturen, tonen)
- Of er foutcontrole moet zijn (bijv. verplicht invullen, geldig e-mailadres)
- Of er een succesmelding moet komen na het verzenden
### Inleveren
1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
2. Screenshot van het resultaat in je browser.
## 3. Duidelijkheid
Duidelijk betekent dat je prompt voldoende detail bevat. Hierdoor is het duidelijk wat je precies bedoeld.
Een **duidelijke prompt** zegt precies:
1. *Wat* je wil
2. *Waarvoor* je het wil
3. Wat de beperkingen zijn
4. En eventueel *hoe* je het eruit wil laten zien
Een **voorbeeld** van de punten zijn:
1. Je wilt een website
2. Je wilt een website waarin de gebruiker zijn naam en adres moet opgeven.
3. Alle velden moeten op één web pagina passen en bestaat uit HTML en CSS.
De velden zijn allemaal verplicht. Zodra de submot button wordt ingedrukt wordt gecontroleerd of alle velden zijn ongevuld. Als dat niet het geval is dan volgt er een aanwijzing/waarschuwing.
4. Het moet er eenvoudig en professioneel uitzien, Gebruik 'Tailwind' als CSS framework.
### **📝** Opdracht 4
#### Situatie
Je wil een AI vragen om een klein interacteive pagina met JavaScript te maken waarmee je een getal controleert: is het **even of oneven**?
Hieronder zie je een voorbeeld van een **vage prompt**. Lees hem goed.
> “Schrijf iets in JavaScript dat met getallen werkt.”
Je gaat nu zelf een **duidelijke prompt** schrijven waarin je vraagt om een PHP-script dat:
- Alles komt in één HTML-bestand.
- Één getal controleert
- Zegt of het getal even of oneven is
- De gebruiker het getal zelf laat invoeren via een HTML-formulier
- Maak de styling. Geef zelf duidelijk aan hoe de pagina eruit moet zien (CSS).
### Inleveren
1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
2. HTML-bestand
## 4. Doelgericht
#### **📚** Theorie
- AI is niet helderziend. Als je alleen zegt “Leg dit uit”, weet de AI niet hoe uitgebreid, voor wie of in welke vorm.
- Wat wil je *precies* weten of krijgen?
- Wil je code, uitleg, een stappenplan, een voorbeeld, een tabel, enz.?
- Voor wie is het bedoeld? (Bijv. jezelf, een beginner, een klasgenoot?)
Een **doelgerichte prompt** maakt duidelijk:
### 📝 Opdracht
#### Situatie
Je wil begrijpen hoe een **while-loop** werkt in PHP, en je wil dat de AI het aan je uitlegt.
#### Deel 1: Vergelijk twee prompts
Prompt A (niet doelgericht):
> “Wat is een while-loop?”
Prompt B (wel doelgericht):
> “Leg uit wat een while-loop in PHP doet. Geef een voorbeeld met code en uitleg in simpele taal, zodat ik het kan gebruiken in een quiz voor klasgenoten.”
🔍 Wat is het verschil tussen A en B?
#### Deel 2: Schrijf je eigen doelgerichte prompt
Bedenk nu een onderwerp in PHP dat jij lastig vindt (bijvoorbeeld: arrays, forms, functies, POST vs GET…).
Schrijf een doelgerichte prompt waarbij je duidelijk maakt **wat je wil, in welke vorm, en voor wie het bedoeld i**
### Inleveren
1. Deel 1, leg in je eigen woorden uit wat het verschil is tussen prompt A en prompt B.
2. Deel 2, schrijf je eigen doelgerichte prompt (zie beschrijving deel 2).
## 5. Vorm
### **📚** Theorie (kort samengevat)
- Soms weet de AI wél wat je bedoelt, maar krijg je het antwoord in een **onhandige vorm**:
- Alleen tekst terwijl jij voorbeeldcode wilde.
- Een lang verhaal terwijl jij liever een stappenplan had.
- Code zonder uitleg erbij.
- Daarom is het slim om in je prompt te zeggen **hoe je het antwoord wil zien**:
- Als lijst, tabel, voorbeeldcode, uitleg in korte zinnen, enz.
### Opdracht
#### Deel 1: Slechte prompt (voorbeeld)
> “Leg uit hoe je een formulier maakt met PHP.”
Wat is hier onduidelijk over de **vorm** van het antwoord?
#### Deel 2: Schrijf zelf een betere prompt
Jij gaat nu een betere prompt schrijven waarin je **duidelijk zegt in welke vorm** je het antwoord wil krijgen. Kies een vorm, zoals:
- Stap-voor-stap uitleg
- PHP-code met uitleg onder elke regel
- Een tabel met onderdelen van een formulier
- Een combinatie van uitleg en voorbeeld
📌 Vergeet niet te vermelden dat je werkt met **PHP**, en dat het voor een **beginner** is.
### Inleveren
1. De uitleg (deel 1) en de prompt (deel 2) in een PDF.
## 6. Toon
### **📚** Theorie
- De **toon** is *hoe iets klinkt* of *overkomt*: serieus, grappig, formeel, simpel, kinderlijk, informeel, enz.
- Als je geen toon aangeeft, kiest de AI zelf. Soms is dat te zakelijk, te moeilijk of juist te speels.
- In een goede prompt zeg je dus **hoe de AI zich moet gedragen**.
### **📝** Opdracht
#### Situatie:
Je wil dat ChatGPT uitlegt wat een **functie in PHP** is.
Je gaat dezelfde uitleg in **verschillende tonen** laten geven.
### Stap 1: Schrijf drie verschillende prompts
Gebruik hetzelfde onderwerp (“Wat is een functie in PHP?”) en verander **alleen de toon**.
1. 🎩 **Formeel en technisch** (voor iemand met programmeerervaring):
2. 😄 **Grappig en speels** (alsof je het uitlegt aan een kind van 12):
3. 💬 **Duidelijk en vriendelijk** (voor een klasgenoot die net begint met PHP):
### Inleveren
1. Welke toon vond jij het **meest duidelijk** voor een beginner?
2. Welke toon past het best bij jouw klasgroep?
3. Wat gebeurt er als je géén toon vraagt in je prompt?
## Samengevat
### Een goede prompt.
1. **Context** – Geef achtergrondinformatie, zoals *voor wie* het is, *wat het doel is*, of *waar het over moet gaan (welke programmeertaal?)*.
2. **Detail** – Hoe specifieker je bent, hoe beter het antwoord past bij wat je zoekt.
3. **Duidelijkheid** – Gebruik duidelijke en begrijpelijke taal. Vermijd vage of dubbelzinnige zinnen.
4. **Doelgerichtheid** – Geef aan *wat je precies wil* (bijvoorbeeld: een uitleg, een lijst, een verhaaltje, een vergelijking, enz.).
5. **Vorm** – Soms helpt het als je zegt *hoe* het antwoord eruit moet zien (bijvoorbeeld: “maak er een tabel van”, “gebruik korte zinnen”, “schrijf het op het niveau van een brugklasser”).
6. **Toon/Stem** – Wil je dat het grappig is? Serieus? Zakelijk? Kinderlijk? Dat kun je ook zeggen in je prompt.
#### **Voorbeeld prompt**
> “Leg uit wat een if-statement is in PHP. Geef een simpel voorbeeld met uitleg in makkelijke taal. Ik ben 14 en net begonnen met PHP, dus graag zonder moeilijke woorden. Laat ook zien wat er gebeurt als de voorwaarde niet waar is.”
### Opdracht 3
Maak een prompt waarin je aan AI vraagt om een programma in HTML-pagina te maken die er zo goed mogelijk lijkt op deze website template.
Probeer dit in één tekst prompt te doen (gebruik dus géén plaatje) en denk aan alle 6 eigenschappen voor een goede prompt.
### Inleveren
1. Prompt die je hebt gemaakt (schermafdruk).
2. Resultaat (schermafdruk van de webpage).