Front-end en back-end

• newEditor
• ICT
• MBO
• Studiejaar 1

Front-end en back-end

Open vanuit een herkenbare situatie: leerlingen gebruiken elke dag websites en apps, maar zien meestal niet dat daar twee verschillende soorten ontwikkeling achter zitten.

Front-end en back-end vergeleken

• Draait achter de schermen

• Richt zich op data, logica en verwerking

• Voorbeelden: database, login, opslag

• Zichtbaar voor de gebruiker

• Richt zich op scherm, vorm en bediening

• Voorbeelden: menu, knop, lay-out

Front-end

Back-end

Deze slide is het kerncontrast van de les. Laat leerlingen de twee rollen naast elkaar zien als verschil in focus.

Leerdoel

Ik kan uitleggen wat front-end development is.

Ik kan uitleggen wat back-end development is.

Ik kan uitleggen hoe die twee met elkaar samenwerken.

Nexed

Welke woorden passen volgens jou bij front-end en back-end?

Gebruik dit als voorkennis-activatie. Vraag eventueel welke woorden horen bij het zichtbare deel en welke bij het onzichtbare deel van een webapp.

Twee kanten van één webapp

• Een website of app heeft vaak een zichtbare kant en een onzichtbare kant

• De zichtbare kant heet front-end

• De onzichtbare kant heet back-end

• Samen zorgen ze dat een webapp er goed uitziet én goed werkt

Benadruk dat front-end en back-end geen concurrerende rollen zijn, maar onderdelen van één systeem.

Wat is front-end?

• Alles wat de gebruiker ziet en gebruikt

• Denk aan pagina's, menu's, knoppen en formulieren

• Front-end bepaalt hoe een website of app aanvoelt voor de gebruiker

Koppel aan dagelijkse voorbeelden: homepage, menubalk, winkelwagenknop, zoekveld.

Wat is back-end?

• Alles wat op de serverkant gebeurt

• De gebruiker ziet dit meestal niet direct

• De back-end verwerkt gegevens en voert logica uit

• Zonder back-end kunnen veel websites niet echt functioneren

Maak duidelijk dat 'serverkant' betekent: processen achter de schermen die data opslaan, ophalen en controleren.

Wat doen front-end en back-end samen bij inloggen?

Bespreek dat een goed antwoord beide kanten noemt: front-end = invoervelden/knop/melding, back-end = ontvangen, controleren en toegang geven of afwijzen.

Samenwerking bij een inlogscherm

Invoervelden en de knop staan in de front-end. Na het klikken stuurt de app de gegevens naar de back-end. Daar worden de gegevens gecontroleerd. Daarna krijgt de gebruiker een melding of toegang.

Gebruik eventueel een pijlenketen mondeling: invoeren → verzenden → controleren → terugkoppeling.

Groepsopdracht

Jullie gaan onderzoeken

Groepsopdracht

• Vorm groepjes van max 5 personen

• Doe een onderzoek naar het onderwerp van jullie groep (20 min)

• Maak een korte presentatie over je onderwerp (5 min per groep)

• Presenteer met je groep het onderwerp aan de andere groepen

Groepsopdracht onderwerpen

1. Zoekfuncties

2. Online bestellen en betalen

3. Social media (berichten, foto's en reacties)

4. Aanbevelingen en suggesties (bijvoorbeeld op Netflix, YouTube of Spotify)

5. Profielen en persoonlijke gegevens

Aanpak

Beantwoord met je groep de volgende vier vragen:

1. Wat is het? Geef een korte uitleg in je eigen woorden.

2. Waar kom je dit tegen? Noem minimaal 3 apps of websites waarin dit gebruikt wordt.

3. Wat merkt de gebruiker ervan? Beschrijf wat een gebruiker ziet of doet.

4. Wat gebeurt er achter de schermen?
Bedenk welke informatie de computer hiervoor moet opslaan of verwerken.
Wat gebeurt er in de front-end, wat gebeurt er in de back-end?

5. Waarom is dit belangrijk?
   Leg uit waarom een app of website zonder dit onderdeel minder goed zou werken.

Terugkoppeling

Vijf minuten presentatie per groepje

Titel Jullie onderwerp

Wat is het? Korte uitleg

Voorbeelden Minimaal 3 voorbeelden

Wat merkt de gebruiker ervan? Beschrijf wat een gebruiker ziet of doet.

Achter de schermen

Welke informatie wordt opgeslagen of verwerkt?

Wat gebeurt er in de front-end, wat in de back-end?

Waarom belangrijk? Eén duidelijke reden

De zichtbare kant

Front-end is alles wat een gebruiker ziet en gebruikt in een website of app.

• schermen en pagina's

• knoppen, menu's en formulieren

• kleuren, lettertypes en lay-out

• reacties op klikken, typen en scrollen

Benadruk dat front-end niet alleen om uiterlijk gaat, maar ook om gedrag in de browser: wat er gebeurt als een gebruiker iets doet.

Wat hoort het best bij front-end?

A

Database beheren

B

Interface en interactie

C

Inlogcontrole

D

Gegevens opslaan

De juiste keuze koppelt aan wat de gebruiker ziet en gebruikt. De andere opties horen vooral bij de serverkant.

De serverkant

Back-end is het deel van een webapplicatie dat achter de schermen werkt.

• voert logica en regels uit

• verwerkt gegevens van gebruikers

• communiceert met databases

• bepaalt welke informatie wordt teruggestuurd

Leg uit dat gebruikers de back-end meestal niet direct zien, maar wel merken of deze goed werkt: snel, veilig en correct.

Welke taak hoort bij de back-end?

A

Kleuren kiezen

B

Knoppen tonen

C

Gegevens verwerken

D

Lay-out plaatsen

Back-end gaat over logica, databases, authenticatie en gegevensverwerking; niet over vormgeving of zichtbare onderdelen.

Samen één webapplicatie

Front-end en back-end hebben verschillende taken, maar werken steeds samen.

De front-end verzamelt invoer en toont resultaten. De back-end verwerkt de aanvraag, haalt of bewaart gegevens en stuurt een antwoord terug.

Gebruik hier de centrale samenvatting van de les: zichtbaar deel en serverdeel zijn geen losse werelden, maar schakels in één proces.

Kernverschil samengevat

Front-end gaat over wat de gebruiker ziet en doet.

Back-end gaat over wat het systeem achter de schermen verwerkt.

Samen zorgen ze ervoor dat een webapplicatie niet alleen mooi en duidelijk is, maar ook echt werkt.

Dit is de landingsslide van de les. Verbind deze samenvatting expliciet aan het leerdoel.

Hoe werken front-end en back-end samen?

Verwachte elementen: front-end toont velden/lijst/resultaat; back-end verwerkt aanvraag, haalt of bewaart gegevens, controleert regels. Een concreet voorbeeld zoals inloggen, formulier of producten ophalen is passend.

Wat is één inzicht dat je meeneemt uit deze les?

Laat studenten kort benoemen wat ze meenemen uit de les. Geschikte antwoorden gaan bijvoorbeeld over het verschil tussen zichtbaar en achter de schermen, of over samenwerking bij inloggen/formulieren.

Nexed

Voeg hier je vraag toe

1

Front-end

2

Back-end

3

Weet ik nog niet