Herzien Van Alles

Datum: juni 2021

─

Naam: Nicole Danje & Ashley Ayala Renteria

Docent: Frank van Schuilenburg
Vak: ICT
Klas: V3A
 1

Voorwoord :
Na onze V3 studie met het vak informatiekunde is het dan echt het einde en sluiten
we alles wat we meegemaakt hebben met dit vak af met dit verslag.
Wij zijn de auteurs van dit verslag wij Ashley en Nicole zullen u met dit verslag een
korte samenvatting geven over het leerstof en wat we meegemaakt hebben dit jaar
met het vak informatiekunde. Met dit verslag krijg u meer kennis over de leerstof die
gegeven wordt in het jaarlag V3 van Colegio Arubano.
 2

Inhoudsopgave:
........................................................................................................................................0
Voorwoord :....................................................................................................................1
Inleiding:.........................................................................................................................3
Hoofdstuk 1: HTML & CSS.............................................................................................4
1.1 HTML:...................................................................................................................4
1.2 CSS:........................................................................................................................
Hoofdstuk 2: Formulieren...............................................................................................6
2.1 Formulier deel 1:...................................................................................................6
2.2 Formulier deel 2:.....................................................................................................
Hoofdstuk 3: PHP en Normaliseren.................................................................................
3.1 phpMyAdmin:..........................................................................................................
3.2 Het verschil tussen DDL en DML:...........................................................................
3.3 Normaliseren:..........................................................................................................
3.4 PHP afhandeling van formulieren:..........................................................................
Conclusie:.........................................................................................................................
Nawoord:..........................................................................................................................
Referentielijst:...................................................................................................................
Bijlage:..............................................................................................................................
Logboek:........................................................................................................................
 3

Inleiding:
Dit verslag is gemaakt met de bedoeling om de leerstof van een heel schooljaar te
herzien. Hierin komt er een basisuitleg over hoe iemand op een efficiëntere manier
kunt leren werken met programmeertalen als HTML, CSS en PHP. Dit verslag dient
met name om u de lezer uit te leggen en te laten zien wat wij geleerd hebben, wat
wij gedaan hebben en hoe we het ontwikkeld hebben. Hiermee tonen we aan dat we
hebben begrijpt hoe je met deze programmeertalen moet werken op.
 4

Hoofdstuk 1: HTML & CSS

1.1 HTML:
Wat staat HTML eigenlijk voor? HTML staat voor HyperText is de standaard
opmaaktaal voor documenten die zijn ontworpen om in een webbrowser te worden
weergegeven. Het kan worden ondersteund door technologieën zoals Cascading
Style Sheets (CSS) en scripttalen zoals JavaScript (BRON1). Iedere website op
internet bestaat uit webpagina's die gemaakt zijn met HTML. HTML kan dan ook
beschouwd worden als onmisbaar bij het maken van websites (BRON2). Met het
enteren van 2 simpele toetsen CTRL+U is dit weergegeven. Webbrowsers
ontvangen HTML-documenten van een webserver of van lokale opslag en zetten de
documenten om in multimedia webpagina's. HTML beschrijft de structuur van een
webpagina semantisch en bevatte oorspronkelijk aanwijzingen voor het uiterlijk van
het document. HTML-elementen vormen de basis van HTML-pagina's. Afbeeldingen
en andere objecten, zoals interactieve formulieren, kunnen worden ingesloten in de
weergegeven pagina met behulp van HTML-structuren. Met HTML kunnen
gestructureerde documenten worden gemaakt door structurele semantiek uit te
drukken voor tekstelementen zoals kopteksten, alinea's, lijsten, koppelingen, citaten
en andere functies. Tags, die tussen punthaken zijn geschreven, worden gebruikt
om HTML-elementen te onderscheiden. Een hyperlink kan worden gezien als een
interface die een bron aan een doel koppelt. Als de gebruiker op de hyperlink bij de
bron klikt, navigeert de gebruiker naar het doel. Hyperlinks kunnen elk van de
volgende verschijningsvormen aannemen (BRON3):
● Tekst
● Afbeeldingen
● URL's
● Bediening (bijvoorbeeld een knop)
● Ankertekst is een type hyperlink dat wordt weergegeven door platte tekst
Na het opmaken van een HTML-pagina, ofwel alle elementen op hun plek zetten,
kunnen we er vervolgens voor kiezen om de vormgeving van de diverse elementen
aan onze wensen aan te gaan passen. Gebruik deze video voor meer gedetailleerde
uitleg (BRON4). En dat is waar we CSS (1.2) voor gebruiken.
 5

