Samenvatting Informatica Course 4
Dit blok gaan we werken met webapplicaties.
Aan het eind van het blok ben je in staat om een eenvoudige webapplicatie te maken, en
deze applicatie heeft een interactie met een database, gebruiker en externe servers
(BLAST).
Browser: een browser is een programma/tool die in staat is om bestanden via HTTP(s) over
te halen en te visualiseren (de HTML-documenten).
HyperText Transfer Protocol (HTTP): een protocol om bestanden te versturen. Het beschrijft
de regels waarmee webpagina’s opgevraagd en gestuurd worden.
HTTP is verglijkbaar met VOIP en FTP
Je hebt een HTTP Request header een een HTTP response header.
Het geheel kun je je zo voor je zien:
De browser interpreteert de opmaak. Je bent dan ook sterk afhankelijk van welke browser je
gebruikt, hoe alles eruit komt te zien. Ook de versie van een browser is sterk bepalend.
Er is wel een standaard afgesproken. Op dit moment wordt HTML 5.0 standaard gehanteerd,
maar er zijn browsers die hier van afwijken.
Browsers zijn zeer tolerant, ze negeren wat ze niet begrijpen. Dit is handig voor de gebruiker,
omdat je oudere browsers kunt gebruiken voor HTML die veel nieuwe tags bevat. Maar voor
de programmeur is dit niet handig. Het kan zijn dat je iets schrijft wat niet blijkt te werken,
maar je weet dan niet waar de error zit.
,HyperText Markup Language (HTML): HTML is de taal waarmee je documenten maakt, die
bekeken kunnen worden op het World Wide Web. Het is een opmaak taal.
- HyperText is de techniek waarmee een verbinding (een link) wordt gelegd naar
bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.
- Markup is het gebruik van code om de browser te vertellen hoe de inhoud van het
document weergegeven moet worden en naar welke bestemming de hyperlinks
moeten leiden.
- HTML-code is opgebouwd uit elementen en attributen.
- HTML is statisch. Dat wil zeggen dat HTML zelf niet kan valideren en niet uit zichzelf
kan wijzigen.
De HTML elementen bestaan meestal uit tweetallen:
- Een deel dat het element activeert, bijvoorbeeld <b>
- En een deel dat het element beëindigt, aangegeven met een \, bijvoorbeeld <\b>
- Tussen het element zet je bijvoorbeeld tekst die de opmaak van dat element moet
hebben, bijvoorbeeld <b> Hello world! <\b>.
Een aantal elementen heeft geen inhoud, bijvoorbeeld het hr element, waarmee je een
horizontale lijn weergeeft. Dit element hoef je dan ook niet te sluiten, enkel <hr> is genoeg.
Schrijven van een HTML-document:
Het maakt niet uit wat voor een editor je gebruikt. Zolang je het opslaat als .html kan alles.
Voorbeelden van editors zijn notepad++, sublime tekst 3, maar het kan ook in PyCharm. Kies
wat jij fijn vind om mee te werken.
De basis ziet er als volgt uit:
<head> gaat over de basic informatie van je webpagina, bijvoorbeeld de titel. Deze
informatie wordt niet weergegeven in de browser.
<body> bevat alles wat in de browser zichtbaar moet zijn.
Een aantal elementen (dit zet je dus allemaal in de body):
- <i> dit is om tekst cursief weer te geven<\i>
- <b> vet kan ook +<\b>
- <u> underline kan ook<\u>
- Met <p> <\p> maak je paragrafen. Zet alle tekst waarvan je een paragraaf wilt maken
ertussen.
, - <hr> geeft een horizontale rij. Je kunt attributen hiervan aanpassen.
Soms kan het zijn dat je bepaalde tekens in je browser wilt opnemen, maar die tekens
hebben ook een betekenis in HTML. Je moet die tekens dan escapen. Voor elk teken doe je
dat op een andere manier, google dat gewoon.
- Wanneer je bijvoorbeeld aanhalingstekens weer wilt geven, dan doe je dat zo: ".
Dit geeft dan een aanhalingsteken (“) weer in de browser.
Attributen: attributen zijn nadere specificaties van een element, oftewel de parameters. Bij
<hr> kun je bijvoorbeeld de attribuut size aanpassen:
- <hr size=5 noshade> (noshade zorgt voor een bepaalde weergave)
Je kunt ook hyperlinks toevoegen. Dat doe je met het Anchoring (a) element. Met het href
attribuut geef je de locatie aan naar waar de hyperlink moet linken:
- <a href=”mailto:nicksomsen@gmail.com”>[zet hier neer wat je op de webpagina als
naam voor de hyperlink weer wil geven, bijvoorbeeld: Mail mij]<\a>
Lijsten: in HTML-documenten kun je verschillende soorten lijsten toepassen. De meest
gebruikte zijn de ongeordende en de geordende lijst. Daarnaast heb je nog de definitielijst,
de menulijst en de directorylijst.
- Ongeordende lijst: in deze lijst zijn de items niet genummerd, maar hebben ze een
symbool als markering (bijvoorbeeld een bullet point). Je maakt deze lijst met de
elementen ul en li.
o Als eerst open je het ul element: <ul>
o Vervolgens list je de dingen die je in de lijst wilt hebben. Voor elk apart item
moet je opnieuw het li element openen en sluiten, bijvoorbeeld:
o <li> dit is het eerste <\li>
o <li> dit is het tweede <\li>
o Wanneer je klaar bent, dan moet je het ul element sluiten: <\ul>
- Geordende lijst: in deze lijst zijn de items genummerd door een getal of een letter. De
geordende lijst maak je op dezelfde manier als een ongeordende lijst, alleen gebruik
je dit keer de elementen ol en li.
o Als eerst open je het ol element: <ol>
o Vervolgens list je de dingen die je in de lijst wilt hebben. Voor elk apart item
moet je opnieuw het li element openen en sluiten, bijvoorbeeld:
o <li> dit is het eerste <\li>
o <li> dit is het tweede <\li>
o Wanneer je klaar bent, dan moet je het ol element sluiten: <\ol>
Meta informatie: met meta informatie geef je informatie over je document. Deze bevind zich
in de <head> sectie. Met het meta element en de attributen die daarbij horen, kun je meta
informatie mee geven, bijvoorbeeld:
,- <meta name=”Nick Somsen” content=”HTML course 4”>. Er zijn nog een aantal meer
attributen die je kunt meegeven.
,Tabellen: tabellen worden veel gebruikt op HTML-pagina’s. Wanneer je een tabel wilt
aanmaken, dan gebruikt je het <table> element, met de <tr> en <td> elementen,
bijvoorbeeld:
Frames: met behulp van frames kan een venster onderverdeeld worden in meerdere frames
of sub-vensters. In elke frame kan een document geopend worden. Dit hebben we verder
niet behandeld tijdens de les.
JavaScript: een script is programmacode waarmee je extra mogelijkheden aan je HTML-
documenten toe kunt voegen. In tegenstelling tot gewone programma’s, of bijvoorbeeld Java
(wat totaal niet hetzelfde is als JavaScript), is een script niet gecompliceerd en moet de code
direct door de browser geïnterpreteerd worden. Bijvoorbeeld:
We hebben dit verder niet behandeld tijdens de les. Het is ook niet per se nodig, het maakt
alles gewoon fancier.
JavaScript is deel van HTML en zorgt voor dynamiek van HTML.
Cascading Style Sheets (CSS): CSS wordt gebruikt voor de opmaak van een HTML
document. Gebruik nooit opmaak in HTML zelf, maar koppel de opmaak aan HTML met het
CSS. In het CSS beschrijf je hoe de dingen moeten worden weergegeven,
achtergrondkleuren, lettertype, enz.
Je linkt het CSS aan het HTML met het <link> element, bijvoorbeeld:
- <link rel=”stylesheet” href=”[bestand pad of file naam wanneer in dezelfde directory]”>
Een voorbeeld van een CSS bestand:
,Wanneer je browser de pagina niet update wanneer je een verandering hebt aangebracht in
je style sheet, doe dan shift+refresh!
Zie de bestanden bestand test html.html en test css.css voor voorbeelden.
Iets over architectuur ofzo:
Internet architectuur:
Computers zijn met elkaar verbonden, en communiceren met elkaar via protocollen en
specifieke poorten:
- HTTP: tekst bestanden versturen, HTML-pagina’s
- FTP: bestanden versturen. Bijvoorbeeld enorme datasets
- VOIP: gesproken tekst
Alle mogelijke poorten: 0 tot 65536
De poorten 0 tot 1024 worden gebruikt voor algemene toepassingen. Deze kun je niet
zomaar als programmeur gebruiken.
Firewall: een firewall zorgt voor een selectieve toegang op basis van protocol en/of poorten.
Een machine verwijst altijd naar zichzelf middels het IP adres 127.0.0.1, meestal aangeduid
met localhost.
Basis Flask:
,Er zijn diverse manieren om Python voor het web te gebruiken
Een basaal framework Flask, dat onder andere wordt gebruikt door Pinterest en Linkedln.
Het bevat de basis om met het web te werken.
Achtergrond informatie over Flask kun je vinden in dit gratis Ebook: ExploreFlask
http://ia600506.us.archive.org/17/items/ExploreFlask/ExploreFlask.pdf
Flask is:
- Clean and simple
- Goed gedocumenteerd
- Populair
- Je kunt zelf de componenten samenstellen die je nodig hebt.
Wanneer je met Flak wil werken, is het makkelijk om gebruik te maken van een IDE zoals
PyCharm.
De code die je schrijft, draait niet van top-to-bottom, maar de code wacht op een HTTP
request.
In PyCharm een nieuw Flask bestand aanmaken: File new project Flask ‘title’
create.
- Als het goed is worden meteen de folders Static en Templates aangemaakt. Is dit niet
het geval, dan moet je die nog aanmaken (noem ze exact op die manier).
- In de static folder komen bestanden die niet veranderen, zoals:
o Het CSS
o JavaScript
o Images
- In de templates folder komen bestanden die wel veranderen:
o HTML vanwege Jinja variabelen.
Wanneer je een nieuw Flask project hebt aangemaakt, dan zie je het volgende:
,Er is nog geen HTML aangemaakt. Je kunt deze zelf aanmaken. Om de functie hello_world
dit HTML file te laten gebruiken, moet je render_template() functie gebruiken (die moet je
eerst ook nog importen, zie hierboven):
Je kunt het Flask project vervolgens laten runnen. Onderaan in PyCharm zie je een link
verschijnen:
Klik daar op en je ziet dit:
Let op! Je kunt niet meerdere Flask projecten tegelijk runnen!
,Iets over parameters:
De functies in Flask krijgen request objecten aangereikt. Deze request objecten zijn
raadpleegbaar.
Parameter overdracht over URL’s vindt plaats door een vraagteken achter de filename te
plaatsen, en dat te volgen door de parameter:
- Je hebt de volgende flask code. De naam wordt opgehaald uit de URL. Wanneer niks
is mee gegeven, dan is het een lege variabel (“”).
- In het HTML document geef je aan dat de naam variabele een Jinja variabele is, door
de haakjes {{ }}. Dit houd in dat de naam opgegeven kan worden in de URL.
- Na een ? kun je vervolgens de variabele definen.
, Methods: je hebt verschillende methoden voor Jinja variabelen: POST en GET. GET krijg je
in de URL te zien, POST niet. Je zou POST bijvoorbeeld kunnen gebruiken wanneer je om
een wachtwoord vraagt. De POST methode draagt parameters “onderwater” over van client
naar server.
Zie het bestand Flask Informatica 20-4-2020 voor wat voorbeelden, en over hoe Flask
precies werkt.
Je linkt je CSS in je HTML document in PyCharm door het pad naar het CSS bestand op te
geven: /static/file_name.css. De eerste / moet er bij.
Week 3: Advanced Flask
Hoe de flow zo ongeveer werkt bij jinja variabelen en hoe alles wordt doorgegeven aan
elkaar:
Input wordt getypt in de balk -> submit --> variable wordt doorgegeven aan de URL -->
python gebruikt request.args.get om variable uit de URL te halen --> deze variable wordt
weer doorgegeven aan de template --> deze checkt of het start met ATG met if statemets -->
geeft afhankelijk van de uitkomst verschillende antwoorden
De basis layout van een HTML-document zie er zo uit:
Wanneer je erg veel pagina’s wilt maken, moet je in je HTML-document telkens dezelfde
basis informatie invullen, wat veel tijd kost en onnodig is. Ook kan het zijn dat je wil dat elke
pagina wordt opgemaakt volgens hetzelfde CSS-bestand, maar om in elke HTML-document
te verwijzen naar hetzelfde CSS-file, kost moeite.
Om die dingen te verhelpen, kun je een base.html op stellen, waarvan je andere HTML-
documenten dan inheritten.
