HTML¶

Alle websites op het Internet maken gebruik van dezelfde drie technologieën:

HTML
CSS
JavaScript

HTML is een taal waarmee je documenten kunt opstellen. CSS is een taal waarmee je de vormgeving van die documenten kunt aanpassen. JavaScript is een programmeertaal, waarmee het mogelijk wordt programma’s in de webbrowser zelf uit te voeren.

HTML¶

Om HTML bestanden te begrijpen, dienen we enkel begrippen te introduceren:

tags: woorden tussen “<” en “>” die de structuur van het document aangeven
attributen: parameters voor tags

Opgave 1¶

Maak een bestand met naam index.html met hierin onderstaande code:

<html>
    <body>
        <p>Een eerste paragraaf.</p>
        <img src="https://placekitten.com/200/300">
    </body>
</html>

In dit bestand zijn de volgende tags te zien:

html: dit geeft aan dat we een HTML bestand gebruiken
body: hierin komt de inhoud van de webpagina
p: een paragraaf tekst
img: een afbeelding

In dit bestand zien we 1 attribuut voor de tag <img>: “src”. Dit “source”-attribuut geeft de locatie van de afbeelding aan die getoond zal worden. Open het bestand met Firefox, Chrome of Edge.

Voeg een tweede paragraaf toe.

Voeg een tweede afbeelding toe.

CSS¶

CSS is een taal die toelaat om de layout van HTML documenten aan te passen en o.a. de tekst vorm te geven:

p {
    color: red;
    font-size: 32px;
}

In bovenstaande code wordt voor paragrafen de tekstkleur rood gemaakt, en wordt de grootte van de letters ingesteld op 32 pixels. Om CSS code in HTML te kunnen gebruiken wordt de <style> tag gebruikt:

<html>
    <body>
        <style>
        p {
            color: green;
        }
        </style>
        <p>Deze tekst is groen.</p>
    </body>
</html>

Opgave 2¶

Open het bestand uit opgave 1, en voeg CSS toe zodanig dat de tekst rood is, en de letters 48 pixels groot zijn.

HTML aanmaken vanuit Python¶

Net zoals we voordien SVG-bestanden vanuit Python code maakten, kunnen we ook HTML-bestanden vanuit Python maken.

Opgave 3¶

Schrijf een Python programma dat een HTML bestand met naam “index.html” aanmaakt met hierin 100 paragrafen. Gebruik hiervoor een for-lus.

Website¶

Om een minimale website te bouwen heb je slechts twee dingen nodig: - een HTML bestand - een webserver

Je leerde al hoe zo’n HTML bestand uitziet, en zelfs hoe je zo’n bestand vanuit Python kan aanmaken.

Webserver¶

Een webserver is een software systeem dat je toelaat om een HTML bestand via het HTTP protocol beschikbaar te maken (en ook via de geencrypteerde variant HTTPS).

Er bestaan vele webservers, de populairste die in productie gebruikt worden zijn Apache HTTPD en nginx.

Buiten die webservers, zijn er ook verschillende webservers beschikbaar die eenvoudiger in gebruik zijn, en enkel geschikt tijdens het ontwikkelen van software.

Zo zit er in Python ook zo een ingebouwde eenvoudige webserver. Je kan deze oproepen vanaf de commando-prompt met het commando:

python3 -m http.server

Opgave 4¶

Open een commando-prompt in de map waarin je het bestand “index.html” aangemaakt had. Voer hier het eerdergenoemde commando in.

Je ziet volgende tekst op het scherm verschijnen:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Open nu een webbrowser en surf naar http://127.0.0.1:8000/

Static websites¶

Er zijn ook een aantal websites die toelaten om op een eenvoudige manier, zonder zelf een server te moeten installeren een website te hosten.

Zo kan dit o.a. met: - Amazon S3 - Surge.sh - Netlify

Surge.sh laat toe om gratis websites te hosten, dus deze zullen wij gebruiken om onze website online beschikbaar te maken: https://surge.sh/

Node¶

Buiten Python bestaan er uiteraard nog andere populaire programmeertalen. Een van de meest populaire talen is Javascript. Dit is een taal die onder andere populair werd, omdat het de enige programmeertaal is die je in elke webbrowser kunt uitvoeren.

