Web-1: verschil tussen versies

Uit Inf2019
Naar navigatie springen Naar zoeken springen
k (1 versie geïmporteerd)
 
(12 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
{{Zijbalk Web1}}
{{Zijbalk Web1}}
== Web1: webservers ==
== Web1: het web voor makers (van webservers) ==


In deze module behandelen we een aantal principes van het web, in het bijzonder aan de kant van de webserver.
In deze module behandelen we een aantal principes van het web, in het bijzonder aan de kant van de webserver. Het uitgangspunt van deze module is: ''het web, dat maak je zelf''. Hoe werkt het web-protocol (HTTP), hoe werkt de samenwerking tussen de server en de client (browser)? Hoe kun je dat gebruiken voor het maken van een eigen website, en voor het inrichten van een eigen webserver?  
 
: Voor het maken van een website heb je nog andere kennis en vaardigheden nodig, bijvoorbeeld: HTML/CSS/JavaScript; en enige kennis van databases. We gaan ervan uit dat je daarvan enige (voor)kennis hebt.
Het uitgangspunt van deze module is: het web, dat maak je zelf. Hoe kun je je eigen website maken, hoe kun je je eigen webserver inrichten?


Voor het experimenteren met een eenvoudige webserver gebruiken we NodeRed.
Voor het experimenteren met een eenvoudige webserver gebruiken we NodeRed.


* [[Web1/Client-server]] Achtergrondinformatie/theorie
Een overzicht van de onderwerpen die aan de orde komen:
* [[Web-1/Client-server]] Achtergrondinformatie/theorie
** het HTTP-protocol; client-server interactie; http-request, response;
** het HTTP-protocol; client-server interactie; http-request, response;
** alternatieven voor client-server interactie: publish/subscribe (MQTT); bidirectionele verbindingen (websockets)
** URL; opbouw van URL: protocol; domeinnaam; padnaam; parameters; (inhoud/body)
** URL; opbouw van URL: protocol; domeinnaam; padnaam; parameters; (inhoud/body)
** wat zie je hiervan in de browser?
** alternatieven voor HTTP: bidirectionele verbindingen (websockets); publish/subscribe (MQTT);
* [[Web1/NodeRed]]
** wat merk je hiervan in de browser?
** installeren
* [[Web-1/NodeRed]]
** configuren
** installeren en configuren
** hoe werkt een flow?
** hoe werkt een flow?
** eerste flow (inject/debug)
** eerste flow (inject/debug)
** exporteren en importeren van flows
** exporteren en importeren van flows
* [[/Statische website]]
* [[Web-1/Statische website]]
** http-flow
** http-flow
** NodeRed: configureren van statische pagina's
** NodeRed: configureren van statische pagina's
** gebruik van CSS en Javascript
** gebruik van CSS en Javascript
* [[/Templates]]
* [[Web-1/Templates]]
** website met meerdere pagina's
** website met meerdere pagina's
** template-concept
** template-concept
Regel 33: Regel 32:
** templates en data
** templates en data
* [[/Server state]]
* [[/Server state]]
** NodeRed: globale variabele
** NodeRed: globale variabelen (context)
** uitbreiden van form-flow met extra pagina, met naam van de gebruiker
** uitbreiden van form-flow met extra pagina, met naam van de gebruiker
** (voorbeeld van gebruikers-voorkeuren)
** (voorbeeld van gebruikers-voorkeuren)
* [[/Gebruikers en sessies]] - en cookies
* [[/Gebruikers en sessies]] - en cookies
** wat is de levensduur van een cookie? "persistent" client-state
** levensduur van een cookie; "persistent" client-state
** [[/Headers]]
** [[/Headers]]
* [[/Server database]]
* [[/Web services]]
** vb: weerdienst
* [[/AJAX]]
* [[/AJAX]]
** client-side rendering
** client-side rendering
Regel 48: Regel 44:
** websockets voor "push" vanuit de server
** websockets voor "push" vanuit de server
** en voor client-server interactie met lage overhead, lage latency
** en voor client-server interactie met lage overhead, lage latency
* [[/Server database]]
* [[/Web services]]
** vb: weerdienst
* [[/Authenticatie en autorisatie]]
* [[/Authenticatie en autorisatie]]
* [[/REST]]
* [[/REST]]
Regel 57: Regel 56:
== Voorkennis ==
== Voorkennis ==


* Web0, Web1: html, css, javascript
* Web0; html, css, javascript
* werken met Cloud9 (incl. eenvoudig gebruik van Linux shell)
* Databases ("wat is een database? waarvoor gebruik je die?")
* Werken met Linux/Cloud9 (incl. eenvoudig gebruik van Linux shell)
** wat is een absolute padnaam?
** wat is een absolute padnaam?
** hoe achterhaal je het absolute pad van een bestand?
** hoe achterhaal je het absolute pad van een bestand?
Regel 65: Regel 65:
* JSON - wordt o.a. gebruikt in de Mustache template-voorbeelden.
* JSON - wordt o.a. gebruikt in de Mustache template-voorbeelden.


== Opmerkingen ==
== Toetsvragen ==


* hoe vertaal je e.e.a. naar een normale webserver; bijvoorbeeld (het eenvoudigst), een nodejs-server?
I.h.b.: ''diagnostische vragen''. T.B.D.
** geven we die voorbeelden erbij?
** het NodeRed-model is in zekere zin wel handig, zeker voor al die operaties die onbepaalde tijd vragen: je wilt niet dat die de server ophouden.
*** hoe is e.e.a. opgelost in NodeRed? Hoe vindt de scheduling plaats van de verschillende operaties? (Het message-model geeft je natuurlijk wel een grote mate van vrijheid, in de scheduling.)
* een van de afwegingen bij een website/webapp is: welk deel van de berekening/rendering doe je aan de kant van de server, en welk deel aan de kant van de client?
** om dit te begrijpen moeten we ook AJAX behandeld hebben.
* welke algemene informatica-concepten spelen hierbij een rol? Kunnen we bepaalde concepten generaliseren?
** o.a. "asynchroon"; blokkerende operaties; gedistribueerde systemen (en de problemen die daarbij een rol spelen).
** veiligheid: hoe kan ik daar verder aandacht aan besteden?
* er is een (groot) verschil in het gebruik van databases voor IoT-systemen, en voor klassieke web-toepassingen. In het laatste geval spelen "updates" een veel grotere rol; in het geval van het IoT niet of veel minder: de sensor-gegevens worden altijd als nieuwe data toegevoegd, er worden geen oude sensordata verwijderd. (Dat is ook weer een reden om zuinig te zijn met sensordata: voordat je het weet heb je een erg grote database...)
* welke figuren kunnen het begrip ondersteunen? (Eventueel: animaties, zoals met powerpoint.)
* ik heb de indruk dat Cloud9 het gebruik van een website alleen mogelijk maakt voor de eigenaar van de website: je moet eerst inloggen...?
** dat is voor ons doel nog wel geschikt; maar je kunt er geen demonstraties voor anderen mee geven...
 
== Toetsvragen ==


I.h.b.: ''diagnostische vragen''.
[[/Toetsvragen]]


== Webserver in NodeJS ==
== Webserver in NodeJS ==


* [[/Nodejs server]]
* [[/Nodejs server]]

Huidige versie van 18 jan 2018 om 19:45

Web1
Netwerken

Zie ook Regels en richtlijnen
Zie ook Artikelen bewerken

Web1: het web voor makers (van webservers)

In deze module behandelen we een aantal principes van het web, in het bijzonder aan de kant van de webserver. Het uitgangspunt van deze module is: het web, dat maak je zelf. Hoe werkt het web-protocol (HTTP), hoe werkt de samenwerking tussen de server en de client (browser)? Hoe kun je dat gebruiken voor het maken van een eigen website, en voor het inrichten van een eigen webserver?

Voor het maken van een website heb je nog andere kennis en vaardigheden nodig, bijvoorbeeld: HTML/CSS/JavaScript; en enige kennis van databases. We gaan ervan uit dat je daarvan enige (voor)kennis hebt.

Voor het experimenteren met een eenvoudige webserver gebruiken we NodeRed.

Een overzicht van de onderwerpen die aan de orde komen:

  • Web-1/Client-server Achtergrondinformatie/theorie
    • het HTTP-protocol; client-server interactie; http-request, response;
    • URL; opbouw van URL: protocol; domeinnaam; padnaam; parameters; (inhoud/body)
    • alternatieven voor HTTP: bidirectionele verbindingen (websockets); publish/subscribe (MQTT);
    • wat merk je hiervan in de browser?
  • Web-1/NodeRed
    • installeren en configuren
    • hoe werkt een flow?
    • eerste flow (inject/debug)
    • exporteren en importeren van flows
  • Web-1/Statische website
    • http-flow
    • NodeRed: configureren van statische pagina's
    • gebruik van CSS en Javascript
  • Web-1/Templates
    • website met meerdere pagina's
    • template-concept
    • templates voor een uniforme layout
  • /HTML formulieren
    • HTML formulier
    • HTTP-POST request; formulier-data
    • HTTP-POST flow
    • templates en data
  • /Server state
    • NodeRed: globale variabelen (context)
    • uitbreiden van form-flow met extra pagina, met naam van de gebruiker
    • (voorbeeld van gebruikers-voorkeuren)
  • /Gebruikers en sessies - en cookies
    • levensduur van een cookie; "persistent" client-state
    • /Headers
  • /AJAX
    • client-side rendering
    • asynchrone acties in JavaScript
  • /Websockets
    • websockets voor "push" vanuit de server
    • en voor client-server interactie met lage overhead, lage latency
  • /Server database
  • /Web services
    • vb: weerdienst
  • /Authenticatie en autorisatie
  • /REST

Concepten

Voorkennis

  • Web0; html, css, javascript
  • Databases ("wat is een database? waarvoor gebruik je die?")
  • Werken met Linux/Cloud9 (incl. eenvoudig gebruik van Linux shell)
    • wat is een absolute padnaam?
    • hoe achterhaal je het absolute pad van een bestand?
    • hoe maak je een bestand aan (met de Cloud9 editor)?
    • hoe verander je de naam van een bestand?
  • JSON - wordt o.a. gebruikt in de Mustache template-voorbeelden.

Toetsvragen

I.h.b.: diagnostische vragen. T.B.D.

/Toetsvragen

Webserver in NodeJS

Overgenomen van "http:///inf2019/index.php?title=Web-1&oldid=952"