1.2 CSS:
CSS staat voor Cascading Style Sheet en hiermee is het mogelijk om een site te
customizen. CSS is een code-pagina waarmee een website kan worden gestyled.
Het customizen van webpagina’s gebeurt door codes te gebruiken(BRON5).
Gebruik deze video voor meer gedetailleerde uitleg (BRON6). Codes hebben
eigenlijk altijd dezelfde opbouw. Namelijk: {code : opmaak;}. Het belangrijkste zijn de
haakjes en de puntkomma. Dit geeft namelijk aan dat het code klaar is. Aan de basis
van elke pagina op een website zit een HTML bestand, dat zorgt voor alle inhoud die
zichtbaar is.
Css kan op drie manieren worden toegepast.
1. Eerste manier is om in de openingstag van een html-element de code style=""
neerzetten.
2. Tweede manier is om in de head van de pagina een stijlblok neerzetten.
3. Ten slotte is het ook mogelijk om de stijlkenmerken van een html-element ook nog
vastleggen in een extern stijlblad (externe stylesheet).
Van deze drie toepassingen is de meest efficiënte manier om de stijlkenmerken van
een html-element vastleggen in een extern stijlblad. (BRON7).
 6

Hoofdstuk 2: Formulieren
2.1 Formulier deel 1:
Elke keer dat een gebruiker zich aanmeldt voor een nieuw abonnement, gebruikt de
gebruiker zonder zich te beseffen dus, onbedoeld een formulier. Het maken van een
formulier is niet zo moeilijk, het is best simple.In een paar stappen kan iemand zijn
eigen login formulier maken. Voor meer informatie over het maken van een formulier
volg de stappen in deze video (BRON8). Maar wat is een formulier?
Een HTML-formulier is een formulier om gegevens in te vullen dat opgenomen is in
een webpagina en dat door middel van HTML is gecodeerd. Een formulier wordt in
een PHP bestand gemaakt maar gebruikt HTML codes. De belangrijkste elementen
bij het maken van formulieren zijn FORM, INPUT, SELECT, OPTION en
TEXTAREA.
Het FORM element definieert het begin en einde van een formulier. Met de attributen
METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier
verzonden moet worden en waarheen. Het action attribuut bevat de naam van de
pagina waar het formulier zijn gegevens heen stuurt. Het method attribuut heeft twee
mogelijke waarden: get en post. In de <input> tag komen er drie attributen, namelijk:
type, name en een id. Het SELECT element wordt in combinatie met het OPTION
element gebruikt om een uitschuifkeuzelijst (menu met enkelvoudige keuze) of een
meervoudige keuzelijst te maken in een formulier. (BRON9).
 7

2.2 Formulier deel 2:

De meeste HTML-formulieren hebben een verzendknop onderaan het formulier.
Zodra alle velden in het formulier zijn ingevuld, klikt de gebruiker op de verzendknop
om de formuliergegevens vast te leggen. Het standaardgedrag is om alle gegevens
die in het formulier zijn ingevuld te verzamelen en naar een ander programma te
sturen om te worden verwerkt.Het method attribuut heeft twee mogelijke waarden:
get en post. In het geval van GET worden de ingevulde waarden meegezonden in de
URL. Bij de POST methode worden de variabelen onzichtbaar naar de andere
pagina verzonden (BRON10).
Webbrowsers communiceren met webservers via HTTP. Wat is HTTP? Het
Hypertext Transfer Protocol is een toepassingsprotocol voor gedistribueerde,
collaboratieve, hypermedia-informatiesystemen waarmee gebruikers gegevens op
het World Wide Web kunnen communiceren. Wanneer een gebruiker op een link op
een webpagina klikt, een formulier indient of een zoekopdracht uitvoert, wordt een
HTTP-verzoek verzonden van de browser van de gebruiker naar de doelserver.
Het verzoek omvat:
● Een URL die de getroffen bron identificeren
● Een methode die de vereiste actie definieert (GET, POST)
Webservers wachten tot de gebruikers berichten opvragen, verwerken deze
wanneer deze binnenkomen en antwoorden op de webbrowser met een HTTP-
antwoordbericht. Het antwoord bevat een statusregel die aangeeft of het verzoek is
gelukt of niet is gelukt.
De hoofdtekst van een succesvol antwoord op een verzoek zou de gevraagde bron
bevatten die vervolgens door de webbrowser zou kunnen worden weergegeven.
(BRON11). Onderstaande afbeelding illustreert dit proces:

