Prep Hard Win Easy

Category: Uncategorized (page 1 of 3)

Bootstrap: snel ontwikkelen met een CSS Library

Hier wordt uitgebreid kennis gemaakt met Bootstrap. Dit doen we op op een manier, die goed bij developers past. Je zult zien dat we al een hele opmaak responsive kunnen realiseren zonder ook maar 1 regel CSS te schrijven.

  • We kiezen ervoor om met npm en de Command Line tool te werken;
  • We gebruiken de CLI ook om het werk op GitHub te plaatsen;
  • Bootstrap wordt pas op het eind met Sass aangepast.

Leerdoelen

  • kennismaken met Bootstrap:
    • installatie;
    • documentatie;
    • lay-out: opmaken van responsive kolommen;
    • enkele componenten:
      • navigatiebalk;
      • jumbotron;
      • modale vensters;
      • cards
  • voor- en nadelen van Bootstrap kennen;
  • werken met npm;
  • werken met CLI voor GitHub;
  • werken met Sass om Bootstrap aan te passen/af te slanken.

Opdracht

Instructievideo (00:01:45)

  1. Download van https://github.com/Theo-denBlanken/LOTR het startdocument of maak een vergelijkbare pagina.
  2. Volg eerst onderstaande instructievideos om het resultaat te krijgen zoals in de video hiernaast.
  3. Voeg daarna een eigen component van Bootstrap toe!
  4. Ga vervolgens Bootstrap aanpassen aan het onderwerp Lord of the Rings.

Site met Bootstrap 1: Bootstrap koppelen aan het document

Instructievideo (00:09:31)

Uitgaande van een document op https://github.com/Theo-denBlanken/LOTR gaan we Bootstrap installeren. Als Node.js is geïnstalleerd kan dat via npm. (Anders zijn er nog verschillende andere manieren zoals rechtstreekse downloads en CDN.) Voor npm starten we de Terminal (windows: command prompt) en navigeren met cd naar de projectmap.
Met npm init initialiseren we node package manager. Daarvoor worden er een aantal vragen beantwoord. Als we ook een repository van ons project op GitHub willen, kunnen we de url daarvan ook opgeven. Mocht je hier een fout maken, dan kun je hem in de editor nog herstellen.
Hierna geven we met npm install bootstrap voor de Bootstrap installatie. Hierna blijkt een map node_modules te zijn aangemaakt alsook package-lock.json en is package.json te zijn aangevuld met de bootstrap dependency.

We kunnen bootstrap.css of een minified versie daarvan koppelen aan ons document een test van het document laat zien dat er een ander font is, en de knoppen en input hebben al een andere vorm.

Site met Bootstrap 2: responsive grid van Bootstrap

Instructievideo (00:10:11)

Alle lay-out met Bootstrap begint met de content in een element (vaak een div) te plaatsen. Bootstrap noemt dit de container-div en hij krijgt dan ook de class container of de class container-fluid mee. Het element krijgt daarmee wat padding.
Wil je kolommen naast elkaar zetten, dan omvat je ze eerst met een div met de class row.
Vervolgens geef je de elementen zelf de class col.
Bootstrap heeft een 12-koloms grid. Het is daarmee goed deelbaar door 2, 3 en 4. Je vertelt van elke kolom hoeveel delen van die 12 hij gaat omspannen. Dus als er 2 kolommen naast elkaar moeten, geef je ze allebei de class col-6.
In onze pagina willen we bij kleine viewports 2 kolommen en met grote viewports 4 kolommen.
We gaan de class van de kolommen dus extra informatie geven. Voor kleine viewports wordt col-6 uitgebreid naar col-sm-6. Daarmee geldt de dit dus voor kleine viewports.
Door de class uit te breiden naar col-sm-6 col-md-3 voeg je dus en breakpoint toe voor gemiddelde viewports waarbij er dan 4 kolommen naast elkaar kunnen.
Documentatie: https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match.

Site met Bootstrap 3: padding in Bootstrap

Instructievideo (00:02:41)

Om wat meer ruimte tussen de inhoud van de sections te maken geven we met de class p-4 extra padding aan die sections.
Om aan de randen ook diezelfde ruimte te hebben, geven we het row-element ook die padding.

Site met Bootstrap 4: Jumbotron

Instructievideo (00:02:29)