Doordat vele mensen leerden programmeren met Javascript voor gebruik in de webbrowser, kwam er ook meer en meer vraag naar het gebruik van Javascript voor andere doeleinden.

Zo ontstond het “Node” of “NodeJS” project.

Opgave 5: Installeer Node¶

Ga naar onderstaande website en installeer Node: https://nodejs.org/en/download/

NPM¶

Nu je Node geinstalleerd hebt, heb je ook het commando “npm” beschikbaar. Dit is de JavaScript tegenhanger van “pip”: Je kan hier dus JavaScript software mee installeren.

Opgave 6: Installeer surge¶

Installeer Surge door een Windows Opdrachtprompt te openen en volgend commando in te typen:

npm install -g surge

Maak nu een lege map en plaats hierin een eenvoudig HTML bestand. Open een Windows Opdrachtprompt in deze map, en voer het commando “surge” in deze map uit. Surge zal nu alle bestanden in deze map uploaden naar een nieuwe website met een unieke naam.

Version control systems¶

De broncode is het belangrijkste stuk van een software project (op de ontwikkelaars zelf na). Daarom is het ook heel belangrijk dat die code op een veilige en handige manier opgeslagen en gedeeld kan worden. Een systeem van ZIP-bestanden, upload-zones en kopietjes van bestanden, is onbetrouwbaar, onoverzichtelijk, en moeilijk om met meerdere ontwikkelaars aan te werken. Zeker voor grote projecten met tienduizenden bestanden en miljoenen regels code is een gestructureerde manier van het opslaan van code noodzakelijk.

In het verleden werden vele verschillende systemen gebruikt: - CVS - Subversion - Bitkeeper

Momenteel is het populairste systeem Git.

Git¶

Je kan de Git tools downloaden op: https://git-scm.com/

Je kan Git op de commandline gebruiken, of je kan een grafische interface gebruiken, of de geintegreerde versie die in je IDE zit gebruiken (zoals in PyCharm of VSCode).

Als je de code wil delen met andere, kan dit door een Git-server op te zetten. Een alternatief is het gebruik van een hosted service.

Dit zijn een aantal populaire aanbieders van online Git-repositories: - GitHub - GitLab (open source) - BitBucket

Netlify¶

Netlify laat toe om static websites te bouwen, door een GIT-repository aan te maken. Iedere aanpassing aan je Git-repo wordt automatisch doorgestuurd naar je website.

Hiervoor heb je wel een Git-repository nodig.

Opgave 7: Bouw een website¶

Maak een account aan op GitHub. Maak vervolgens een account aan op Netlify. Maak via Netlify een website aan, die gebruik maakt van een repository in je GitHub account. Zorg dat je je website kunt bezoeken.

Zorg dat je website minstens volgende tags gebruikt:

- a
- h1
- div
- p
- img
- style

Zorg dat je website CSS gebruikt:

- color
- background-color
- border
- font-size
- font-family
- border-radius
- box-shadow

Gebruik de Mozilla Developer Network website om informatie op te zoeken over bovenstaande CSS en HTML.

Opgave 8: Video op je website¶

Zoek uit hoe je een YouTube video op je website kunt embedden.

Opgave 9: Forms¶

Om informatie van de client (webbrowser) naar de server te versturen, dienen we gebruik te maken van enkele nieuwe tags:

- form: een web-formulier
- input: een invoerveld
- label: een label bij een invoerveld

Een kort voorbeeld van de HTML code nodig voor een formulier met 1 veldje:

<form>
        <label>Voornaam</label>
        <input type="text" name="voornaam">
        <input type="submit" value="Verstuur">
</form>

Een voorbeeld met twee invoerveldjes.

<html>
  <body>
    <form>
      <label>Voornaam</label>
      <input type="text" name="voornaam">
      <label>Achternaam</label>
      <input type="text" name="achternaam">
      <input type="submit" value="Verstuur">
    </form>
  </body>
</html>

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.

Kopieer de bovenstaande code naar een bestand met naam form01.html en gebruik python om de code als website te bekijken:

python3 -m http.server .