Waarom is PHP nodig en kan een formulier niet werken zonder het. Wel data
verzenden kan alleen met een server side scripttaal, zoals php. Met HTML alleen
kan dat niet. Waarom zou een formulier zonder PHP niet werken? Wel, data
verzenden kan allen met een serverside scripttaal, zoals PHP. Met HTML alleen kan
dat niet. Het fouten opsporen van een formulier met PHP gebeurt via een code die
wordt beter uitgelegd in de volgende video(BRON12).
 8

Hoofdstuk 3: PHP en Normaliseren

3.1 phpMyAdmin:
Wat is phpMyAdmin precies?
Het phpMyAdmin-programma is een webapplicatie waarmee MySQL-
informatiebanken via een programma worden overzien en begeleid. Naast andere
dingen kan het programma databases maken en wissen; tabellen maken, wissen en
wijzigen; informatievelden maken, verwijderen en aanpassen; SQL-commando’s
maken. (BRON13).
Verschillende aspecten van phpMyAdmin:
A) Er kunnen nieuwe databases gemaakt worden.
B) SQL die uit verschillende commando's bestaat.
C) Tabellen maken
D) Exporteren en importeren van php codes.
Doel van Export: Het uitvoeren van bepaalde files die in een database zijn gemaakt.
Doel van import: Het invoeren van een externe file.
Het maken van een database: Eerst maakt een nieuwe database daarna geef de
database een naam. Maak een nieuwe tabel voor deze database. Vul de tabel in met
gegevens. In de volgende video wordt er uitgelegd wat een database is en hoe
iemand een database kan maken (BRON14).
 9

3.2 Het verschil tussen DDL en DML:

DDL is Data Definition Language die wordt gebruikt om datastructuren te definiëren.
Bijvoorbeeld: tabel aanmaken, tabel wijzigen zijn instructies in SQL. DML is Data
Manipulation Language een taal voor gegevens manipulatie die wordt gebruikt om
gegevens zelf te manipuleren. Bijvoorbeeld: insert, update, delete zijn instructies in
SQL (BRON15).
Het fundamentele verschil tussen DDL en DML is dat DDL wordt gebruikt om de
databasestructuur van het databaseschema te specificeren. Aan de andere kant
wordt DML gebruikt om de gegevens uit de database te openen, te wijzigen of op te
halen. (BRON16).
 10

3.3 Normaliseren:
Databasenormalisatie is een techniek bij het ontwerpen van databases. Ze dient
twee doelen: het spaarzaam omgaan met opslagruimte en het vermijden van data
die herhaald wordt en tot grote fouten kan leiden. Er zijn 5 stappen in het
normaliseren, maar meestal worden alleen de eerste 3 uitgevoerd.

Zo ziet er een nieuwe database uit:

De eerste regel bestaat uit drie deel stappen:

A. Herhalende groepen gegevens in aparte tabellen onderbrengen en voorzien van
een primaire sleutel.
(Dus wat er eigenlijk gedaan wordt is het wegwerken van wat herhaald is zodat er
later geen problemen onstaan.)
B. Proces gegevens verwijderen uit de tabel.
( Het verwijderen van gegevens dat berekend moeten worden dat niet nodig zijn.)
C. Samengestelde gegevens splitsen in aparte atomaire gegevens.
(Informatie zo klein mogelijk splitsen zodat er uiteindelijk specifieke gegevens
kunnen worden gehaald.)
2. Kolommen afhankelijk maken van de gehele primaire sleutel.
3. Kolommen onafhankelijk van elkaar maken en alleen afhankelijk van de
primaire sleutel (BRON17). Een voorbeeld van het uitvoeren van deze stappen kan
gezien worden in de volgende video (BRON18).
 11

3.4 PHP afhandeling van formulieren:

Stel voor dat een gebruiker zich inschrijft voor een nieuwe Netflix account dat
gebeurt via een formulier. De invulling van een Netflix formulier gaat als volgt:
 De gebruiker vult zijn e-mail en passwoord in.
 De gebruiker vult daarna zijn kredietkaart gegevens.
Eerst wordt er een verbinding met de MySQL server gemaakt. Hierbij maken we
gebruik van de PHP Data Object extensie. Deze PHP extensie maakt het mogelijk
om vanuit ons PHP script met de database communiceren. Wanneer de gebruiker
op de submit knop klikt worden zijn gegevens naar een database gestuurd. Een
database wordt opgeslagen als een bestand of een set bestanden. De informatie in
deze bestanden kan worden onderverdeeld in records die elk uit een of meer velden
bestaan. Velden zijn de basiseenheden voor gegevensopslag en elk veld bevat
typisch informatie die betrekking heeft op één aspect of kenmerk van de entiteit die
door de database wordt beschreven. Records zijn ook georganiseerd in tabellen die
informatie bevatten over relaties tussen de verschillende velden (BRON19). De
volgende video uitlegd hoe een DATABASE werkt (BRON20).
 12