Om de header meer te benadrukken, geven hem de class jumbotron mee.
Documentatie: https://getbootstrap.com/docs/4.3/components/jumbotron/
Daarbinnen weer een container-fluid om gelijke afstand tot de rand te maken als de elementen daaronder.
Met de display-4 class kan een kop 1 nog groter en lichter worden (https://getbootstrap.com/docs/4.3/content/typography/).
De eerste paragraaf wordt iets groter met de class lead.

Site met Bootstrap 5: navigatiebalk

Instructievideo (00:11:54)

Een andere component van Bootstrap is de navbar: de navigatiebalk. Documentatie: https://getbootstrap.com/docs/4.3/components/navbar/

Deze bestaat uit een dusdanig aantal elementen met classes, dat het praktischer is deze in zijn geheel te kopiëren en de links daarin te vervangen door je eigen linkjes.
Een deel daarvan zijn interne links naar delen van de pagina.
Met enkele classes kan het ook een andere kleurschema krijgen: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes.
Voor de dropdown en de menu-toggle is JavaScript nodig. Deze wordt gekoppeld vanuit de node_modules-map.
Het script blijkt echter afhankelijk van jQuery. Via npm install jquery wordt deze gedownload, en moet het worden gekoppeld vóór het script van Bootstrap.

Site (met Bootstrap): Git met CLI

Instructievideo (00:10:15)

Nu we toch met de commandline werken, kunnen we met de instructies op GitHub ons werk in een repository plaatsen en updaten.

We kunnen lokaal ons README.md maken en ook een .gitignore-bestand.
Dit laatste bestand geeft de bestanden aan, die niet meegenomen moeten worden als we alles online plaatsen. Normaliter hoort daar de node_modules map bij, maar dan moeten de JavaScript bestanden ook naar 1 bestand gecompileerd worden en dat gebeurt in deze training nog niet. In onze .gitignore komt een verborgen bestand te staan die gemaakt en gebruikt wordt door de Finder van MacOS: .DS_Store

Windows- gebruikers zouden de eerste 5 regels kunnen nemen die staat op: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore

Git zou op je systeem geïnstalleerd moeten staan, controleer met git --version of dit het geval is, anders naar https://git-scm.com/downloads Na deze voorbereidingen git initialiseren met git init. Dit staat ook op de instructie van jouw repo.
Er is een verborgen map .git gemaakt en deze zal niet meegenomen worden naar GitHub.
De README.md hoeft niet aangemaakt, met de editor kun je hem wellicht aanpassen.
Voor beginners is het niet handig dit met CLI te doen.
Vervolgens de mee te nemen bestanden voor de commit op de stage plaatsen.
Dit kan met git add -A. Alle bestanden die niet in de .gitignore en .git staan, worden toegevoegd.
Met git status, kun je nog zien welke dat zijn.
De commit is een punt die in het versiebeheersysteem van Git een punt markeert met de toestand van de bestanden. Je geeft er dus een opmerking bij:
git commit -m "de opmerking" Met git remote maak je Git duidelijk dat je jouw lokale repository verbind met die van bijvoorbeeld GitHub:
git remote add origin https://github.com/Theo-denBlanken/demoLOTR.git
Soms moet hier natuurlijk ook het wachtwoord worden toegevoegd.
Hierna kan de commit worden gepusht: git push -u origin master. Mijn systeem vraagt mijn beheerderswachtwoord van mijn Mac nog bij. Dit is voor de eerste keer een flinke klus geweest, maar de volgende wijzigingen gaan dan een stuk eenvoudiger.

In dit voorbeeld wijzigen we README.md en voegen .gitignore toe. (in deze video wordt deze pas na de eerste commit gemaakt.)
Nu is alleen git add -A nodig: deze zet alleen de gewijzigde bestanden op de stage.
Daarna git commit -m "vermeld wat gewijzigd is" en
git push -u origin master.
Met de pijltjes toets ‘naar boven’ zijn deze opdrachten dan vliegensvlug te geven.

Site met Bootstrap 6: een modaal in Bootstrap

Instructievideo (00:15:27)

Bootstrap heeft ook een modaalcomponent.
De instructie op
https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content laat weer veel mark-up zien. Als je die kopieert en invoegt, kun je de inhoud in de div met de class modal-body plaatsen. De titel in het h5 element aanpassen evenals de inhoud van de knoppen.
Dat zou bij 1 modaal op de pagina volstaan, maar bij meerdere modalen ontstaan er zo ook meerdere id’s. Deze moet je dus toesnijden op de inhoud en de verwijzingen van de knop naar de inhoud moet ook worden aangepast.

Valideer je mark-up. Op deze manier is naar boven gekomen dat de titel van het modaal ook een id heeft, die per modaal ook echt uniek gemaakt dient te worden.


Site met Bootstrap 7: drie secties naast elkaar

Instructievideo (00:04:29)

Een herhaling van een eerdere handeling: er is een omvattend element met de class container-fluid nodig en daarin een div met de class row. De afbeeldingen moeten kleiner blijven dan de breedte van de kolommen en dat kan met de class img-fluid. De sections daarbinnen krijgen een class col-md-6 col-md-4 zodat ze bij kleine viewports met zijn tweeën naast elkaar staan en bij bredere viewports met zijn drieën.

Naar keuze kan de derde section een class col col-md-4, zodat hij bij de kleine viewport niet smal wordt en een lege ruimte naast zich laat, maar als enige de hele breedte neemt.

Instructievideo (00:06:05)

We geven de footer hier een achtergrondkleur en gaan de inhoud in lijn met de rest van de pagina brengen.
De we zorgen dat er weer 2 elementen zijn met de class container-fluid en row in elkaar zitten met elk een p-4 class.
De achtergrond kan met bg-primary. Dit geven we de nav-bar ook. Ook als zijn deze kleuren nog niet optimaal, verderop gaan we die kleur naar onze smaak omzetten.
De kleur van de tekst gaat met text-white, en voor linkjes moet je dat apart als class aan de link meegeven.
Rechts uitlijnen gaat met text-right.

Site met Bootstrap 9: knoppen op dezelfde hoogte

Instructievideo (00:09:47)

Als je de knoppen, die onderaan in de kolommen staan, op dezelfde hoogte willen hebben, merken we het gemis van CSS Grid of Flexbox.
Het wordt hier daarom met een JavaScript opgelost met matchHeight.js:
http://brm.io/jquery-match-height/ en
https://github.com/liabru/jquery-match-height
Met npm install jquery-match-height wordt de jQuery-plugin geïnstalleerd.
Koppel het script na de koppeling van jQuery.

Daarna kan een eigen scriptje de betrokken elementen selecteren en gelijk maken aan de langste uit de selectie: $('#inleiding p').matchHeight(); selecteert alle paragrafen in de div met de id inleiding en maakt ze even hoog.
Als er meerdere paragrafen in een kolom voorkomen, moeten ze in een gemeenschappelijke parent gestopt worden, die dan geselecteerd kan worden.
Voor de eenheid de overige knoppen allemaal ook de class btn btn-primary meegeven.

Site met Bootstrap 10: GitHub bijwerken

Instructievideo (00:02:28)

Het is weer een mooi moment om GitHub bij te werken.
Merk op dat we tot nu toe niet 1 regel CSS geschreven hebben!!
De volgende 3 opdrachten volstaan:

git add -A
git commit -m “gelijke hoogten gemaakt”
git push -u origin master

Met de pijltjes-omhoog toets zijn ze praktisch op te roepen.
In de video laat ik ook git status zien om te laten zien wat er gebeurd. Je hoeft de GitHub site niet eens te openen, we doen het hier ter demonstratie van het wonder.

Site met Bootstrap 11: Card component

Instructievideo (00:06:15)

Een van de kolommen kan een card-component worden.
Voor de semantiek wordt de huidige section een div en wordt de zichtbare inhoud (exclusief de modaal omdat dit makkelijker werken is) de section. Deze krijgt de class card mee.
Als de kop de class card-header krijgt, de afbeelding de class card-img-top, de inhoud de class card-body en de div om de button de class card-footer. Dan heb je een mooie card gerealiseerd. Geef de footer dan ook nog de class text-center om de knop gecentreerd te krijgen.

Site met Bootstrap 12: Eigen css genereren

Instructievideo (00:16:55)

Er wordt nu nog gebruik gemaakt van de css van bootstrap.css, die meer dan 10.000 regels telt.
We gaan onze eigen css genereren en maken daarvoor een eigen scss-bestand en een eigen css-bestand.
Het scss-bestand importeert de noodzakelijke scss-bestanden uit de node_modules.
Er wordt dus NIET in de node_modules-map gewerkt!
De documentatie van Bootstrap vertelt welke scss-bestanden vereist zijn, voordat je zelf de noodzakelijke eruit pikt:
https://getbootstrap.com/docs/4.3/getting-started/theming/ Vereist: functions, variables, mixins.
Je begint al resultaat te krijgen na reboot, type, images en grid.
Voor de hele LOTR hebben we nodig: dropdown, transitions, navbar, buttons, jumbotorn, class, modal en card en de volgende utilities: text, spacing, background en screenreaders.

Deze exercitie levert een eigen CSS-bestand op van een kleine 5,5-duizend regels. Bijna een halvering van bootstrap.css!!

Site met Bootstrap 13: Bootstrap aanpassen

Instructievideo (00:16:55)

Nu je je eigen Bootstrap hebt, kun je ook de variabelen aanpassen.
Bootstrap maakt gebruik van de !default eigenschap van Sass. Dit betekent dat als er nog geen waarde aan een eigenschap is toegekend, deze de default-waarde krijgt.
Voorbeeld: $primaire-kleur: #123456; !default
Wil je echter dat de primaire kleur rood is, dan wijzig je dus niet de bovenstaande regel. Immers: deze staat in de node_modules-map en daarin wijzig je niets.
Je zet hem in een eigen SCSS-bestand- of document, die gecompileerd wordt voordat de bestanden in de node_modules gecompileerd worden. Daarmee zorg je er dus voor dat de $primaire-kleur rood is gezet en Sass zal dan de default-instelling overslaan.

Daaronder kun je natuurlijk fonts importeren, achtergrondafbeeldingen instellen en zo meer. Je maakt zo je eigen Bootstrap-versie!
Moet er een tekstkleur worden aangepast, probeer dan dat eerst via classes in je markup te doen.

Bonusopdracht

Je kunt op 3 manieren de bonus bemachtigen:

  1. Maak de opdracht met een andere CSS library zoals Foundation;
  2. Programmeer je eigen JS scriptje, die de kolommen even hoog maakt.
  3. Voeg zelf een Bootstrap component op zinvolle wijze toe.
  • Valideer jouw pagina’s op Markup Validation Service van W3C.
  • De validatie icoontjes plaats je in de footer.
  • Maak in jouw GitHub-repo een README.md met daarin tenminste een link naar jouw online uitwerking.
  • Stuur de GitHub-link naar mij.

Met dank aan Theo!

1     Gegevens en betrouwbaarheid

Wat moet je kunnen?

  • Gegevensgerelateerde begrippen zoals ‘entiteit’ en attribuut kunnen definiëren
  • Opslaggerelateerde begrippen zoals ‘veld’, ‘record”, ‘tabel’ en sleutel kunnen definiëren
  • De vier basisbewerkingen kunnen opnoemen die op opgeslagen gegevens kunnen worden uitgevoerd.
  • Kunnen beschrijven waarvoor een index wordt gebruikt
  • De begrippen redundantie en consistentie kunnen verklaren.
  • Het principe van een database kunnen uitleggen.
  • Normalisatiestappen kunnen toepassen.

1.1  Gegevens en informatie

Computers zijn niet meer weg te denken uit onze maatschappij. Ze nemen een steeds belangrijker plaats in. Wij kunnen onder andere met de computer spelletjes spelen, e-mailen, internetten, werkstukken maken met behulp van Word, multimediapresentaties maken…

Bedrijven en instellingen kunnen zonder computers niet meer functioneren. Alle gegevens voor de bedrijfsvoering wordt opgeslagen op computer (klantgegevens, productgegevens, bestellingen,…).

De begrippen gegevens en informatie worden nogal eens door elkaar gehaald. We geven enkele voorbeelden van gegevens:

Jan Jansen

8,9,5,7

We noemen dit gegevens of data. De betekenis van deze gegevens is dat Jan Jansen een leerling is die voor het vak informatica respectievelijk 8, 9, 5 en 7 op 10 haalde voor testen.

Als we het gemiddelde berekenen van de 4 behaalde testen dan is dit gemiddelde 7,25. Dit gemiddelde noemen we informatie die we halen uit gegevens.

Informatie is dus het resultaat van gegevens die verwerkt zijn.

1.2  Integriteit

Gegevens in computersystemen moeten zo worden opgeslagen dat ze eenvoudig zijn op te vragen en dat ze eenvoudig kunnen gemuteerd worden. Onder muteren verstaan we toevoegen, verwijderen en wijzigen van gegevens.

De opgeslagen gegevens mogen geen fouten of onduidelijkheden bevatten. We noemen dit de integriteit van het computersysteem. Hiermee bedoelen we dat de gegevens van in het computersysteem een juiste weergave moeten zijn van de werkelijkheid. Bijvoorbeeld als de computer toont dat het banksaldo 120 euro in het rood is, terwijl het zwart moet zijn, is er duidelijk iets mis. Het computersysteem geeft dan niet de werkelijkheid weer, de integriteit van het computersysteem voldoet niet.

1.3  Gegevensgerelateerde begrippen

Aangezien een school gegevens nodig heeft van de studenten, hebben we een verzameling van feiten nodig over deze studenten. Onderstaande figuur geeft een deel van de verzameling weer.

Studentnummer Naam Voornaam Geboortejaar
10025 Vanopstal Erik 1985
10026 Peters Jan 1986
10027 Martens Ronny 1984
10028 Vankerkhove Tom 1985

Deze verzameling geeft een overzicht van de studenten weer. Student is dus het ding, het onderwerp van deze verzameling dat we willen volgen. Dat specifieke ding wordt entiteit genoemd. We spreken over de entiteit student.

Een attribuut is een eigenschap of een kenmerk van een entiteit. Studentnummer, naam, voornaam en geboortejaar zijn allen attributen van de entiteit student.

1.4  Opslaggerelateerde begrippen

Met de structuur van de bovenstaande figuur kunnen we nu enkele standaardbegrippen definiëren. Elke rij in bovenstaande figuur beschri jft één enkele entiteit. Elke rij in zo’n structuur heet een record. De kolommen die de verschillende attributen voorstellen worden ook velden genoemd. De hele structuur noemen we een tabel.

Het veld studentnummer is verschillend van de andere velden in die mate dat dit veld steeds een verschillende waarde bevat. Elke student zal een uniek studentnummer hebben. We kunnen het studentnummer dus gebruiken om verschillende studenten uit elkaar te houden. Het veld studentnummer kan dus worden beschouwd als het sleutelveld of kortweg sleutel van de tabel.

1.5  De vier basisbewerkingen

Op gegevens die opgeslagen zijn zoals in een tabel, kunnen we vier basisbewerkingen doen. Elk van deze bewerkingen wordt steeds op één record tegelijk toegepast. Deze vier basisbewerkingen zijn:

  • Ophalen en lezen: het kijken naar de inhoud van een record zonder de inhoud ervan te

  • Invoegen: het toevoegen vaan een nieuwe student in de tabel.

  • Verwijderen: wanneer een student de school verlaat kan hij uit de tabel verwijderd

  • Bewerken: wanneer gegevens van de student gewijzigd moeten worden.

1.6  Bestandsorganisatie

1.6.1  Het doel: een record vinden

Veronderstel dat je één record nodig hebt en dat je de waarde van zijn sleutel kent. De vraag is dan, hoe weet de harddisk waar het record op de schijf staat. We moeten voorkomen dat de hele tabel moet ingelezen worden totdat we aan het bewuste record komen. Dit brengt ons bij de bestandsorganisatie, de manier hoe we gegevens opslaan om ze later terug te kunnen ophalen. Vanuit de bestandsorganisatie bezien, kunnen we een index gebruiken om directe toegang te verwezenlijken.

1.6.2  De index

De index is een hulpmiddel dat gebruikt wordt door een tabel om de directe toegang tot gegevens te verbeteren. We kunnen een index vergelijken met deze van een boek. Achteraan in een boek staat een alfabetische lijst van onderwerpen met daarachter een paginanummer. Bij de index van een tabel gaat het precies zo. Er wordt een gerangschikte lijst gemaakt, waarbij ieder item in de lijst een ‘pointer’ bevat. Deze ‘pointer’ verwijst naar het specifieke record, zoals het paginanummer ook een verwijzing is.

1.7  Het databasemanagementsysteem

1.7.1  Het probleem toen er geen databases bestonden

Voordat er databases waren, werden alle gegevens in informatiesystemen opgeslagen in eenvoudige lineaire bestanden ( bijvoorbeeld tekstbestanden). In het algemeen werden bestanden voor één toepassing gemaakt en werden ze ook effectief maar voor die ene toepassing gebruikt. Bestanden en gegevens werden daarom niet gedeeld door toepassingen, zodat dezelfde gegevens vaak in meerdere bestanden voorkwamen, dit noemen we gegevensredundantie, kortweg redundantie.

We bekijken even het onderstaande voorbeeld. We veronderstellen dat de onderstaande gegevens in twee aparte bestanden worden opgeslagen.

Polisnr

Naam

Adres

Postcode

Plaats

Polisbedrag

Premie

6798316

R. Ederzeel

Hoofdweg 67

1000

Brussel

91 000,00

62,50

6798317

T. De Vries

Steenstraat 5

3000

Leuven

61 000,00

40,50

6798318

E. Van der Wouden

Ringweg 4

3800

St-Truiden

145 000,00

113,90

Hypotheek

Hyponr

Naam

Adres

Postcode

Plaats

Hypotheek-bedrag

RentePerc

32-8127

R. Van Dam

Loefweg 7

2000

Antwerpen

113 500,00

6,1

32-8128

T. De Vries

Steenstraat

3000

Leuven

91 000,00

5,9

32-8129

E. Van der Wouden

Stapstraat 4

3800

St-Truiden

113 500,00

5,8

Merk op dat niet iedereen die een hypotheek afsluit ook voorkomt bij de levensverzekeringen. Als een hypotheek gelijktijdig met een levensverzekering wordt afgesloten, komen in beide bestanden nieuwe vermeldingen. De adresgegevens worden dan twee keer opgeslagen. Het meerdere keren opslaan van gegevens noemt men redundantie. Redundantie betekent overtolligheid. Het is helemaal niet nodig om gegevens meerdere keren in de computer op te slaan, één keer is voldoende. Door gegevens meerdere keren op te slaan kunnen er problemen ontstaan zoals bijvoorbeeld bij E. Van der Wouden. De gegevens van E. Van der Wouden zijn verschillend in de twee bestanden. Waarschijnlijk zal een adreswijziging doorgevoerd zijn in het ene bestand maar niet in het andere. Hierdoor krijg je gegevens die elkaar tegenspreken. Met een moeilijk woord zeggen we dat de gegevens inconsistent (onbetrouwbaar) zijn. Indien er dus gegevens moeten gewijzigd worden, moet je alle bestanden wijzigen. Je moet op meerdere plaatsen dezelfde wijzigingen doorvoeren.

Een ander probleem dat zich ook kan voordoen is dat er met de tijd in deze bestanden gegevens zitten die niet meer van belang zijn, die overtollig zijn.

Allemaal redenen om gegevens NIET op meerdere plaatsen op te slaan en op zoek te gaan naar een efficiënte manier voor het opslaan va n gegevens.

1.7.2  Het principe van een databank

Een database is een geïntegreerde verzameling gegevens die door één of meerdere gebruikers simultaan kan gemanipuleerd worden en waarbij ook enkele veiligheidsaspecten in acht worden genomen.

Deze bovenstaande omschrijving vraagt om meer uitleg en brengt ons bij enkele omschrijvingen of principes van een database:

Geïntegreerd: Er bestaan verbanden tussen gegevens. Relationele databases zijn hier een mooi voorbeeld van. Aan het woord relationeel kan je al merken dat we te doen hebben met gegevens die met elkaar in verbinding staan, dit om redundantie te vermijden.

Meerdere gebruikers: Een database kan gebruikt worden door meerdere gebruikers, door meerdere programma’s. De gegevens worden gedeeld.

Simultaan gemanipuleerd: Tegelijkertijd moeten gegevens kunnen gelezen worden en gegevens kunnen weggeschreven worden. Het moet perfect mogelijk zijn dat je gegevens in een database van een online webwinkel bekijkt, terwijl de beheerder van deze site een update van de prijzen doet.

Veiligheidsaspecten: Aangezien er meerdere gebruikers toegang tot de gegevens hebben, moeten we security voorzien in de database. Dit houdt in dat we kunnen specificeren welke gebruikers rechten hebben om bepaalde gegevens te lezen en/of te wijzigen.

1.7.3  DBMS

De software die het werken met een database mogelijk maakt is het databasemanagementsysteem (= DBMS). Access is een RDBMS, een relationeel databasemanagementsysteem.

2   Een databank ontwerpen

Als u een databank wilt opstellen, dan is het noodzakelijk dat u voldoende tijd neemt om na te denken over de structuur van die databank. Hieronder volgen enkele belangrijke factoren.

  • Welke gegevens wenst u op te slaan?

  • Moeten die gegevens aan bepaalde criteria voldoen?

  • Waarvoor moeten die gegevens achteraf gebruikt worden?

  • Op welke manieren wenst u die gegevens achteraf op te vragen en te sorteren?

  • Bestaan er relaties tussen de gegevens?

  • Enz

Een databank ontwerpen kan je met verschillende technieken doen. Normalisatie was de eerste geformaliseerde techniek hiervoor. Vandaag de dag is o.a. het entiteitsrelatiemodel (ERD) populair en kunnen de diagrammen geconverteerd worden naar databasestructuren. We bespreken hieronder beide technieken.

2.1  Normaliseren

Normalisatie is een methodologie voor het zodanig ordenen van attributen in tabellen, dat er geen sprake is van redundantie onder de attributen. Dus, dezelfde gegevens mogen niet op twee of meer plaatsen voorkomen. Elke tabel richt zich op één type gegeven, oftewel elke tabel beschrijft één entiteit ofwel één veel-op-veel-relatie. Ook staan er precies op de juiste plaatsen refererende sleutels. Met andere woorden het resultaat is een goedgestructureerde relationele database.

2.1.1  Stappen

Uitgangspunt van het normaliseren is steeds de informatiebehoefte van de toekomstige gebruiker van de database. De indeling en inhoud van de tabellen wordt bepaald door de informatie die de gebruiker wenst te zien.

  1. de NV:
    Breng alle gegevens in één entiteit
  2. ste NV:
    Laat de velden die kunnen berekend worden uit andere velden weg.
    Bepaal de primaire sleutel.
    Verwijder repeterende groepen en steek deze in een nieuwe entiteit.
    Bij het afsplitsen van de repeterende groep wordt de sleutel van de oorspronkelijke groep meegenomen in de attributenlijst.
    Duid in deze nieuwe entiteit de primaire sleutel aan
  3. de NV:
    Zoek naar ieder attribuut dat geen deel uitmaakt van de sleutel en die afhankelijk is van slechts een deel van de sleutel.
    Maak nieuwe entiteiten met gevonden attributen samen met dat deel van de sleutel waarvan ze afhankelijk zijn.
    Definieer primaire sleutel in de nieuwe entiteiten.
  4. de NV:
    Zoek naar ieder niet-sleutelattribuut dat functioneel afhankelijk is van een ander niet-sleutelattribuut
    Maak nieuwe entiteiten met gevonden attributen samen met het niet-sleutel attribuut waar ze functioneel afhankelijk van zijn.
    Definieer primaire sleutels in deze nieuwe entiteiten.

2.1.2  Een eerste voorbeeld DJ Paul

Paul, DJ bij de lokale radio, verzorgt driemaal per week een twee uur durend programma waarin hij zijn favoriete muziek laat horen en nieuwe cd’s onder de aandacht wil brengen. Hij krijgt hiervoor een kleine onkostenvergoeding die hij gebruikt om zijn CD-collectie langzaam uit te breiden. Aan het einde van de maand moet Paul een overzicht inleveren van alle nummers die hij die maand heeft laten horen. Aan de hand van deze overzichten zorgt de stichting SABAM ervoor dat de betreffende artiesten een kleine vergoeding krijgen.

Per draaidag maakt Paul zo’n overzicht maar het is al gebeurd dat hij zo’n overzicht kwijtgeraakt is. Hij vraagt daarom een database te ontwikkelen waarmee hij aan het einde van de maand het gewenste overzicht kan maken.

Lokale omroep, DJ Paultje
Datum Code Titel Artiest(en) Soort
21-11-2017 RH5718 Coming at home Justin Bieber S Single
BH9829 Take it to the limit Taylor Swift C CD
WH7373 Tinder Tornado Sydney C CD
YQ7587 Thalapathy Vijay Bartofso B BR
UU8375 Schway 6ix9ine M Maxi
Totaal aantal tracks: 31

0de Normaalvorm

We nemen aan de hand van de figuur op de vorige pagina de eerste stap om de gegevens uiteen te rafelen. We krijgen dan de zogenaamde nulde normaalvorm door alle elementaire, relevante gegevens te bepalen en op te schrijven.

Op ons overzicht staat een aantal verschillende gegevens. Allereerst zien we een koptekst boven het overzicht. Deze koptekst is op ieder overzicht hetzelfde (constant), ongeacht de datum en ongeacht de gedraaide nummers. We zouden deze koptekst kunnen voorbedrukken op het papier. Omdat de koptekst onveranderlijk is, nemen we deze niet op in de database. Constante gegevens nemen we nooit op in de database.

Vervolgens zien we een aantal gegevens die iedere keer zullen verschillen: de datum en de gegevens van de gedraaide muziek. Deze gegevens moeten we natuurlijk wel opnemen in de databank omdat we ze anders kwijt zijn.

Ten slotte zien we onder in het overzicht nog een totaal aantal getoond. Dit totaal is af te leiden uit het overzicht door simpelweg het aantal afgedrukte en dus gedraaide nummers te tellen. Als het totaal niet onder in het overzicht zou staan afgedrukt, zouden we het zelf op eenvoudige wijze even kunnen bepalen. Het totaal aantal kunnen we daarom ook weglaten uit de database. We noemen het een procesgegeven en deze nemen we nooit op in een databank.

Wat zijn nu de elementaire gegevens? Datum, code titel, artiest en soort. Met de aanduiding soort bedoelen we twee gegevens een soortcode (bijvoorbeeld S) en een soortomschrijving (bijvoorbeeld Single). Soort is een samengesteld gegeven en moet daarom gesplitst worden in twee elementaire gegevens: soortcode en soortomschrijving.

We houden nu dus over de elementaire gegevens of attributen: datum, code, titel, artiest, soortcode en soortomschrijving.

Met de door ons gevonden attributen is er iets speciaals aan de hand. Het eerste gegeven de datum, komen we maar één keer tegen. De andere gegevens komen we meerdere keren tegen. Dit zijn repeterende gegevens en dit noteren we als volgt:

Datum, RG(code, titel, artiest, soortcode, soortomschrijving)

Daarbij staat RG voor repeterende groep (repeating groups). Alle gegevens die meerdere keren, repeterend, voorkomen staan vervolgens tussen bolle () haakjes vermeld.

Het overzicht dat we hebben is van 21 november 2017. Paul beschikt echter voor iedere dag dat hij een programma heeft gepresenteerd over een dergelijk overzicht. Om uit de hele stapel met alle overzichten precies het door ons getoonde overzicht te pakken moeten we weten van welke datum we iets willen weten. De datum wijst in ons geval precies één overzicht aan. De datum geeft ons toegang tot precies één overzicht. We noemen daarom de datum ook wel het sleutelattribuut. We geven het sleutelattribuut aan door dit te onderstrepen.

De 0de normaalvorm geeft

0 NV ( datum, RG(code, titel, artiest, soortcode, soortomschrijving))

De 1ste normaalvorm

Om de gegevens in de eerste normaalvorm te krijgen moeten de repeterende groepen verwijderd worden.

We bepalen de eerste normaalvorm door de repeterende groep apart te nemen en uit te breiden met de sleutel van de nulde normaalvorm. Hierna bepalen we in de nieuw gevonden reeks weer een sleutel.

In ons geval bestaat de repeterende groep uit code, titel, artiest, soortcode, soortomschrijving. Deze nemen we apart en we voegen de sleutel (datum) eraan toe. We krijgen dan:

Datum, code, titel, artiest, soortcode, soortomschrijving

In deze nieuwe groep moeten we nu nog een sleutel aanwijzen. Om precies één regel op een bepaald formulier aan te duiden moeten we eerst aangeven naar welk formulier, van welke datum, we willen kijken. Daartoe dienen we dus de datum op te geven. Vervolgens selecteren we één enkel regel van het betreffende overzicht door de code van het betreffende nummer op te geven. Iedere code komt hooguit één keer op een overzicht voor omdat Paul nooit tweemaal hetzelfde nummer in dezelfde uitzending draait. De combinatie van datum en code kan fungeren als sleutel. We krijgen dan:

Datum, code, titel, artiest, soortcode, soortomschrijving

We moeten ons werk nog afmaken. Dat doen we door in de originele nulde normaalvorm de door ons apart genomen repeterende groep te verwijderen en te kijken wat er overblijft. Wat er overblijft, voegen we als aparte groep toe aan de eerste normaalvorm.

We hadden als nulde normaalvorm gevonden:

0 NV ( datum, RG(code, titel, artiest, soortcode, soortomschrijving)

Door de repeterende groep te verwijderen houden we alleen over:

(datum)

Deze groep voegen we toe. We krijgen dan uiteindelijk de eerste normaalvorm:

1ste NV:             

(datum)

(Datum, code, titel, artiest, soortcode, soortomschrijving)

De 2de normaalvorm

De eerste normaalvorm heeft nog steeds nadelen dat dezelfde gegevens steeds opnieuw worden opgeslagen. Paul draait nummers immers vaker (op verschillende dagen) en telkens worden alle gegevens van een nummer helemaal opnieuw genoteerd.

Om te komen tot de tweede normaalvorm onderzoeken we in de eerste normaalvorm of er attributen zijn die niet tot de sleutel behoren (niet onderstreept) en die niet van de gehele sleutel afhangen, maar slechts van een gedeelte van de sleutel. We kijken alleen maar naar de groepen in de eerste normaalvorm waarbij de sleutel samengesteld is, dus uit meerdere attributen bestaat. In ons geval de groep:

(Datum, code, titel, artiest, soortcode, soortomschrijving)

We moeten nu zoeken naar niet-sleutelattributen die slechts afhankelijk zijn van een deel van de sleutel, dus in ons voorbeeld van alleen de datum of alleen de code. De gegevens titel, artiest, soortcode en soortomschrijving hebben niets te maken met de datum, maar zijn alleen maar afhankelijk van de code van het gedraaide nummer (‘vertel ons de code en wij vertellen u de artiest, de titel, etc). Die hebben dus niets te maken met de datum. Kortom de gegevens titel, artiest, soortcode en soortomschrijving zijn niet afhankelijk van de gehele sleutel, maar slechts van een deel van de sleutel. Deze gegevens nemen we apart, tezamen met het deel van de sleutel waarvan ze afhankelijk blijken te zijn. We krijgen dan:

(code, titel, artiest, soortcode, soortomschrijving)

In de originele groep laten we de betreffende niet-sleutelattributen weg. We hadden:

(Datum, code, titel, artiest, soortcode, soortomschrijving)

En we krijgen nu dus:

(Datum, code)

Let erop dat het sleuteldeel waarvan de niet-sleutelattributen afhankelijk waren (code) in deze groep gewoon blijft bestaan.

De nu gevonden groepen

(code, titel, artiest, soortcode, soortomschrijving)

(Datum, code)

vullen we ten slotte aan met de groepen die we in de eerste normaalvorm al hadden gevonden maar waar geen samengestelde sleutel in aanwezig was.

We krijgen dan uiteindelijk de tweede normaalvorm:

2de NV:

(code, titel, artiest, soortcode, soortomschrijving)

(Datum, code)

(Datum)

De 3de normaalvorm

We nemen nu de laatste stap, het bepalen van de derde normaalvorm. De door ons gevonden 2de normaalvorm zag eruit als:

(code, titel, artiest, soortcode, soortomschrijving)

(Datum, code)

(Datum)

Er zit in de tweede normaalvorm nog een vorm van overtolligheid (redundantie). Die heeft te maken met de attributen soortcode en soortomschrijving. Bij ieder nummer staan beide gegevens opgenomen. Als we de gegevens van 1000 nummers op single hebben, zal de combinatie S, Single dus 1000 keer zijn opgenomen. Door deze overtolligheid eruit te halen ontstaat de derde normaalvorm.

Om de derde normaalvorm te bepalen vragen we ons af of er niet-sleutelattributen zijn die niet afhangen van de sleutel, maar die eigenlijk afhangen van andere niet-sleutelattributen. Als dat zo is, nemen we deze gegevens op in een nieuwe groep, geven daar de sleutel aan en verwijderen uit de originele groep het afhankelijke attribuut.

Zoals bekend, we hadden al de bovenstaande 2de NV gevonden.

In ons voorbeeld moeten we dus alleen maar in de eerste groep te kijken, want alleen daar is er spraken van een aantal niet-sleutelattributen. We gaan deze allemaal bekijken en vragen ons af of ze afhankelijk zijn van de sleutel of van een ander niet-sleutelattribuut. Om de titel van een nummer te weten te komen hebben we niets aan de artiest, die kan immers meerdere nummers op zijn repertoire hebben staan. Het heeft ook niets te maken met de soort muziekdrager, single of CD. Nee, de titel is geheel afhankelijk van de code van het nummer. De titel is geheel afhankelijk van de sleutel. Om dezelfde reden doen we niets met artiest en soortcode. Met de soortomschrijving is wel iets speciaals aan de hand. Om deze te weten te komen hoeven we niet te weten over welk nummer het gaat maar moeten we weten welke soortcode van toepassing is: ‘vertelons de soortcode en wij vertellen u de soortomschrijving’. De soortomschrijving heeft dus niets te maken met de sleutel, maar alles met een ander niet-sleutelattribuut. We nemen deze twee attributen apart op in een afzonderlijke groep:

(soortcode, soortomschrijving)

Daarbij geldt dat de soortcode het sleutelattribuut zal worden: ‘vertel ons de soortcode en wij vertellen u de soortomschrijving’. Dus:

(soortcode, soortomschrijving)

In de originele groep laten we nu het afhankelijke niet-sleutelattribuut (soortomschrijving) weg. We houden dan over:

(code, titel, artiest, soortcode)

Let erop dat het attribuut dat sleutel is geworden in de nieuwe groep, in de oorspronkelijke groep gewoon blijft bestaan en daar dienst doet als vreemde sleutel!

Door de beide zojuist gevonden groepen aan te vullen met de andere, niet veranderde groepen uit de tweede normaalvorm, ontstaat de derde normaalvorm:

3de NV:

(soortcode, soortomschrijving)

(code, titel, artiest, soortcode)

(Datum, code)

(Datum)

Deze derde normaalvorm is het uiteindelijke doel geweest van het normalisatieproces. Deze nu gevonden groepen kunnen we later op eenvoudige wijze opnemen in een database. Eerst moeten we nog een paar afrondende handelingen verrichten. De eerste handeling bestaat uit het toekennen van namen aan de gevonden tabellen. De eerste tabel geven we de naam SOORT, omdat daarin de soort muziekdrager wordt bijgehouden. De tweede tabel noemen we TRACK omdat daarin de gegevens van de tracks worden bijgehouden. In de derde tabel worden de gegevens bijgehouden van de nummers die gedraaid zijn, we kunnen dit zien als een DRAAILIJST. Ten slotte hebben we nog de laatste tabel waarin de datums liggen opgeslagen van de dagen waarop Paul een programma heeft verzorgd. Deze tabel noemen we DATUM.

3de NV:

SOORT (soortcode, soortomschrijving)
TRACK (code, titel, artiest, soortcode)
DRAAILIJST (Datum, code)
DATUM (Datum)

De tweede handeling bestaat uit het EVENTUEEL weglaten van tabellen waarin alleen maar sleutelattributen voorkomen. De tabellen mogen alleen maar worden weggelaten als er daarvoor verder GEEN informatie verloren gaat.

NIET IEDERE TABEL DIE BESTAAT UIT ALLEEN SLEUTELATTRIBUTEN MAG DUS WORDEN WEGGELATEN!

Als we kijken naar ons voorbeeld moeten we twee tabellen bekijken nl:

DRAAILIJST (Datum, code)
DATUM (Datum)

Heeft het zin om de tabel DATUM bij te houden? Immers, een overzicht van alle draaidatums kunnen we ook afleiden uit de tabel DRAAILIJST. Ten slotte komen alle datums daar ook in voor. Omdat de tabel DATUM verder geen speciale betekenis heeft, zullen we deze weglaten. Daardoor gaan er geen gegevens verloren.

De tabel DRAAILIJST mag in ons voorbeeld niet weggelaten worden omdat daar nu precies in staat welke nummers op welke datum zijn gedraaid. Zonder deze groep zouden we alleen maar de gegevens van de nummers hebben. En dan kunnen we dus niet het door Paul gewenste overzicht maken. Deze tabel moet dus behouden blijven ook al bestaat ze uitsluitend uit sleutelattributen.

Ten slotte willen we nog even opmerken dat het niet altijd zo is dat er bij de stap van de ene naar de andere normaalvorm altijd iets gedaan kan worden. Regelmatig blijken twee normaalvormen gelijk aan elkaar te zijn. In dat geval mag je gebruik maken van een verkorte notatiewijze. Als de tweede normaalvorm gelijk blijkt te zijn aan de eerste normaalvorm, noteren we bij de tweede normaalvorm: 2 NV = 1 NV.

Simply installing WAMP On Windows

Apache

What is a Web Server?

A web server is software that listens for requests and returns data (usually a file). When you type www.mysite.com, the request is forwarded to a machine running web server software which returns a file back to your browser — such as the contents of index.html. The browser might then make further requests based on the HTML content — like CSS, JavaScript, and graphic files.

Since the web server sits between your browser and the requested file, it can perform processing that’s not possible by opening an HTML file directly. For example, it can parse PHP code which connects to a database and returns data.

You can use your host’s web server for testing, but uploading will become tiresome and changes could go live before they’ve been fully tested. What you need is a local web server installation.

Why Apache?

In general, it’s good to use the web server software that your web host uses. Unless you’re creating ASP.NET applications on Microsoft IIS, your host is likely to use Apache — the most widespread and fully-featured web server available. It’s an open-source project, so it doesn’t cost anything to download or install.

The following instructions describe how to install Apache on Windows. macOS comes with Apache and PHP. Most Linux users will have Apache pre-installed or available in the base repositories.

All-in-one Packages

There are some excellent all-in-one Windows distributions that contain Apache, PHP, MySQL and other applications in a single installation file — such as XAMPP (for Windows, Linux and macOS), WampServer and WampDeveloper Pro. There’s nothing wrong with using these packages, although manually installing Apache will help you learn more about the system and its configuration options.

The Apache Installation Wizard

An excellent official .msi installation wizard is available from the Apache download page. This option is certainly recommended for novice users or perhaps those installing Apache for the first time.

Manual Installation

Manual installation offers several benefits:

  • Backing up, reinstalling, or moving the web server can be achieved in seconds.
  • You have more control over how and when Apache starts.
  • You can install Apache anywhere, such as a portable USB drive (useful for client demonstrations).

Step 1: Configure IIS

Apache listens for requests on TCP/IP port 80. You need to uninstall or disable any program that uses that port. If you have a Professional or Server version of Windows, you may already have IIS installed. If you would prefer Apache, either remove IIS as a Windows component or disable its services.

Step 2: Download the files

We’re going to use the unofficial Windows binary from Apache Lounge. This version has performance and stability improvements over the official Apache distribution, although I’m yet to notice a significant difference. However, it’s provided as a manually installable ZIP file from www.apachelounge.com/download/.

You should also download and install the Windows C++ runtime from Microsoft.com. You may have this installed already, but there is no harm installing it again.

As always, remember to virus scan all downloads.

Step 3: Extract the Files

We’ll install Apache in C:/Apache24, so extract the ZIP file to the root of the C:/ drive. Apache can be installed anywhere on your system, but you’ll need to change SVROOT configuration to point to your unzipped location — such as E:/Apache24.

Step 4: Configure Apache

Apache is configured with the text file conf/httpd.conf contained in the Apache folder. Open it with your favorite text editor.

Note that all file path settings use a forward slash (/) rather than the Windows backslash. If you installed Apache anywhere other than C:/Apache24, now is a good time to search and replace all references to C:/Apache24.

There are several lines you should change for your production environment:

  • Line 60, listen to all requests on port 80:
Listen *:80
  • Line 162, enable mod-rewrite by removing the # (optional, but useful):
LoadModule rewrite_module modules/mod_rewrite.so
  • Line 227, specify the server domain name:
ServerName localhost:80
  • Line 235, allow .htaccess overrides:
AllowOverride All

Step 4: Change the Web Page Root (optional)

By default, Apache returns files found in its C:/Apache24/htdocs folder. It’s good to use a folder on an another drive or partition to make backups and re-installation easier. For the purposes of this example, we’ll create a folder called D:\WebPages and change httpd.conf accordingly:

  • Line 251, set the root:
DocumentRoot "D:/WebPages"
  • Line 252:
<Directory "D:/WebPages">

Step 5: Test your Installation

Your Apache configuration can now be tested. Open a command box (Start > Run > cmd) and enter:

# navigate to Apache bin directory
cd /Apache24/bin
# Test httpd.conf validity
httpd -t

It should say Syntax OK. If not, correct any httpd.conf configuration errors and retest until none appear.

Step 6: install Apache as a Windows service

The easiest way to start Apache is to add it as a Windows service. Open a new command prompt as administrator, and enter the following:

cd /Apache24/bin
httpd -k install

Open the Control Panel, Administrative Tools, then Services and double-click Apache2.4. Set the Startup type to Automatic to ensure Apache starts every time you boot your PC.

Alternatively, set the Startup type to Manual and launch Apache whenever you choose using the command net start Apache2.4.

Step 7: Test the Web server

Create a file named index.html in Apache’s web page root (either htdocs or D:\WebPages) and add a little HTML code:

<html>
    <head>
        <title>Testing Apache</title>
    </head>
    <body>
        <p>Apache is working!</p>
    </body>
</html>

Ensure Apache has started successfully, open a web browser and enter the address http://localhost/. If all goes well, your test page should appear.

In general, most problems will be caused by an incorrect setting in the httpd.conf configuration file. Refer to the Apache documentation if you require further information.

PHP

Why PHP?

PHP remains the most widespread and popular server-side programming language on the web. It is installed by most web hosts, has a simple learning curve, close ties with the MySQL database, and an excellent collection of libraries to cut your development time. PHP may not be perfect, but it should certainly be considered for your next web application. Both Yahoo and Facebook use it with great success.

Why Install PHP Locally?

Installing PHP on your development PC allows you to safely create and test a web application without affecting the data or systems on your live website. This lesson describes PHP installation as a module within the Windows version of Apache 2.2. Mac and Linux users will probably have it installed already.

All-in-One packages

There are some excellent all-in-one Windows distributions that contain Apache, PHP, MySQL and other applications in a single installation file, e.g. XAMPP (including a Mac version), WampServer and Web.Developer. There is nothing wrong with using these packages, although manually installing Apache and PHP will help you learn more about the system and its configuration options.

The PHP Installer

Although an installer is available from php.net, I would recommend the manual installation if you already have a web server configured and running.

Manual Installation

Manual installation offers several benefits:

  • backing up, reinstalling, or moving the web server can be achieved in seconds (see 8 Tips for Surviving PC Failure) and
  • you have more control over PHP and Apache configuration.

Step 1: Download the files

Download the latest PHP 5 ZIP package from www.php.net/downloads.php

As always, virus scan the file and check its MD5 checksum using a tool such as fsum.

Step 2: Extract the files

We will install the PHP files to C:\php, so create that folder and extract the contents of the ZIP file into it.

PHP can be installed anywhere on your system, but you will need to change the paths referenced in the following steps.

Step 3: Configure php.ini

Copy C:\php\php.ini-development to C:\php\php.ini. There are several lines you will need to change in a text editor (use search to find the current setting). Where applicable, you will need to remove the leading semicolon to uncomment these setting.

Define the extension directory:

extension_dir = "C:/php/ext"

Enable extensions. This will depend on the libraries you want to use, but the following extensions should be suitable for the majority of applications:

extension=curl
extension=gd2
extension=mbstring
extension=mysql
extension=pdo_mysql
extension=xmlrpc

If you want to send emails using the PHP mail() function, enter the details of an SMTP server (your ISP’s server should be suitable):

[mail function]
; For Win32 only.
SMTP = mail.myisp.com
smtp_port = 25

; For Win32 only.
sendmail_from = my@emailaddress.com

Step 4: Add C:\php to the path environment variable

To ensure Windows can find PHP, you need to change the path environment variable. Open Settings, type ‘environment variables’ into the search field and open the result. Select the Advanced tab, and click the Environment Variables button.

Scroll down the System variables list and click on Path followed by the Edit button. Click Edit text and add ;C:\php to the end of the Variable value line (remember the semicolon).

PHP path environment variable

Now click OK until you’re out. You might need to reboot at this stage.

Step 5: Configure PHP as an Apache module

Ensure Apache is not running (use net stop Apache2.2 from the command line) and open its conf\httpd.conf configuration file in an editor. The following lines should be changed:

On line 239, add index.php as a default file name:

DirectoryIndex index.php index.html

At the bottom of the file, add the following lines (change the PHP file locations if necessary):

# PHP5 module
LoadModule php_module "c:/php/php8apache2_4.dll"
#LoadModule php5_module "c:/php/php5apache2_2.dll"
# LoadModule php7_module "c:/php/php7apache2_4.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php"

Save the configuration file and test it from the command line (Start > Run > cmd):

cd /Apache24/bin
httpd -t

Step 6: Test a PHP file

Create a file named index.php in Apache’s web page root (either htdocs or D:\WebPages) and add this code:

<?php phpinfo(); ?>

Ensure Apache has started successfully, open a web browser and enter the address http://localhost/. If all goes well, the “PHP version” info page should appear showing all the configuration settings.

MySQL

Why MySQL?

MySQL is undoubtedly the most popular and widely-used open source database:

  • it is simple to set up and use
  • it is recognised as one of the fastest database engines
  • most Linux (and many Windows-based) web hosts offer MySQL
  • MySQL is closely integrated with PHP, which makes it an ideal candidate for many web applications.

Why Install MySQL Locally?

Installing MySQL on your development PC allows you to safely create and test a web application without affecting the data or systems on your live website.

This lesson describes how to install MySQL on Windows, but versions are available for Mac, Linux, and several other operating systems.

All-in-One packages

There are some excellent all-in-one Windows distributions that contain Apache, PHP, MySQL and other applications in a single installation file, e.g. XAMPP, WampServer and Web.Developer. There is nothing wrong with using these packages, but manually installing MySQL will help you learn more about the system and give you more control.

The MySQL Installation Wizard

An excellent .msi installation wizard is available for MySQL. The wizard creates the my.ini configuration file and installs MySQL as a service. This option is certainly recommended for novice users or perhaps those installing MySQL for the first time.

Manual Installation

Manual installation offers several benefits:

  • backing up, reinstalling, or moving databases can be achieved in seconds (see 8 Tips for Surviving PC Failure)
  • you have more control over how and when MySQL starts
  • you can install MySQL anywhere, such as a portable USB drive (useful for client demonstrations).

One of the nice features of MySQL as a database software is its noinstall option in which you download the files themselves and perform a manual installation that takes just under a gigabyte of space on your drive.  If you’re a developer or a student, this means you can quickly create a new self-contained instance wherever you need it and then blow it away if you need to without cluttering up your registry.

This does mean working on the command line so you’ll want to have a certain comfort level with that.  You will also need to be working with Administrative privileges.

Step 1: Download the files

From https://dev.mysql.com/downloads/mysql/ , you’ll need the Windows (x86, 64-bit), ZIP Archive download, assuming your machine is 64-bit. As of this writing, the current version is 8.0.14.  Just download this to a convenient location on your computer.

Step 2: Extract the files

It’s best to choose a simple location for the MySQL files; C:\MySQL is common.  Once you’ve extracted the ZIP archive and placed them, your working folder should look like this:

MySQL installation folder

Step 3: move the data folder

I recommend placing the data folder on another drive or partition to make backups and re-installation easier. For the purposes of this example, we will create a folder called D:\MySQL\data and move the contents of C:\mysql\data into it.

You should now have two folders, D:\MySQL\data\mysql and D:\MySQL\data\test. The original C:\mysql\data folder can be removed.

Step 3: Create an option file

MySQL needs a my.ini settings file to tell it about key settings and directory.  This text file can contain a lot of settings but to start out, you just need to tell the initialization program where the files are located.  MySQL will look for this file in different places but to keep it simple, just create it at C:\MySQL\my.ini, paste the following text into it using your favorite text editor and save it.  Be sure to change the directories shown here to match your actual installation.

[mysqld] 
# basedir = the installation path 
basedir=C:/mysql 
# datadir = the location of the data directory 
datadir=D:/mysql/data

The second directory shown is the directory in which MySQL will store your database files. It does not need to be in the same directory as the rest of the files but it’s good to keep things contained.

If you’re running more than one instance of MySQL or another database server, you might need to change the port that MySQL communicates on.  By default, it’s 3306 but you can change it to any other port that’s not currently being used such as 3360.  To do this, add a single line to your option file at the end of the [mysqld] section shown above.

port=3360

This line will actually need to be put in twice so that you can login via the command line. A separate section, [client], specifies settings for the command line client program.

[client]
port=3360

Step 4: Initialize the data directory

MySQL needs to create a data directory and create all the necessary files to maintain your databases there so the next step is to run the initialization program that will carry this out.  From the Windows command line, run either of the following commands:

mysqld --initialize --console
mysqld --initialize-insecure --console

The –initialize option on its own will create the data directory and assign a random password for the root user on this instance of MySQL. The console output during the initialization will include the password so you’ll need to be paying attention during the process.  If you would prefer to create your own password later (as I usually do), just use the –initialize-insecure option.

The output should look something like this.

Step 5: Add the MySQL base and data directories to your PATH statement.

If you’re going to be working from the command line, it’s easier if you don’t have to specify the installation directory every time you want to work with MySQL.  To be safe, add the MySQL and MySQL\bin directories to your system path.

Step 6: Start the server for the first time

With a minimal installation that’s run from the command line, you will need to start the server each time you want to use it.  You can do this with the mysqld program in the bin directory.

mysqld --console

This command will start the MySQL server but the window will not return you to the command prompt until you shut down the server. To login to the server and work with databases, you will need to minimize the command window you used to start the server and open a new one.

When you want to shut down the server, you can either use the CTRL-C shortcut in the window that’s running the server or open another command window and enter the following command.

mysqladmin -u root shutdown

When you run this command, the original window will display the shutdown routine.

You can also install MySQL as a service that will start when Windows starts up by using the same command with a different switch.

mysqld --install

The –remove switch will remove the service from Windows.

Step 7: Secure your MySQL instance

As mentioned earlier, you can choose to leave the root password blank during installation and set it later.  Your root user, which has full rights to everything, should definitely have a strong password even on a local installation.  There are also a few other steps that you can take such as removing the test database that’s open to everyone.

Once you’ve started your server, you can run though the list of steps for securing your installation with one command

mysql_secure_installation

This program automates the process of securing the instance as shown below.

Step 8:  Login to your server

Once everything is setup, you just need to login using the regular mysql program command.

mysql -u root -p

The -u switch specifies the user and the -p is used on its own so that MySQL will prompt you for the password and hide the characters while you type.

Don’t forget, as I did in the above screenshot, that once you’re working in MySQL, most commands are terminated with a semi-colon.

To log out, simply type exit at the mysql> prompt.

Simply installing LAMP On Ubuntu

In this lesson, I will show you how to install a LAMP system. LAMP stands for Linux, Apache, MySQL, PHP. The lesson is intended to help those who have some knowledge of using Linux.

Apache

Step 1: Install Apache

To start off we will install Apache.

1. Open up the Terminal (Applications > Accessories > Terminal).

2. Copy/Paste the following line of code into Terminal and then press enter:

sudo apt-get install apache2

3. The Terminal will then ask you for you’re password, type it and then press enter.

Step 2: Testing Apache

To make sure everything installed correctly we will now test Apache to ensure it is working properly.

1. Open up any web browser and then enter the following into the web address:

http://localhost/

You should see a folder entitled apache2-default/. Open it and you will see a message saying “It works!”.

PHP

Step 1: Install PHP

In this part we will install PHP 5.

1. Again open up the Terminal (Applications > Accessories > Terminal).

2. Copy/Paste the following line into Terminal and press enter:

sudo apt-get install php5 libapache2-mod-php5

3. In order for PHP to work and be compatible with Apache we must restart it. Type the following code in Terminal to do this:

sudo /etc/init.d/apache2 restart

Step 2: Test PHP

To ensure there are no issues with PHP let’s give it a quick test run.

1. In the terminal copy/paste the following line:

sudo gedit /var/www/testphp.php

This will open up a file called phptest.php.

2. Copy/Paste this line into the phptest file:

<?php phpinfo(); ?>

3. Save and close the file.

4. Now open you’re web browser and type the following into the web address:

http://localhost/testphp.php

You should have succesfully installed both Apache and PHP!

MySQL

Step 1: Install MySQL

To finish this lesson up we will install MySQL. (Note – Out of Apache and PHP, MySQL is the most difficult to set up. I will provide some great resources for anyone having trouble at the end of this lesson.)

1. Once again open up the amazing Terminal and then copy/paste this line:

sudo apt-get install mysql-server

2. (optional). In order for other computers on your network to view the server you have created, you must first edit the “Bind Address”. Begin by opening up Terminal to edit the my.cnf file.

gksudo gedit /etc/mysql/my.cnf

Change the line

bind-address = 127.0.0.1

And change the 127.0.0.1 to your IP address.

3. This is where things may start to get tricky. Begin by typing the following into Terminal:

mysql -u root

Following that copy/paste this line:

mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('yourpassword');

(Make sure to change yourpassword to a password of your choice.)

4. We are now going to install a program called phpMyAdmin which is an easy tool to edit your databases. Copy/paste the following line into Terminal:

sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

After that is installed our next task is to get PHP to work with MySQL. To do this we will need to open a file entitled php.ini. To open it type the following:

gksudo gedit /etc/php5/apache2/php.ini

Now we are going to have to uncomment the following line by taking out the semicolon (😉.

Change this line:

;extension=mysql.so

To look like this:

extension=mysql.so

Now just restart Apache and you are all set!

sudo /etc/init.d/apache2 restart

Quick note to anyone who encountered problems with setting up the MySQL password, please refer to this page: MysqlPasswordReset

Thats All Folks!

Quick wins

Briefing Visicourse
Briefing GPI
Briefing Pars
ShizzleLists Firebase Dump

Algemene examenvoorbereiding

Hoe moet jij je voorbereiden op een examen?

Voordat met de voorbereiding wordt begonnen moet jij onderstaande goed bekijken:

  • wat er op het examen van je wordt verlangd, bestudeer de kandidatensets.
  • welke kennis je al hebt
  • hoeveel en wat is nog onbekende stof
  • wat jij nog kan leren

Om goed voorbereid te zijn op het examen volgen hier wat suggesties.
Maak een studieplanning waarin ook de nodige herhaling en ontspanning is opgenomen. Stelregel is om om het half uur 5 minuten pauze in te lassen, de Pomodoro technique leent zich er uitermate goed voor. Als het enigzins mogelijk is oefen met proefexamens, overigens bijkomend voordeel is dat je ook de zenuwen leert onderdrukken.

Vertrouw ook op je eigen prep, niet tot het allerlaatste moment in de boeken duiken.

Kerntaak 3 examenvoorbereiding

Elk werkproces is een opdracht, in het geval van kerntaak 3 is dit:

Als het goed is, heb je al veel vaardigheden aangeleerd en geoefend. Voor de examens zijn er belangrijke vaardigheden die je zeker moet beheersen:

Opdracht 1 Implementatieplan – Werkproces 3.1 Maakt of levert een bijdrage aan het implementatieplan

Voor deze opdracht staat 3 uur.

Hier moet een presentatie plaatsvinden waarmee Spreken Nederlands 3F wordt getoetst

  • Een gegeven toelichting
  • Uitleg over de werking van de applicatie
  • Een volledig implementatieplan
    • Planning voor de implementatie
    • Lijst benodigde hard- en software
    • Consequenties van de implementatie

Opdracht 2 Installatie – Werkproces 3.3 Implementeert een applicatie of (cross)media-uiting en/of -systeem

Voor deze opdracht staat 4 uur

  • Geinstalleerde applicatie

Opdracht 3 Acceptatietest – Werkproces 3.2 Stelt een acceptatietest op en voert deze uit

Voor deze opdracht staat 3 uur

  • Opgesteld rapport acceptatietest
  • Uitgevoerde acceptatietest met betrouwbare resultaten

Opdracht 4 Evaluatie – Werkproces 3.4 Evalueert een implementatie

Voor deze opdracht staat 2 uur

Hier moet een gesprek plaatsvinden waarmee Gesprekken Nederlands 3F wordt getoetst
Hier moet een rapport worden vervaardigd waarmee Spreken Schrijven 3F wordt getoetst

  • Conclusie van de acceptatietest
  • Gesprek met de projectleider
  • Gesprek met de opdrachtgever
  • Eindrapportage

Hoewel ik bovenstaande met de grootst mogelijke zorgvuldigheid heb samengesteld, kan ik geen aansprakelijkheid aanvaarden voor aanwijzigingen die betrekking hebben op publicaties van de exameninstanties. Het is altijd raadzaam om de website van Stichting Praktijk Leren te raadplegen voor actuele informatie die voor jouw examen van belang kan zijn.

Deze inhoud is beschermd met een wachtwoord. Voer hieronder je wachtwoord in om het te bekijken:

Deze inhoud is beschermd met een wachtwoord. Voer hieronder je wachtwoord in om het te bekijken:

Deze inhoud is beschermd met een wachtwoord. Voer hieronder je wachtwoord in om het te bekijken:

Deze inhoud is beschermd met een wachtwoord. Voer hieronder je wachtwoord in om het te bekijken:

Deze inhoud is beschermd met een wachtwoord. Voer hieronder je wachtwoord in om het te bekijken:

Olderposts

Copyright © 2024 Prep Hard Win Easy

Theme by Jim DunkUp ↑