Surf nu naar http://localhost:8000 en bekijk de website.

Opgave 10: HTTP GET¶

Gebruik Chrome Inspector en ga naar de Netwerk tab om het HTTP-verkeer te kunnen bekijken.

Voer nu een voor- en achternaam in en klik op verstuur. Bekijk de overeenkomstige netwerkcommunicatie in Chrome Inspector.

Opgave 11: HTTP POST¶

Het form element heeft een attribuut “method” waarmee je de communicatie-methode met de server kunt aanpassen. Standaard wordt de HTTP GET methode gebruikt:

<form method="get">
        <input type="text" name="voornaam">
        <input type="submit" value="Verstuur">
</form>

Deze kan aangepast worden naar HTTP POST:

<form method="post">
        <input type="text" name="voornaam">
        <input type="submit" value="Verstuur">
</form>

Gebruik Chrome Inspector en ga naar de Netwerk tab om het HTTP-verkeer te kunnen bekijken.

Voer nu een voor- en achternaam in en klik op verstuur. Bekijk de overeenkomstige netwerkcommunicatie in Chrome Inspector. Vergelijk de HTTP communicatie tussen beide methodes. Leet ook op de status codes. Welke code krijgt je terug bij gebruik van GET en welke bij gebruik van POST?

Checkbox¶

HTML voorziet ook een manier om checkboxes te gebruiken om booleaanse waarden te versturen:

<input type="checkbox" name="symptomen">

Voeg deze code toe aan je HTML pagina, en vergelijk de werking op je laptop en smartphone.

Als je de website niet op je smartphone kan bekijken, kan je de “-b” parameter van http.server gebruiken, om expliciet op te geven op welk IP-adres de webserver dient te werken. Bijvoorbeeld:

python3 -m http.server -b 192.168.3.100

Ook kan je kiezen op welk poortnummer de webserver dient te werken:

python3 -m http.server 9010

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Numerieke invoer¶

Verder voorziet men ook een manier om numerieke waarden in te voeren:

<input type="number" min="0" max="100" name="score">

Voeg deze code toe aan je HTML pagina, en vergelijk de werking op je laptop en smartphone.

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Datum veld¶

Ook wordt er een datumveld voorzien door de specificatie:

<input type="date" name="verjaardag">

Voeg deze code toe aan je HTML pagina, en vergelijk de werking op je laptop en smartphone.

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Select¶

Ook wordt er een datumveld voorzien door de specificatie:

<select name="huisdier">
  <option value="k">kat</option>
  <option value="h">hond</option>
  <option value="v">vis</option>
</select>

Voeg deze code toe aan je HTML pagina, en vergelijk de werking op je laptop en smartphone.

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Textarea¶

Je kan ook een vrij tekstveld voorzien in je formulier:

<textarea name="commentaar">
</textarea>

Je kan via attribuut rows het aantal regels bepalen, en via attribuut cols het aantal kolommen.

Voeg deze code toe aan je HTML pagina, en vergelijk de werking op je laptop en smartphone.

Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Opgave 12: Netlify forms¶

Zoals we in de vorige opgave konden zien, kan je naar een statische website geen forms doorsturen met behulp van HTTP POST. Netlify voorziet echter toch een manier om forms te kunnen gebruiken:

<form method="post" data-netlify="true" name="contact">
        <input type="text" name="voornaam">
        <input type="submit" value="Verstuur">
</form>

Voeg een formulier aan jullie website toe met volgende invoervelden:

- voornaam: tekst veld
- achternaam: tekst veld
- lengte: numeriek veld met waarde tussen 10 en 250
- geboortedatum: datum veld
- gehuwd: checkbox
- land: selectie-veld

Vul het formulier in op je website, en verstuur de informatie. Ga nu naar de Netlify website en bekijk de informatie op de Netlify website. Download de informatie als CSV en open als spreadsheet.

Zo kan je dus zelf surveys maken, en de data achteraf downloaden en verwerken.

Dynamische websites¶

Tot nu toe maakten we enkel statische websites: Dit zijn websites waarbij de HTML vast ligt, je schrijft de HTML 1 maal, en plaatst de site dan online. De site ziet er altijd hetzelfde uit, voor alle gebruikers.

