100% tevredenheidsgarantie Direct beschikbaar na je betaling Lees online óf als PDF Geen vaste maandelijkse kosten
logo-home
Eerder door jou gezocht
Eerder door jou gezocht
logo
Samenvatting Informatica Bio-informatica Course 4 HAN Nijmegen €5,99
In winkelwagen
Snel navigeren naar
Voorbeeld
  2.  
  3. Hogeschool Arnhem En Nijmegen (HAN)
  4.  
  5. Informatica

Samenvatting

Samenvatting Informatica Bio-informatica Course 4 HAN Nijmegen
 0 keer verkocht

Samenvatting van de Informatica stof Bio-informatica Course 4 HAN Nijmegen. Samenvatting is van collegejaar 2019/2020. De samenvatting bevat de theorie die deze Course wordt uitgelegd, maar is vooral bedoeld ter ondersteuning. Je leert het programmeren door het zelf te doen en er zelf mee bezig te ...

[Meer zien]
Laatste update van het document: 3 jaar geleden

Voorbeeld 10 van de 29  pagina's

Document informatie

  • 5 september 2021
  • 5 september 2021
  • 29
  • 2019/2020
  • Samenvatting

Onderwerpen

Geschreven voor

Alle documenten voor dit vak (2)

Verkoper

avatar-seller
nicksomsen

Ontvangen beoordelingen

Voorbeeld van de inhoud

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: &quot.
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:”>[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.

Dit zijn jouw voordelen als je samenvattingen koopt bij Stuvia:

Bewezen kwaliteit door reviews

Bewezen kwaliteit door reviews

Studenten hebben al meer dan 850.000 samenvattingen beoordeeld. Zo weet jij zeker dat je de beste keuze maakt!

In een paar klikken geregeld

In een paar klikken geregeld

Geen gedoe — betaal gewoon eenmalig met iDeal, creditcard of je Stuvia-tegoed en je bent klaar. Geen abonnement nodig.

Direct to-the-point

Direct to-the-point

Studenten maken samenvattingen voor studenten. Dat betekent: actuele inhoud waar jij écht wat aan hebt. Geen overbodige details!

Veelgestelde vragen

Wat krijg ik als ik dit document koop?

Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.

Tevredenheidsgarantie: hoe werkt dat?

Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.

Van wie koop ik deze samenvatting?

Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper nicksomsen. Stuvia faciliteert de betaling aan de verkoper.

Zit ik meteen vast aan een abonnement?

Nee, je koopt alleen deze samenvatting voor €5,99. Je zit daarna nergens aan vast.

Is Stuvia te vertrouwen?

4,6 sterren op Google & Trustpilot (+1000 reviews)

Afgelopen 30 dagen zijn er 69411 samenvattingen verkocht

Opgericht in 2010, al 15 jaar dé plek om samenvattingen te kopen

Begin nu gratis
€5,99
  • (0)
In winkelwagen
Toegevoegd