Conclusie:
Kortom HTML en PHP worden gebruikt in ons dagelijks browsen. Door zich aan te
melden gebruiken gebruikers PHP & HTML. Deze termen lijken misschien erg
ingewikkeld, maar met de juiste leraar en de juiste motivatie. De enige limiet voor het
gebruik van deze codes is de limiet die de gebruiker zelf plaats. Leren werken met
PHP en HTML kost tijd en geduld. Ook de juiste mentale toestand en creativiteit. Dit
moet gezien worden als een hobby, niet als een verplichting.

Nawoord:
Het was een zeer unieke ervaring die veel tijd in beslag nam van ons schema en ook
onze tijd kostte om te leren voor andere vakken. Maar niet alles was zo slecht
aangezien we ons ook enkele dingen uit het eerste trimester konden herinneren die
goed zijn om te weten.
Het zal ons een genoegen zijn u, de lezer van dit verslag, alles te kunnen vertellen
wat er door ons hoofd ging tijdens het schrijven van dit schoolverslag. Pas tijdens
het schrijven van dit verslag kwamen er een aantal dingen naar voren die tot een
veranderde opvatting leiden over ons mening van programmeertalen . Bijvoorbeeld
op hun meest fundamentele niveau zijn deze talen allemaal hetzelfde. Maar aan de
oppervlakte waar mensen met hen omgaan, variëren ze enorm. Zonder te vergeten
dat ze de gemakkelijkste manier zijn om een probleem op te lossen.
 13

Referentielijst:

 Bron 1: HTML - Wikipedia

 Bron 2: http://www.webwijsheid.nl/website-maken/wat-is-html.htm
 Bron 3: https://www.techopedia.com/definition/5175/hyperlink
 Bron 4: https://youtu.be/u0OeZfIfBRI
 Bron 5: https://www.w3schools.com/css/css_intro.asp
 Bron 6: https://youtu.be/qAqP5y_eSB4
 Bron 7: https://www.mijn-eigen-website.nl/website-layout.php
 Bron 8: https://youtu.be/NXAHkqiIepc
 Bron 9: http://www.2john.com/html/formul.htm
 Bron 10: https://nl.sawakinome.com/articles/programming/difference-between-
get-and-post-method-in-php.html
 Bron 11: https://developer.mozilla.org/en-US/docs/Learn/Server-
side/First_steps/Introduction
 Bron 12: https://youtu.be/firSTs1bEEY
 Bron 13: https://nl.m.wikipedia.org/wiki/PhpMyAdmin
 Bron 14: https://youtu.be/u10xZgNpfCQ
 Bron 15: https://youtu.be/lpDNfMLK6Ng
 Bron 16: https://www.tutorialspoint.com/difference-between-ddl-and-dml-in-dbms
 Bron 17: https://docplayer.nl/106988990-Normaliseren-er-zijn-5-stappen-in-het-
normaliseren-maar-meestal-worden-alleen-de-eerste-3-uitgevoerd.html
 Bron 18: https://youtu.be/8wCfaxoj0e4
 Bron 19: https://www.britannica.com/technology/database
 Bron 20: https://youtu.be/FR4QIeZaPeM
 14

Bijlage:
Logboek:
Datum: Waar: Wat:
6 Juni 2021, 11:00-14:00 Thuis via een google meet In deze periode hebben we
gewerkt aan het voorblad,
de inhoudsopgave, het
voorwoord en de inleiding.
En we hebben het eerste
hoofdstuk tussen ons
tweeën verdeeld om
efficiënter te werken. We
zochten informatie op
internet om ons te helpen
met het eerste hoofdstuk.

6 Juni 2021, 14:30- 16:00 Thuis via een google meet We verdeelden het tweede
hoofdstuk tussen de twee
en zochten informatie op
het web. We gingen ook
terug en controleerden
onze aantekeningen om
direct te antwoorden op de
gestelde vragen.

6 Juni 2021, 16:00-18:00 Thuis via een google meet We begonnen en eindigden
met hoofdstuk 3. Daarna
deden we de conclusie, het
nawoord, de referentielijst
en het logboek.

9 juni 2021, 09:45-10:10 In de klas Het afronden van

hoofdstuk 3.4 en 2.2
We hebben info op de web
gezoekt.

14 juni 2021, 21:00-23:00 Thuis via een google meet we hebben wat laatste
details afgerond die
bestonden uit het
controleren van onze
bronnen, en we hebben
dubbel gecontroleerd of
elke vraag was beantwoord