Om deze beperking te omzeilen, werden al gauw alternatieven bedacht, waarbij een programmeertaal gebruikt werd om de HTML on-the-fly aan te maken. Dit werd initieel gedaan door programma’s te schrijven, die de HTML op het scherm toonden (dus, in Python b.v. via de print() functie). Webservers riepen je programma dan op als er een bepaalde URL bezocht werd op een site. Dus, je kon zo ervoor zorgen, dat als http://mijnsite.be/boeken bezocht werd, een Python script boeken.py uitgevoerd werd. Dit script kon dan een HTML pagina via print tonen met al je boeken. Die HTML werd naar de webbrowser gestuurd.

Web frameworks¶

Web frameworks zijn bibliotheken van functies die het maken van zo’n dynamische websites proberen te vergemakkelijken.

Enkele voorbeelden:

Django (Python)
Flask (Python)
Pyramid (Python)
web2py (Python)
Ruby On Rails (Ruby)
Express (Javascript)
Laravel (PHP)
Symfony (PHP)

In de Python wereld zijn Django en Flask de populairste webframeworks.

Bekende bedrijven die gebruik maken van Python:

Netflix: https://netflixtechblog.com/python-at-netflix-bba45dae649e
Instagram: https://www.youtube.com/watch?v=lx5WQjXLlq8
DemonWare: https://pyvideo.org/djangocon-europe-2014/gamers-do-rest.html (CoD, Skylanders)

Django¶

Django is het webframework dat onder andere door Instagram gebruikt wordt.

Hieronder een voorbeeldje van een minimale Django site:

from django.conf import settings
from django.core.management import execute_from_command_line
from django.http import HttpResponse
from django.urls import path

settings.configure(
    DEBUG=True,
    ROOT_URLCONF=__name__,
)


def index(request):
    return HttpResponse("Home page")


def about(request):
    return HttpResponse("About page")


urlpatterns = [
    path("", index),
    path("about", about),
]

execute_from_command_line()

Link naar html_opgave7.py

De functies index en about noemt men in Django “views”. Dit zijn de functies die HTML pagina’s dienen aan te maken en via het return statement teruggeven.

De variabele “urlpatterns” bevat een lijst. Deze lijst mapt URLs naar de “views”. Dus, als de bezoeker van een site “http://jesite.be/about” bezoekt, zal Django de functie about oproepen en het resultaat ervan naar de webbrowser sturen.

Opgave 9: Installeer Django¶

Maak een map aan voor ‘t nieuwe project. Open hier een commandoprompt.

Maak een virtuele omgeving aan door middel van volgende commando:

python3 -m venv venv

Activeer de virtuele omgeving in de commandoprompt:

venv/Scripts/activate.bat

Installeer Django met pip:

pip3 install django

Verifieer dat Django geinstalleerd is:

pip3 list

Opgave 10: Views¶

Kopieer de code uit het voorbeeld naar een bestand met naam “website.py” en voer het volgende commando uit:

python3 website.py

Je krijgt nu een lijstje met commando’s die Django beschikbaar maakt. Een van de commando’s is het “runserver” commando, waarmee je een webserver opstart.

Gebruik het runserver commando om je website op te starten:

python3 website.py runserver

Je krijgt nu informatie over de URL waarop de website toegankelijk is. Verder krijg je ook debug informatie te zien. Surf naar de website en verifieer dat je code uitgevoerd werd. Gebruik “curl” om de webpagina te bekijken vanuit een commandoprompt:

curl http://127.0.0.1:8000

Opgave 11: Views¶

Je code heeft momenteel twee views: index en about. Voeg een derde view “contact” toe die een webpagina toont met je contactinformatie (emailadres b.v.).

Opgave 12: Views¶

Voeg een vierde view “nu” toe die een webpagina toont met de huidige datum en tijd.

Hint: datetime, now.

https://docs.python.org/3/library/datetime.html

Opgave 13: Views¶

De parameter “request” die je in de views ziet, bevat alle informatie die je van de webbrowser (en webserver) ontvangt. Zo bevat requests ook alle parameters die via de URL doorstuurt:

http://localhost:8000?param1=100&achternaam=issaris&voornaam=takis

Je kan deze informatie afdrukken via request.GET:

from django.conf import settings
from django.core.management import execute_from_command_line
from django.http import HttpResponse
from django.urls import path

settings.configure(
    DEBUG=True,
    ROOT_URLCONF=__name__,
)


def index(request):
    print(request.GET)  # XXX: Nieuw
    return HttpResponse("Home page")


def about(request):
    return HttpResponse("About page")


urlpatterns = [
    path("", index),
    path("about", about),
]

execute_from_command_line()

Voer bovenstaande code uit, en probeer meer parameters toe te voegen.

Opgave 14: Templates: HTML uit bestanden¶

Je view geeft meestal HTML code terug:

def index(request):
    html = """<html>
    <body>
    <h1>Mijn website</h1>
    </body>
    </html>
    """
    return HttpResponse(html)

De HTML-code rechtstreeks in je Python code schrijven is nogal onhandig, maar je kan de HTML ook uit een bestand lezen:

def index(request):
    bestand = open("index.html", "rt")
    html = bestand.read()
    return HttpResponse(html)

Pas je code aan zodat de views about, index en contact hun informatie uit een tekstbestand lezen.

Opgave 15: Som van getallen via HTTP GET¶

Schrijf een view ‘som’ die de som van twee getallen kan uitvoeren:

http://127.0.0.1:8000/som?x=100&y=20

Toont een webpagina met: 100 + 20 = 120.

Je kan beginnen met volgende view:

def som(request):
    html = ""
    # ...
    return HttpResponse(html)

Je parameters komen via de URL binnen, dus ze belanden in de request.GET dictionary. In deze dictionary zitten ze als strings, dus je dient nog een conversie naar integer of float uit te voeren.

Opgave 17: Views met forms (POST)¶

Pas nu je formulier aan zodat het method attribuut nu post bevat:

def index(request):
    html = """<html>
    <body>
    <h1>Formulier</h1>
    <form method="post">
    <input type="text" name="x">
    <input type="text" name="y">
    <input type="submit">
    </form>
    </body>
    </html>
    """
    return HttpResponse(html)

Pas nu opgave 16 aan, zodat je van dit formulier gebruik maakt om hetzelfde resultaat te bekomen (de som van x en y als resultaat van de view).

Je kan zien of het formulier voor ‘t eerst bekeken werd of dat er op submit geklikt werd door volgende code te gebruiken:

if request.method == "get":
    print("eerste keer")
elif request.method == "post:
    print("submit van x en y")

Opgave 18: Views met forms¶

Zo kan je dus ook een formulier tonen via je dynamische website:

def index(request):
    html = """<html>
    <body>
    <h1>Formulier</h1>
    <form method="get">
    <input type="text" name="voornaam">
    <input type="submit">
    </form>
    </body>
    </html>
    """
    return HttpResponse(html)

Dit wordt zeer onoverzichtelijk, dus kan je de HTML-code beter vanuit een bestand lezen:

from django.conf import settings
from django.core.management import execute_from_command_line
from django.http import HttpResponse
from django.urls import path

settings.configure(
    DEBUG=True,
    ROOT_URLCONF=__name__,
)


def index(request):
    print(request.GET)
    bestand = open("html_from_file.html", "rt")
    html = bestand.read()
    return HttpResponse(html)


def about(request):
    return HttpResponse("About page")


urlpatterns = [
    path("", index),
    path("about", about),
]

execute_from_command_line()

<html>
  <body>
    <h1>Formulier</h1>
    <form>
      <input type="text" name="voornaam">
      <input type="submit">
    </form>
  </body>
</html>

Taken:

- Voeg een nieuwe view aan je code toe, die de inhoud van request.POST afdrukt.
- Print ook de inhoud van request.method af.

Opgave 16: Som van getallen¶

Schrijf een view ‘som’ die de som van twee getallen kan uitvoeren:

def som(request):
    html = ""
    # ...
    return HttpResponse(html)

Je HTML form dient volgende code te bevatten:

<form method="post">
    <input type="text" name="x">
    <input type="text" name="y">
    <input type="submit">
</form>