Inleiding · Web view2017. 1. 10. · Inleiding. Is dit boek het juiste boek voor jou? Je hebt al...

Inleiding

Is dit boek het juiste boek voor jou?Je hebt al enige ervaring met het programmeren in Visual Basic en wilt nu leren programmeren met databases? Dan is dit boek precies wat je zoekt. In dit boek leggen we stap voor stap uit hoe je interfaces voor databases maakt, de interfaces verbindt met databases en bewerkingen uitvoert op de gegevens in de databases. We doen dit aan de hand van een aantal programma’s die je in de loop van dit boek maakt. Zo maak je zowel Windows programma’s als webpagina’s die verbonden zijn met Access databases en MySQL databases. Je gebruikt eerst allerlei wizards om snel en automatisch interfaces te maken, maar leert daarna ook om zelf code te maken, zodat je je applicaties helemaal aan je eigen wensen kunt aanpassen.

Moet ik al kunnen programmeren om met dit boek te kunnen werken?Het helpt als je al enige ervaring met het programmeren in Visual Basic hebt. Maar zelfs als je alleen maar wat ervaring hebt met andere programmeertalen is dit al voldoende. Wat je van databases moet weten leer je tijdens het maken van de projecten.

Welke software heb ik ten minste nodig om met dit boek te kunnen werken?1. Windows 102. Visual Studio 2015 Community1

3. Microsoft Access 2013 of nieuwer. De voorbeelden in dit boek zijn gemaakt met Access 2016.

4. De bestanden die bij dit boek horen2

1 Visual Studio 2015 Community is gratis te downloaden van het Internet. Natuurlijk zijn ook de commerciële, volledige versies van dit programma zoals de Pro en Enterprise versies geschikt.2 Deze bestanden zijn te downloaden van www.evertkok.nl/frinop/vbmetdatabases2015community.

InhoudInleiding....................................................................................................................... 1

Is dit boek het juiste boek voor jou?.........................................................................1Moet ik al kunnen programmeren om met dit boek te kunnen werken?...................1Welke software heb ik ten minste nodig om met dit boek te kunnen werken?.........1Inhoud......................................................................................................................3

Hoofdstuk 1 Je eerste programma met een database.................................................8Voorbereiding...........................................................................................................8De database profielkeuzes.......................................................................................8Je eerste project.....................................................................................................10

Een nieuw project maken...................................................................................10Een data source koppelen aan een form met behulp van een wizard................12Door de dataset bladeren...................................................................................19Gegevens wijzigen..............................................................................................20Records toevoegen en verwijderen....................................................................21

Hoofdstuk 2 Een Windows programma met een database zelf bouwen....................22Gegevens ophalen.................................................................................................22

Een verbinding met de database maken............................................................22De interface maken................................................................................................24DataBindings instellen............................................................................................24Bladeren in de dataset...........................................................................................27

Naar het volgende record bladeren....................................................................27Het nummer van het huidige record tonen.........................................................28Een subroutine maken........................................................................................29Naar het vorige record bladeren.........................................................................30Naar het eerste record bladeren.........................................................................31Naar het laatste record bladeren........................................................................31

Gegevens wijzigen.................................................................................................31Wijzigingen in het huidige record annuleren.......................................................32Wijzigingen in meerdere records annuleren.......................................................32

Een nieuw record aanmaken..................................................................................32Try – Catch – End try..........................................................................................33

Een record verwijderen..........................................................................................34De wijzigingen in de dataset opslaan in de onderliggende database.....................35

Hoofdstuk 3 Databases, SQL en databaseontwerp...................................................37Databases..............................................................................................................37

Tabellen, records en velden...............................................................................37Sleutelveld..........................................................................................................38Gegevens verdelen over meerdere tabellen.......................................................39Tabellen koppelen..............................................................................................41Relaties en relationele database........................................................................41

Werken met Access...............................................................................................42Een nieuwe database maken.............................................................................42Een tabel maken.................................................................................................43Tabellen vullen met gegevens............................................................................44

Structured Query Language - SQL.........................................................................45Eenvoudige query’s............................................................................................45SELECT … FROM … WHERE...........................................................................45

Oefenen met SQLOefenaar...................................................................................47Inhoud

3document.docx

Iets uitgebreidere query’s...................................................................................48ORDER BY.........................................................................................................48DISTINCT...........................................................................................................48Het koppelen van de tabellen in SQL.................................................................48Oefeningen.........................................................................................................49

Een database ontwerpen.......................................................................................53Hoofdstuk 4 .NET framework, namespaces en resources.........................................56

Inleiding..............................................................................................................56Het .NET (dotNET) framework...............................................................................56

Common Language Runtime (CLR)...................................................................56Data en XML.......................................................................................................56Base Class Libraries...........................................................................................57

Namespaces..........................................................................................................57Imports statements.............................................................................................58Namespaces in webapplicaties..........................................................................58

Resources..............................................................................................................59Plaatjes laden in runtime....................................................................................62.wav-bestanden afspelen....................................................................................62

Hoofdstuk 5 Databound objecten...............................................................................64Voorbereiding.....................................................................................................64

Objecten plaatsen en objecteigenschappen..........................................................64Forms.................................................................................................................64Een icoon toevoegen aan je form.......................................................................65De controlbox aanpassen...................................................................................65Tekstvakken en labels........................................................................................67

Objecten op het formulier instellen en aan de database koppelen.........................71Tekstvakken........................................................................................................71MaskedTextBox..................................................................................................72Checkbox............................................................................................................73Knoppen.............................................................................................................73Snelknopcombinatie...........................................................................................73Een knop met een icoon.....................................................................................74De tekst van een knop in runtime aanpassen.....................................................75De tekst van een knop uit de database halen.....................................................75Objecten uitschakelen en onzichtbaar maken....................................................76Bepalen welk object de focus heeft....................................................................76Door een formulier tabben..................................................................................77Keuzelijsten........................................................................................................78Afbeeldingvak.....................................................................................................79Datagridview (dataraster)...................................................................................80DateTimePicker en MonthCalender....................................................................82Tooltip.................................................................................................................84

Objectgebeurtenissen (events) en hun subroutines (eventhandlers).....................85Gebeurtenissen en hun subroutines...................................................................85Overzicht gebeurtenissen...................................................................................86

Hoofdstuk 6 Zonder wizards, maar in code...............................................................89Gegevens ophalen uit een database in code - uitleg.............................................89

Een verbinding maken in code...........................................................................90Een query maken in code...................................................................................91Een commando maken in code..........................................................................92

Inhoud

4document.docx

Een data-adapter maken in code........................................................................92Een dataset maken in code................................................................................93Een dataset vullen in code..................................................................................93Een datagridview aan een dataset koppelen in code.........................................93

Gegevens ophalen uit een database in code – aan de slag...................................93Een datagridview vullen in code.........................................................................93Het gebruik van aanhalingstekens, & en _ in query’s.........................................94Aanhalingstekens...............................................................................................94&.........................................................................................................................94& en _.................................................................................................................95Een datareader gebruiken in code......................................................................95Een listbox vullen in code met behulp van een datareader................................95Een tekstvak vullen in code................................................................................97

Objecten aan een dataset binden in code..............................................................97Een tekstvak aan een dataset binden in code....................................................97Een listbox aan een dataset binden in code.......................................................98Een combobox aan een dataset binden in code.................................................99Een DataGridView opmaken in code................................................................100

De gegevens in een database wijzigen in code...................................................102Een record toevoegen aan een database in code............................................102Gegevens wijzigen in een database in code.....................................................105Een record verwijderen uit een database in code.............................................108

Afbeeldingen tonen via een database in code.....................................................110Gegevens uit een Microsoft Excel bestand inlezen naar een Microsoft Access database..............................................................................................................114

Hoofdstuk 7 Afdrukken op papier.............................................................................121PrintPreViewDialog...........................................................................................121Afdrukken van tekst uit een RichTextBox.........................................................121Printdocument opmaken...................................................................................122PrintPreviewDialog instellen.............................................................................123Een afbeelding van het formulier afdrukken.....................................................123Gegevens in een dataset afdrukken.................................................................124Afbeeldingen in een database afdrukken.........................................................129Het PrintDocument instellen in code.................................................................131PageSetupDialog object...................................................................................134Portrait en Landscape.......................................................................................135Afdrukken over meerdere pagina’s...................................................................136Afdrukken van gegevens uit een dataset over meerdere pagina’s met 1 afbeelding en set gegevens per pagina............................................................136Afdrukken van gegevens uit een dataset over meerdere pagina’s...................139Afdrukken via het scherm ‘Afdrukken’..............................................................146Afdrukken naar schijf........................................................................................148

Hoofdstuk 8 Websites met databases.....................................................................149Inleiding............................................................................................................149Webpagina’s opvragen en verzenden..............................................................149Een eerste vingeroefening................................................................................150En hoe werkt dit nou allemaal?.........................................................................154De database.....................................................................................................154De solution Snelkoppeling................................................................................157De interface......................................................................................................158

Inhoud

5document.docx

Het scherm inloggen.........................................................................................158De database plaatsen.......................................................................................160Een verbinding met de database maken..........................................................161Een DataSource instellen.................................................................................163Het controleren van de login gegevens............................................................166Postback en viewstate......................................................................................168Het doorgeven van waarden tussen webpagina’s............................................170Client-Side en Server-Side opslag van gegevens............................................170Cookies en sessies...........................................................................................171Opslaan van gegevens in een sessie...............................................................171Uitlezen van gegevens in een sessie...............................................................172De wensen pagina............................................................................................173Objecten afsluiten voor wijzigingen door de gebruiker.....................................173Ontwerpen van de pagina wensen...................................................................173Objecten op een web form koppelen aan een database..................................174Een dropdownlistbox aan gegevens uit meerdere data sources binden..........178Een select query in code opbouwen.................................................................185

Hoofdstuk 9 Datavalidatie........................................................................................194Inleiding............................................................................................................194

Datavalidatie in de database................................................................................194Het juiste gegevenstype...................................................................................194Validatieregel....................................................................................................195Validatieoperatoren en jokertekens..................................................................197Validatietekst....................................................................................................197Invoermasker....................................................................................................197Voorbeelden van invoermaskers:.....................................................................198

Validatie in de interface........................................................................................198Validatie in een Windows Forms app(licatie)....................................................198ToolTip..............................................................................................................199Ingevoerde waarden controleren......................................................................199DateTimePicker en MonthCalender..................................................................201

Validatie in een webapplicatie..................................................................................201Validatiebesturingselementen...........................................................................201Validering uitschakelen voor sommige knoppen...............................................207

Hoofdstuk 10 Visual Studio met andere databases.................................................208Inleiding............................................................................................................208

Visual Studio met MYSQL....................................................................................208Waarschuwing..................................................................................................208Voorbereiding...................................................................................................208phpMyAdmin.....................................................................................................209Een MYSQL-database maken..........................................................................210Een tabel in een MYSQL-database maken......................................................210Records in een MYSQL database tabel maken................................................211Een ODBC-database benaderen met of zonder DSN-bestand........................213Een DSN-bestand maken.................................................................................213Verbinding maken met een MySQL database en gegevens selecteren...........215Een record toevoegen aan een MYSQL-database...........................................218Een record verwijderen uit een MYSQL-database............................................218

Hoofdstuk 11 Een setup voor een Windows programma maken.............................220Voorbereiding...................................................................................................220

Inhoud

6document.docx

De map Resources wordt gekopieerd..............................................................220Je programma klaarmaken voor de setup............................................................221

De bronbestanden klaarmaken voor de setup..................................................221De connection string(s) aanpassen..................................................................221Connectionstrings(s) in app.config aanpassen.................................................221Verwijzingen in de code aanpassen.................................................................222Verwijzingen in het tabblad Properties aanpassen...........................................222Verbindingsstrings met My.Computer.Filesystem.CurrentDirectory.................223

Een splash screen toevoegen..............................................................................223Een installer project toevoegen aan een solution.................................................226

Snelkoppelingen toevoegen aan je setup bestand...........................................227Setup instellingen aanpassen...........................................................................228De launch condition instellen............................................................................228Het setupproject genereren..............................................................................229

Hoofdstuk 12 Je webapplicatie beschikbaar maken voor het Internet.....................230Je website klaar maken voor gebruik op een webserver..................................230Je webapplicatie klaar maken voor gebruik op een webserver........................230Stap 1 - Debug modus uitschakelen.................................................................230Stap 2 - De connectionstring(s) aanpassen......................................................231Stap 3 - De website publiceren.........................................................................232Je website of webapplicatie testen op je eigen computer.................................232Testen of er webserver software actief is op je machine..................................232De webapplicatie op de webserver plaatsen....................................................233

Bijlage 1 Installatie IIS + PHP + MYSQL + PhpMyadmin + ODBC driver................237INTERNET INFORMATION SERVICE (IIS).........................................................237PHP, MYSQL en phpMyadmin ( XAMPP)............................................................239MYSQL.................................................................................................................249myODBC driver....................................................................................................249

Inhoud

7document.docx

Hoofdstuk 1 Je eerste programma met een database

Visual Basic is prima geschikt om interfaces voor databases mee te maken. Je kunt er zowel Windows apps als webapplicaties mee maken. Je begint al direct in dit eerste hoofdstuk met het maken van een Windows app die je koppelt aan een Access database. Om het eenvoudig te houden gebruik je een kant en klare database en maak je de interface met behulp van een wizard.

VoorbereidingVisual Studio, het programma dat je gebruikt om je Visual Basic projecten mee te maken, maakt automatisch voor elk project dat je maakt een nieuwe map aan. We gaan er in dit boek van uit dat je de standaardlocatie voor deze projecten gebruikt. Dit is C:\Gebruikers\...\Documenten\Visual Studio 2015\Projects, waarbij de puntjes dan vervangen zijn door je gebruikersnaam. Om verwarring te voorkomen is het handig dat jij op jouw computer de standaard locatie gebruikt.

Ook is het handig om de bestanden die bij dit boek horen te bewaren op een plek waar je ze makkelijk terug kunt vinden. In dit boek gebruiken we daarvoor de map vb2015communitymetdatabases. Deze maken we in de map C:\Users\...\Documents.

1. Maak met behulp van de Verkenner op je computer in de map C:\Users\...\Documents een nieuwe map genaamd vb2015communitymetdatabases.

2. Surf naar www.evertkok.nl/frinop/website en download het bestand vb2015communitymetdatabases.zip. Dit bestand bevat alle bestanden die bij dit boek horen. Als je geen zip-uitpak programma hebt, kun je de bestanden ook 1 voor 1 downloaden. Ze hoeven dan niet te worden uitgepakt.

3. Sla het bestand/de bestanden op in de map C:\Users\...\Documents\vb2015communitymetdatabases.

4. Pak eventueel het zip-bestand uit met een uitpakprogramma zoals WinZip of WinRar en zet de uitgepakte bestanden ook weer in vb2015communitymetdatabases.

De database profielkeuzesOm interfaces voor databases te programmeren heb je geen uitgebreide kennis van databaseontwerp nodig. Toch is het wel handig dat je het een en ander weet van de database waarmee je werkt. Daarom kijk je eerst even naar hoe de database waarmee je gaat werken in elkaar zit. De database heet profielkeuzes.accdb. Aan de extensie accdb kun je zien dat het een Microsoft Access database is. Je kunt het bestand dus met Access openen en bekijken. Als je de bestanden inmiddels gedownload hebt (zie de vorige alinea), bevindt profielkeuzes zich in de map vb2015communitymetdatabases.

1. Zoek in de verkenner in de map C:\Users\...\Documents\vb2015communitymetdatabases het bestand profielkeuzes.accdb op en open het door er twee keer op te klikken. Als de beveiliging van je computer streng is ingesteld verschijnen er misschien een of meerdere waarschuwingen voor virussen. Profielkeuzes bevat absoluut geen virussen, dus open het bestand gerust.

Hoofdstuk 1 8

Je ziet dat de database profielenkeuzes twee tabellen bevat: nawgegevens en profielen.

Kijk eerst maar eens welke velden de tabel nawgegevens bevat.

2. Rechtsklik op nawgegevens.

3. Klik op het pijltje omlaag (▼) onder Weergave en dan op Ontwerpweergave.

Het ontwerp van de tabel nawgegevens verschijnt.

Je ziet dat de tabel nawgegevens verschillende velden heeft, van id tot en met foto. Het belangrijkste veld is id. In dit veld staat het identificatienummer van elke persoon in de tabel. Iedereen in deze database heeft een uniek id-nummer en daarom is id een zogenaamd sleutelveld in deze tabel. Dat betekent dat in het veld id niet twee keer dezelfde waarde mag voorkomen. Het sleutel symbool voor id laat zien dat het een sleutelveld is. Het gegevenstype van het veld id is AutoNummering. Dit betekent dat elke nieuwe persoon die aan de database wordt toegevoegd automatisch een nieuw, uniek id-nummer krijgt toegewezen. Dat dit erg handig is, zul je later nog zien.De meeste andere velden bevatten tekst. Het veld website is van het type hyperlink omdat daarin hyperlinks naar websites bewaard worden. En het veld foto is van het type OLE-object en bevat de foto van de persoon.

Hoofdstuk 1 9

Kijk maar eens welke gegevens de tabel bevat.

1. Klik op het pijltje omlaag (▼) onder Weergave en dan op Gegevensbladweergave.

Je ziet nu de inhoud van de tabel nawgegevens; de records met hun gegevens. Bij website en foto is nog niets ingevuld.

1. Sluit Access door in het scherm met de tabel nawgegevens rechtsboven op het kruisje te klikken.

Zo, nu heb je een idee wat er in de tabel nawgegevens zit.

Je eerste projectGenoeg theorie. Je gaat je eerste interface maken.

Een nieuw project maken1. Start Visual Studio.2. Kies New Project.

Hoofdstuk 1 10

3. Kies Visual Basic.4. Kies Windows.5. Kies Windows Forms Application.6. Geef het project de naam nawgegevens.7. Pas eventueel de locatie aan naar: C:\Users\...\Documents\Visual Studio

2015\Projects8. Klik op de knop OK.

Visual Studio maakt een project nawgegevens en aantal standaardbestanden. Je ziet rechtsboven in de Solution Explorer de solution nawgegevens. Deze solution bevat 1 VB-project, ook weer genaamd nawgegevens, met daarin een leeg formulier genaamd Form1.vb.

Hoofdstuk 1 11

Een data source koppelen aan een form met behulp van een wizardVoor je eerste project maak je gebruik van een tweetal wizards die je door de hele procedure leiden.

1. Kies uit het menu Project – Add New Data Source.

De Data Source Configuration Wizard wordt gestart en het onderstaande scherm verschijnt.

Je gaat een database gebruiken als onderliggende bron van gegevens en laat dus de standaardkeuze Database zo staan.

2. Klik op Next.

Op het volgende scherm wordt gevraagd welk type database model je wilt gebruiken. De standaardkeuze Dataset is al juist.

3. Klik op Next.

Het volgende scherm van de wizard verschijnt.

Hoofdstuk 1 12

In dit scherm kies je welke connection (verbinding) naar een database je gaat gebruiken. Als je al eerder met Visual Studio een connection naar een database hebt gemaakt, staan er al 1 of meerdere connections in de dropdown list. Maar je gaat nu een nieuwe connection naar een database maken.

4. Klik op New Connection.

Je gaat gebruik maken van de database profielkeuzes.accdb; een Microsoft Access Database File.

5. Kies Microsoft Access Database File.6. Klik op Continue.

In het volgende scherm Add Connection kies je welke database het gaat worden.

7. Klik op Browse.8. Ga naar C:\Users\...\Documents\vb2015communitymetdatabases.9. Kies profielkeuzes.accdb 10.Klik op Openen.

Het scherm ziet er nu als volgt uit:

Hoofdstuk 1 13

Omdat de database niet met een password is beveiligd, kun je de standaard User name Admin laten staan en het Password tekstvak leeg laten. Maar het is wel verstandig om even te testen of de verbinding ook werkt.

11.Klik op de knop Test Connection om te controleren of de verbinding goed ingesteld is.

Als je alles goed hebt gedaan zal de verbinding goed zijn.

12.Klik op OK.

Hoofdstuk 1 14

In het volgende scherm zie je dat de verbinding met de database, de connection, is ingesteld. Er is een verbinding profielkeuzes.accdb. En als je op het plusteken naast Connection string klikt, kun je de connection string ook zien.

13.Klik op het plusteken naast Connection String.

14.Klik op de knop Next.

Er verschijnt een scherm waarin wordt gevraagd of er van de database een kopie gemaakt moet worden in de projectmap en de connection (verbindingsstring) aangepast. Het is verstandig om dit wel te doen. Er wordt dan een kopie van vb2015communitymetdatabases\profielen.accdb gemaakt en deze wordt in de map met alle projectbestanden geplaatst. Natuurlijk wordt ook automatisch de verbindingsstring aangepast. Het voordeel van het gebruiken van zo’n kopie is dat de database nu onderdeel wordt van het project en bij het maken van een setup bestand van je uiteindelijke programma wordt meegenomen.

15.Klik op Ja.

Er verschijnt weer een scherm met een vraag.

Hoofdstuk 1 15

Ook deze vraag is belangrijk. De wizard wil weten of je de verbindingsstring wilt opslaan in het configuratiebestand van je project. Dat is heel handig als je een project hebt met meerdere forms die gebruik maken van dezelfde database. Je kunt dan telkens dezelfde verbindingsstring gebruiken. Ook is het handig als je later de locatie van je database wilt veranderen. Je hoeft dan maar 1 keer de verbindingsstring in het configuratie bestand aan te passen, en niet op elke pagina waar je de verbinding gebruikt. Doen dus. Het vakje Save the connection as: is al aangevinkt. De wizard geeft zelf al een logische naam voor de string. Die hoef je ook niet aan te passen.

16.Klik op Next.

In het volgende scherm kun je Database Objecten kiezen. Dit zijn de tabellen en views die je gaat gebruiken in je programma. Je wilt van de tabel nawgegevens de gegevens in alle velden kunnen gebruiken.

17.Klik op het driehoekje naast Tables.18.Klik op het driehoekje naast nawgegevens.19.Klik op het vakje naast nawgegevens.20.Klik op het vakje naast profielen

Alle velden van de tabel nawgegevens zijn nu aangevinkt. Het scherm ziet er als volgt uit:

Hoofdstuk 1 16

21.Klik op de knop Finish.

De wizard sluit af. Je bent weer terug in het hoofdscherm van Visual Studio. Het lijkt of er niets is gebeurd. Je form is nog steeds leeg. Maar dat is niet zo. Achter de schermen is er een heleboel gebeurd. Dat zul je zo dadelijk wel zien. In het scherm Solution Explorer rechtsboven aan het scherm zie je dat er een database profielkeuzes.accdb en een dataset profielkeuzesDataSet.xsd bij gekomen zijn. Deze dataset bevat de informatie die nodig is om straks de gegevens te kunnen ophalen. Dat kun je ook zien.

1. Rechtsklik op profielkeuzesDataSet.xsd en kies View Designer.

In het scherm dat verschijnt zie je bovenaan de namen van de tabellen, met daaronder de namen van de velden van deze tabellen.

Als je in de tabel nawgegevens klikt op de regel SQL Fill, GetData() en dan de cursor even boven deze regel houdt, zie je de query die wordt gebruikt om deze gegevens op te halen. Snap je nog niet hoe dit werkt, dan geeft dit niet. In hoofdstuk 3 leer je dit. Je gaat eerst het View Designer scherm afsluiten.

2. Klik op het kruisje op de tab profielkeuzesDataSet.xsd.

Maar nu wil je die gegevens natuurlijk ook op je form zien. Dat kan. Daarvoor gebruik je het Data Sources scherm. De tab van dit scherm staat links bovenaan je scherm.

1. Klik scherm op het tab Data Sources.

Hoofdstuk 1 17

2. Klik op het driehoekje naast nawgegevens. Je ziet dan:

Wanneer je de tabel of een van de velden kiest verschijnt ernaast een dropdown lijst met alle mogelijke objecten die deze gegevens op het form kunnen weergeven.

3. Klik op nawgegevens.4. Kies uit de dropdown lijst Details.

Wanneer je het object nawgegevens nu naar het form sleept maakt VB automatisch tekstvakken en labels voor alle velden van de tabel nawgegevens aan en verbindt ze met de gegevens in de database die je eerder hebt gekozen.

5. Sleep nawgegevens naar Form1 en laat los.

Je form ziet er nu ongeveer zo uit:

Hoofdstuk 1 18

Je ziet links in labels de namen van de velden in de tabel nawgegevens met daarnaast de tekstvakken voor de inhoud van de velden. Die wizard heeft ze op de volgorde gezet waarin ze in de database staan. Dat is niet altijd handig. Later leer je hoe je zelf de volgorde van de velden kunt bepalen. Je kunt trouwens ook elk veld apart op je form slepen. Je hoeft dus niet altijd alle gegevens te gebruiken. Voor nu laat je het maar zo. Ook heeft de wizard een navigatiebalk met een aantal knoppen gemaakt. Met deze knoppen kun je de door de gegevens bladeren, gegevens toevoegen, gegevens aanpassen en gegevens verwijderen.

1. Start je project.

Door de dataset bladerenJe ziet dat de tekstvakken gevuld zijn met de gegevens uit het eerste record van je data source; de tabel nawgegevens uit de database profielen. Je ziet nu de gegevens in het eerste van de 3 records die in de dataset zitten. Je kunt bladeren met de pijltjes toetsen.

Hoofdstuk 1 19

2. Klik op de knop >.

Je ziet nu de gegevens van het tweede record.

3. Klik op de knop <.

Je ben een record terug gebladerd en ziet weer de gegevens van het eerste record.

4. Klik op de knop >>.

Je bent nu naar de laatste record, naar nummer 3 van 3 gesprongen.

5. Klik op de knop <<.

Je bent nu naar de eerste record, naar nummer 1 van 3 gesprongen.

Gegevens wijzigenOok kun je de gegevens veranderen.

1. Verander in het eerste record het profiel in NT.2. Blader naar een ander record en weer terug naar record 1.

Je ziet dat Jan de Vries als profiel nog steeds NT heeft. De wijziging is dus doorgevoerd in de dataset (gegevensverzameling) waarmee dit formulier werkt. De gegevens in deze dataset zijn uit de database gehaald tijdens het opstarten van je form. Ze staan nu los van de originele database.

Let op! De wijziging is nog niet doorgegeven aan de database die op schijf staat. Dit kun je zien als je de gegevens opnieuw van schijf ophaalt.

3. Sluit je programma af.4. Start het weer op.

Je ziet dat er bij Jan de Vries bij profiel weer NG staat. Je aanpassing is dus niet doorgevoerd in de onderliggende tabel nawgegevens in de database profielen.

Om aanpassingen te bewaren moeten er twee dingen worden gedaan:Het eerste is het aanpassen van de instellingen van de database die in de projectmap nawgegevens zit. Standaard wordt deze elke keer als je een form start gekopieerd naar de bin map. Deze database levert de gegevens voor het form. Eventuele wijzigingen worden doorgevoerd in deze database in de bin map. De volgende keer dat het form wordt gestart wordt er opnieuw een kopie van de database gemaakt naar de bin map. Deze overschrijft de vorige (aangepaste) database en zo verdwijnen de aanpassingen die je had gedaan. Dat moet natuurlijk niet. Daarom moet het telkens kopiëren worden uitgeschakeld.

1. Klik in de Solution Explorer op profielkeuzes.accdb.2. Zet in het Properties scherm Copy to Output Directory op Copy if newer.

Hoofdstuk 1 20

Met deze instellingen word de tijdelijks database niet meer overschreven en blijven de wijzigingen behouden.

Stap twee is dat je nadat je in het form wijzigingen hebt doorgevoerd, deze wijzigingen opslaat in de database.

1. Start het project.2. Verander in het eerste record het profiel opnieuw in NT.3. Klik op de knop Save Data. Dat is de knop met het diskette symbool. (de

meest rechtse knop).4. Sluit je programma af.5. Start het weer op.

Je ziet nu dat je aanpassing wel is bewaard. Dus denk erom; na een aanpassing moet je opslaan om de wijzigingen ook in de onderliggende database door te voeren.

Je hoeft trouwens niet na elke wijziging op Save Data te klikken. Dat zou wel erg onhandig zijn. Je kunt ook pas opslaan wanneer je een hele serie wijzigingen, ook in meerdere records, hebt doorgevoerd.

Mocht je gemaakte wijzigingen niet willen doorvoeren, sluit dan het programma af zonder op Save Data te klikken. Alle wijzigingen die je hebt doorgevoerd sinds je voor het laatst op Save Data hebt geklikt worden dan niet opgeslagen.

Records toevoegen en verwijderenEr zijn twee knoppen die je nog niet gebruikt hebt: Add new en Delete. Wanneer je op de knop Add new (met het plus teken) klikt wordt aan de dataset een nieuw record toegevoegd. Denk er wel aan dat je na het invullen van de gegevens op de knop Save Data klikt om de gegevens van de nieuwe record ook naar de database op schijf te schrijven.

Wanneer je op de knop Delete (met het rode kruis) klikt wordt het huidige record uit de dataset verwijderd. Omdat dit nog niet in de database op schijf is bijgewerkt kun je dit eventueel nog ongedaan maken door voor je afsluit NIET op Save Data te klikken. Pas wanneer je op de knop Save Data klikt wordt het record ook uit de database op schijf verwijderd.

1. Test het verwijderen en toevoegen van records.2. Sluit Visual Studio (en bewaar eventueel de wijzigingen).

Hoofdstuk 1 21

Hoofdstuk 2 Een Windows programma met een database zelf bouwen

In hoofdstuk 1 heb je een interface helemaal met behulp van een wizard gemaakt. In dit hoofdstuk ga je weer een interface bij dezelfde database maken. Maar dit keer maak je de objecten zelf en koppel je ze ook zelf aan de gegevens in de database.

Om te beginnen maak je een nieuw project.

1. Start Visual Studio.2. Kies New Project.3. Kies Visual Basic.4. Kies Windows.5. Kies Windows Forms Application.6. Geef het project de naam nawgegevens2.7. Pas eventueel de locatie aan naar: C:\Users\...\Documents\Visual Studio

2015\Projects8. Klik op de knop OK.

Gegevens ophalenOm gegevens van een database te kunnen gebruiken moet je een aan de database gekoppelde dataset met gegevens als data source aan het project toevoegen. Hiervoor heb je drie dingen nodig:

a) Een verbinding met de database.b) Een aantal commando’ s om de juiste gegevens uit de database op te halen,

te bewerken en de wijzigingen naar de database op schijf door te geven. c) Een dataset object om de opgehaalde gegevens in te bewaren.

Een verbinding met de database maken1. Klik linksboven in het scherm op de tab Data Sources.

Als de tab Data Sources niet zichtbaar is, kun je hem zichtbaar maken via View – Other Windows – Data Sources.

Het scherm Data Sources opent.

2. Klik linksboven op het icoon met het plusje.

Hoofdstuk 2

22document.docx

3. Klik achtereenvolgend op Database – Next – Dataset – Next.4. Als de connection profielkeuzes.accdb van het vorige hoofdstuk nog zicht

baar is, kies deze. Sla dan stappen 5 en 7 over.5. Klik op New Connection.6. Browse naar de database C:\Users\...\Documents\

vbmetdatabases2015community\profielkeuzes.accdb.7. Test de connection.8. Klik op Next.9. Kik op Ja als antwoord op de vraag of de database gekopieerd moet worden.10.Vink in het volgende scherm alleen de tabel nawgegevens aan.

Onder in het scherm zie je de voorgestelde naam voor de dataset: profielkeuzesDataSet. Deze hoef je niet aan te passen.

11.Klik op Finish.

BELANGRIJK!12.Zet in het properties scherm de eigenschap Copy to Output Directory van de

database profielkeuzes.accdb op Copy if newer.

In de het scherm Data Sources linksboven is de data source profielkeuzesDataSet verschenen. Deze data source is een zogenaamde dataset. Ook in de Solution Explorer rechtsboven in je scherm zie je de nieuwe dataset. Een dataset is een variabele waarin uit een database ingelezen gegevens tijdelijk bewaard kunnen worden. Er zijn ook andere soorten data sources, maar verreweg de handigste is de dataset.

De dataset die je zojuist hebt gemaakt bevat alle gegevens van de tabel nawgegevens. Dus niet de gegevens uit de tabel profielen. Die heb je in dit project niet nodig. Je kunt in een dataset wel gegevens uit meerdere tabellen opslaan. En je kunt zelfs gegevens uit meerdere tabellen combineren. Hoe dat gaat leer je in een ander hoofdstuk van dit boek. Je kunt nu ook al zien welke gegevens er precies in de dataset zitten.

1. Rechtsklik in het scherm Data Sources in de profielkeuzesDataSet op de tabel nawgegevens.

2. Klik op Preview Data.3. Klik op Preview.

Je ziet nu de gegevens (data) die in de data source zitten.

4. Klik op de knop Close om het venster te sluiten.

Onder in je scherm zie je dat er nog twee nieuwe objecten zijn gemaakt: de NawgegevensBindingSource en de NawgegevensTableAdapter. De bindingsource beheert de gegevens in de dataset, en de tableadapter bevat de commando’s om de gegevens in de database op te halen en te wijzigen. Deze objecten worden later besproken.

Hoofdstuk 2

23document.docx

Je bent nu klaar om de interface te gaan maken.

De interface maken

Form1 zoals het er staat is te klein.

1. Klik op Form1.

Je ziet dan blokjes verschijnen op de rechterrand en de onderrand van het formulier.

2. Plaats de cursor rechtsonder aan het formulier totdat deze in een diagonale pijl verandert.

3. Houdt de linkermuisknop ingedrukt en trek het formulier breder en langer.4. Laat de linkermuisknop los.

Plaats tekstvakken en knoppen op Form1, zodat het ongeveer overeenkomt met het voorbeeld hieronder.

Je hebt nu de basis van het formulier gemaakt; tekstvakken voor de informatie en labels die aangeven welke informatie in de tekstvakken staat.

DataBindings instellenDe volgende stap is het verbinden van een tekstvak aan de juiste gegevens in de dataset.

Hoofdstuk 2

24document.docx

1. Klik op Textbox1.2. Klik in het Properties scherm in de regel Databindings op de subregel Text op

het driehoekje.3. Klik in de dropdown lijst op NawgegevensBindingSource op id.

Klik eventueel op Other Data Sources dan op Project Data Sources dan op profielkeuzesDataSet.xsd en dan op nawgegevens en tenslotte op id

De tekst van het Textbox1 is nu verbonden met veld id van de NawgegevensBindingsource. Zo’n bindingsource is een object dat zorgt voor de verbinding tussen een dataset en een object (b.v. een tekstvak). Je gebruikt deze bindingsource straks om te kunnen bladeren van het ene record in de dataset naar de andere.

Je kunt van een tekstvak heel veel instellen, en je kunt ook bepalen hoe de inhoud getoond wordt. Als je dit wilt doen gebruik je niet de subregel Text, maar kies je Advanced en klik je op de puntjes.

1. Klik in de regel Databindings in de subregel Advanced.2. Klik op de puntjes.

Hoofdstuk 2

25document.docx

Je kunt in dit scherm naast een heleboel andere zaken ook instellen in welke vorm de inhoud van het tekstvak getoond moet worden, maar dat is nu niet nodig.

1. Klik op Cancel.

Je bent klaar voor om te testen of het eerste tekstvak vastzit aan de juiste gegevens.

1. Klik op de het Start driehoekje.

Het project start in een Windows scherm. In de eerste tekstvak verschijnt het id-nummer van het eerste record: 1. Het werkt!!!!

2. Sluit je project.

1. Verbind nu op dezelfde manier alle tekstvakken met de juiste velden.2. Start je project en controleer of het ook allemaal goed werkt.

Als je alles goed gedaan hebt, staat nu in elk tekstvak het juiste gegeven van het eerste record in de dataset. Het tekstvak website is leeg. Dit klopt, want in de database is dit veld niet ingevuld. Als je je met het koppelen hebt vergist, zie je dat nu en kun je nog verbeteringen aanbrengen. Zoals je in hoofdstuk 1 hebt gezien kun je in plaats van zelf een tekstvak maken en verbinden aan het juiste veld in de juiste tabel in de dataset natuurlijk ook het veld van uit het scherm data sources op het form slepen. Maar zelf alles kunnen instellen biedt toch meer mogelijkheden.

Hoofdstuk 2

26document.docx

3. Sluit nu je project.

Bladeren in de datasetMaar je bent natuurlijk niet tevreden met alleen maar de inhoud van het eerste record. Je wilt meer! Je wilt door de records kunnen bladeren en ze kunnen bewerken.

1. Voeg knoppen en een label aan je interface toe, zodat die ongeveer overeenkomt met de afbeelding hieronder.

2. Noem de objecten van links naar rechts en van boven naar onder als volgt:btnEerste, btnVorige, lblRecords, btnVolgende, btnLaatstebtnAnnuleer, btnAnnuleerAllebtnVoegToe, btnVerwijderbtnOpslaan

Naar het volgende record bladerenWil je dat er iets gebeurt wanneer je op zo’n knop klikt, dan moet er code achter. Als eerste de code voor de knop btnVolgende.

1. Dubbelklik op de Volgende knop (met het > teken). 2. Type de volgende regel code in de subroutine btnVolgende_Click.

NawgegevensBindingSource.MoveNext()

De subroutine ziet er dan als volgt uit.

Hoofdstuk 2

27document.docx

Private Sub btnVolgende_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVolgende.Click NawgegevensBindingSource.MoveNext() End Sub

Maar wat betekent die code dan precies?

Zoals gezegd gebruik je om een object zoals een tekstvak aan een veld in een dataset te verbinden een BindingSource object. De bindingsource in dit project heet NawgegevensBindingSource.

Een BindingSource object houdt van de dataset die hij aan de objecten koppelt een aantal zaken bij. Onder andere welke record het huidige, oftewel actieve, record van die dataset is.

De code

NawgegevensBindingSource.MoveNext()

geeft NawgegevensBindingSource opdracht om in de dataset naar het record met het volgend hogere nummer te gaan. Dus bij voorbeeld van record 1 naar record 2.

Tijd om te testen.

1. Klik op het Start driehoekje.2. Klik op de Volgende knop.

Het tweede record in profielkeuzesDataSet verschijnt.


Het nummer van het huidige record tonenNatuurlijk is het wel handig om te weten welk record van de database je ziet. Daarom gebruik je een stukje code dat in het label lblRecords het nummer van het huidige record laat zien, gevolgd door het aantal records in de dataset. Dus als je het tweede record van de 3 records in de dataset ziet, is dat 2 van 3.

Bij het opstarten van je project en telkens wanneer er een ander record het huidige record wordt, moet de tekst van lblRecords worden aangepast. Dus bij het laden van het form en na het klikken op elke navigatieknop. Het is niet handig om dezelfde code op meerdere plekken te gebruiken. Teveel code, teveel kans op fouten, en als je de code een keer wilt aanpassen, wil je dat niet op meerdere plaatsen moeten doen. In plaats daarvan maak je een subroutine die je vanuit de code bij elke navigatieknop aanroept. Deze subroutine noem je NawgegevensBindingSourcePositionChanged. De naam geeft, weliswaar in het Engels, precies aan wanneer deze subroutine moet worden aangeroepen; namelijk wanneer in NawgegevensBindingSource de waarde van de eigenschap position van de huidige record verandert.

De code is als volgt:

Hoofdstuk 2

28document.docx

lblRecords.Text = (NawgegevensBindingSource.Position + 1).ToString & " van " & NawgegevensBindingSource.Count.ToString

Je vraagt je af wat dat betekent? Een stukje uitleg is hier wel op zijn plaats.

De eigenschap text van het object lblRecords wordt ingesteld. Dat doe je door 3 stukjes tekst aan elkaar te plakken met & en het resultaat toe te wijzen aan lblRecords.Text.

Eerst haal je het nummer van het huidige record op. Dit wordt geleverd door NawgegevensBindingSource.Position. Computers tellen vanaf 0, dus als het huidige record het derde in de dataset is, heeft dat record nummer 2 (0,1,2). Daarom tel je er 1 bij op met + 1, omdat mensen nu eenmaal vanaf 1 tellen, en de gebruikers van je programma verwachten dat het derde record nummer 3 heeft, en niet 2. Tenslotte zet je met .ToString dit getal 3 om naar de letter 3 omdat een label immers alleen tekst kan tonen, geen getallen. Dus:

(NawgegevensBindingSource.Position + 1).ToString

Dan wordt de tekst van, voorafgegaan en gevolgd door een spatie aan het voorafgaande geplakt. Dit gaat simpelweg met het & teken gevolgd door dubbele aanhalingstekens (begin van een string), dan een spatie, het woordje van, weer een spatie en weer dubbele aanhalingstekens om de string af te sluiten en weer het teken &. Dus:

& " van " &

NawgegevensBindingSource.Count geeft het aantal records in de BindingSource terug. Dit zet je met .ToString om naar een string en plakt het met het plusteken aan wat je al had.

NawgegevensBindingSource.Count.ToString

Een subroutine maken1. Maak onder de subroutine btnVolgende_Click, maar vóór End Class, een

nieuwe private subroutine NawgegevensBindingSourcePositionChanged(). 2. Type de code voor deze subroutine zoals hieronder.

Let op! Type de hele code van de subroutine achter elkaar op 1 regel. Dus NIET zoals hieronder verdeeld over meerdere regels! Afhankelijk van de instellingen van Visual Studio op jouw computer wordt de code zichtbaar op 1 of meerdere regels.

Private Sub NawgegevensBindingSourcePositionChanged() lblRecords.Text = (NawgegevensBindingSource.Position + 1).ToString & " van " & NawgegevensBindingSource.Count.ToString End Sub

Nu de subroutine klaar is, kun je hem aanroepen vanuit andere subroutines in dit formulier. Om te beginnen de subroutine btnVolgende_Click.

Hoofdstuk 2

29document.docx

1. Voeg aan de code in de subroutine btnVolgende_Click de volgende regel toe:

NawgegevensBindingSourcePositionChanged()

De subroutine ziet er dan als volgt uit:

Private Sub btnVolgende_Click(sender As Object, e As EventArgs) Handles btnVolgende.Click NawgegevensBindingSource.MoveNext() NawgegevensBindingSourcePositionChanged() End Sub

Nu moet hetzelfde nog gebeuren bij de Form1_Load subroutine:

2. Voeg de volgende tekst toe aan het eind van de Form1_Load subroutine:


De subroutine ziet er dan als volgt uit:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load 'TODO: This line of code loads data into the 'ProfielkeuzesDataSet.nawgegevens' table. You can move, or remove it, as needed. Me.NawgegevensTableAdapter.Fill(Me.ProfielkeuzesDataSet.nawgegevens) NawgegevensBindingSourcePositionChanged() End Sub

Tijd om te testen of alles werkt.

1. Start je programma.

Je ziet in lblRecords de tekst 1 van 3.

2. Blader naar het volgende record door op de Volgende knop te klikken.

Je ziet in lblRecords de tekst 2 van 3. Succes !!!!


Naar het vorige record bladerenDe resterende navigatieknoppen zijn nu niet meer moeilijk. Eerst de vorige knop.Je gebruikt dezelfde code als bij de volgende knop, alleen wordt het nummer van het record nu niet met 1 verhoogd, maar met 1 verlaagd, oftewel je gaat naar het vorige record in de dataset.

1. Dubbelklik op de Vorige knop om een subroutine voor het Click event aan te maken.

2. Kopieer de code van de btnVolgende_Click subroutine naar de btnVorige_Click subroutine.

3. Verander MoveNext() in MovePrevious().Hoofdstuk 2

30document.docx

Private Sub btnVorige_Click(sender As Object, e As EventArgs) Handles btnVorige.Click NawgegevensBindingSource.MovePrevious() NawgegevensBindingSourcePositionChanged() End Sub

4. Testen maar!

Naar het eerste record bladerenEn dan nog de subroutines bij de Eerste en Laatste knoppen.

De code voor de subroutine bij de Eerste knop is als volgt:

NawgegevensBindingSource.MoveFirst() NawgegevensBindingSourcePositionChanged()

Naar het laatste record bladerenEn de code van de Laatste knop is:

NawgegevensBindingSource.MoveLast() NawgegevensBindingSourcePositionChanged()

1. Maak de Click subroutines voor de Eerste en Laatste knoppen.

Private Sub btnEerste_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnEerste.Click NawgegevensBindingSource.MoveFirst() NawgegevensBindingSource.Count.ToString() End Sub

Private Sub btnLaatste_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLaatste.Click NawgegevensBindingSource.MoveLast() NawgegevensBindingSourcePositionChanged() End Sub

2. Test alle knoppen uit en verbeter waar nodig.

Gegevens wijzigenJe kunt nu gegevens in een dataset laden en door de records bladeren. Maar je wilt ook de gegevens kunnen veranderen.

1. Ga naar een willekeurig record.2. Verander het telefoonnummer.3. Blader naar een ander record.4. Blader weer terug naar het record waarin je het telefoonnummer hebt

gewijzigd.

Je ziet dat het veld telefoonnummer nog steeds de gewijzigde waarde bevat. De wijzigingen worden in de dataset bewaard wanneer je naar een ander record bladert.

Hoofdstuk 2

31document.docx

Dat betekent dat je niet na elke wijziging de gegevens in het record hoeft op te slaan. Maar let op! De wijzigingen zijn alleen in de dataset doorgevoerd. Nog niet in de database op schijf. Dat heb je in hoofdstuk 1 ook al gezien. Om de wijzigingen ook in de onderliggende database door te voeren moet er nog een extra handeling gebeuren. Dit leer je verderop in dit hoofdstuk.

Wijzigingen in het huidige record annulerenWanneer je in een record gegevens aan het wijzigen bent, maar je bedenkt je en wilt de wijzigingen in het huidige record annuleren, dan kun je de oude waarden herstellen door op de knop Wijzigingen in huidige record annuleren te klikken.

De code achter deze knop is als volgt:

NawgegevensBindingSource.CancelEdit()

NawgegevensBindingSource krijgt de opdracht om het aanpassen van de gegevens van het huidige record te stoppen en de wijziging(en) te annuleren.

1. Dubbelklik op de knop btnAnnuleer om de subroutine btnAnnuleer_Click te genereren.

2. Plaats de bovenstaande code in de subroutine btnAnnuleer_Click.3. Test of de subroutine goed werkt en verbeter eventueel.

Wijzigingen in meerdere records annulerenOok wijzigingen in andere records kunnen worden geannuleerd zolang ze nog niet naar de database zijn weggeschreven. Dit gaat met de code onder de knop Alle wijzigingen annuleren.

De code is als volgt:

ProfielkeuzesDataSet.RejectChanges()

De code is erg eenvoudig en geeft ProfielkeuzesDataset de opdracht alle wijzigingen te annuleren. Dit kan omdat een dataset niet alleen bijhoudt in welke records wijzigingen zijn geweest maar ook wat de oude en nieuwe waarden zijn. De recordset plaatst alle oude waarden weer terug. Een aanroep van de subroutine NawgegevensBindingSourcePositionChanged() is hier overbodig omdat je niet van record wisselt.

1. Genereer de subroutine btnAnnuleerAlle_Click door op de knop Alle wijzigingen annuleren te dubbelklikken.

2. Plaats de bovenstaande code in de subroutine.3. Test of de subroutine goed werkt en verbeter eventueel.

Een nieuw record aanmakenOnder de knop btnVoegToe toe komt de code om een nieuw record aan de dataset toe te voegen. De code is als volgt:

Hoofdstuk 2

32document.docx

Private Sub btnVoegtoe_Click(sender As Object, e As EventArgs) Handles btnVoegtoe.Click Try NawgegevensBindingSource.EndEdit() NawgegevensBindingSource.AddNew() NawgegevensBindingSourcePositionChanged() Catch MsgBox("Kan geen record toevoegen.") End Try End Sub

1. Dubbelklik op de knop btnVoegToe om de Click subroutine te genereren.2. Type de grijs gemarkeerde code in de subroutine precies zo als hierboven.

Try – Catch – End tryDe Try – Catch – End Try constructie is een vorm van foutafvanging. Mocht er tijdens het uitvoeren van de code iets verkeerd gaan, dan komt er een mededeling in de messagebox die de gebruiker vertelt dat het niet gelukt is om een nieuwe, lege record aan te maken.

In het Try-gedeelte staat de gewone code van de subroutine. Dus wat er gebeurt als alles goed gaat. Als eerste wordt een eventueel lopende edit operatie beëindigd. Bijvoorbeeld wanneer je in een record gegevens hebt gewijzigd, maar nog niet naar een ander record bent gegaan, en dan op de knop Voeg record toe klikt. De wijzigingen worden dan eerst netjes doorgevoerd in de dataset voordat er een nieuw record wordt gemaakt. Vergeet je deze regel, dan gaat er niets fout, want voordat de BindingSource een nieuw record maakt controleert hij zelf ook of er misschien nog een edit gaande is en sluit het eventueel af, maar het is natuurlijk wel zo netjes om zelf eventuele fouten af te handelen.

Daarna wordt er door NawgegevensBindingSource in de dataset die hij beheert, dus in ProfielkeuzesDataSet, een nieuw, leeg record aangemaakt. Leeg? Er staat toch al een nieuw id-nummer ingevuld? Ja, inderdaad. Dat komt omdat het veld id in de database een sleutelveld is van het type Autonummering. Zo’n veld moet per se een uniek nummer bevatten en de dataset heeft dat automatisch aangemaakt.3 Omdat de dataset niet zeker weet welk nummer in de onderliggende database het volgende vrije nummer is gebruikt het voorlopig -1. Dat nummer is zeker nog niet bezet, want het wordt nooit gebruikt in de database. Bij het wegschrijven van de gegevens van het nieuwe record van de dataset naar de database wordt dan automatisch -1 verwijderd en het eerstvolgende vrije nummer in het veld id ingevuld. De andere velden zijn nog leeg. Je kunt nu gegevens invullen. Het veld Profiel is een verplicht veld, en daar moet dus wat ingevuld worden. Als je een verplicht veld niet invult kan het nieuwe record niet worden weggeschreven naar de onderliggende database en volgt er een foutmelding. In het hoofdstuk over validatie leer je hoe je de gebruikers van je programma kunt “dwingen” bepaalde gegevens in te vullen. De gegevens van het nieuwe record worden in de dataset opgenomen zodra je naar een ander record navigeert. Ze staan dan nog niet in de onderliggende database. Daar worden ze pas naar toe geschreven zodra de gebruiker op de knop Alle wijzigingen opslaan klikt.

3 Trouwens, een eenmaal gemaakt en daarna verwijderd nummer wordt nooit meer opnieuw gegenereerd. Het kan wel “handmatig” in de database zelf worden ingevuld.Hoofdstuk 2

33document.docx

Als laatste roept de code weer de subroutine NawgegevensBindingSourcePositionChanged aan om de tekst in lblRecords aan te passen.

Het Catch-gedeelte bepaalt wat er gebeurt als er iets misgaat bij het aanmaken van het nieuwe record.

MsgBox("Kan geen record toevoegen.")

Het Catch gedeelte wacht of het (operating) systeem een foutmelding stuurt. Dit gebeurt bijvoorbeeld wanneer het systeem geen nieuwe record kan aanmaken. Wanneer Catch zo’n melding ontvangt, dan stopt de uitvoering van de code in het Try gedeelte en wordt de foutmelding opgevangen. Deze kan ook worden getoond. Maar deze foutmeldingen zijn vaak voor gewone gebruikers onbegrijpelijk en je kunt dan ook vaak beter zelf een melding in een messagebox tonen.

End Try sluit het Try - Catch - End Try gedeelte af.

Een record verwijderenWat moet de code achter deze knop doen? Wel, om het netjes te doen moet je eerst controleren of er wel een record in de dataset zit. Als je immers uit een lege dataset een record probeert te verwijderen, loopt het mis. Dus heb je eerst een if … then constructie nodig die test of het aantal records in de dataset wel groter is dan 0.

If NawgegevensBindingSource.Count > 0 Then

En als het aantal records inderdaad groter is dan nul, moet het huidige record uit de dataset worden verwijderd.

NawgegevensBindingSource.RemoveCurrent()

Dan vertel je de BindingSource dat je klaar bent met het aanpassen (edit) van de dataset.

NawgegevensBindingSource.EndEdit()

En tenslotte moet de tekst in lblRecords nog aangepast worden. Wanneer de huidige record is verwijderd, kom je immers vanzelf op een ander record terecht. En wel het record vóór het net verwijderde record. Dus voeg je de aanroep van de subroutine NawgegevensBindingSourcePositionChanged nog toe.


In het Catch gedeelte voeg je weer een messagebox met toepasselijke tekst toe.

1. Dubbelklik op btnVerwijder knop om de click subroutine aan te maken.2. Voeg de benodigde code toe.

De hele subroutine ziet er dan als volgt uit:

Hoofdstuk 2

34document.docx

Private Sub btnVerwijder_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVerwijder.Click Try If NawgegevensBindingSource.Count > 0 Then NawgegevensBindingSource.RemoveCurrent() NawgegevensBindingSource.EndEdit() NawgegevensBindingSourcePositionChanged() End If Catch MsgBox("Kan record niet verwijderen.") End Try End Sub

3. Test de nieuwe code.

De wijzigingen in de dataset opslaan in de onderliggende databaseAlle wijzigingen die tot nu toe zijn gemaakt, zijn alleen doorgevoerd in de dataset. Dit zijn de gegevens die je bij het laden van je form vanuit de achterliggende database profielkeuzes.accdb naar ProfielkeuzesDataSet hebt geladen en daarna in je formulier hebt gebruikt. Dit is een kopie van de gegevens in de database op schijf. De originele, ongewijzigde gegevens staan nog steeds in de database op schijf. Wijzigingen worden alleen bijgehouden in de dataset. Het bijwerken in de database gebeurt later. Dit is gedaan om het dataverkeer tussen de dataset in je formulier en de database op schijf te beperken. Hier wordt je programma sneller van, zeker als je formulier een webpagina is en al het dataverkeer via het internet gaat. Het nadeel is wel dat je er om moet denken de wijzigingen in de dataset bij te werken in de database op schijf.

Om het dataverkeer tussen je formulier en de database op schijf zo klein mogelijk te houden heeft Microsoft nog iets slims bedacht. Je formulier stuurt niet de hele dataset, inclusief wijzigingen terug naar de database op schijf, maar alleen de gewijzigde records. Die overschrijven dan de desbetreffende records in de database op schijf.

NawgegevensBindingSource heeft keurig bijgehouden in welke records iets is gewijzigd. Bij de records die gewijzigd zijn en waarbij het aanpassen is beëindigd, bij voorbeeld doordat de gebruiker naar een andere record is gegaan, is de eigenschap RowState veranderd in modified (aangepast). En alleen records met een RowState modified worden naar de onderliggende database weggeschreven.Er is één situatie die mogelijk roet in het eten kan gooien. En wel als de gebruiker iets heeft gewijzigd in het huidige record en daarna niet meer naar een ander record is gegaan. De eigenschap RowState van dit laatst gewijzigde record is dan nog niet modified. Zo zou deze laatste wijziging niet meegenomen worden bij het opslaan. Om dit toch af te dwingen voeg je aan het begin van de code een extra regel toe die er voor zorgt dat de edit operatie wordt afgesloten en de eigenschap RowState van het laatste record toch wordt veranderd in modified:

NawgegevensBindingSource.EndEdit()

In het begin van dit hoofdstuk, onder het kopje Gegevens ophalen heb je al gelezen dat je voor het ophalen en wijzigen van de gegevens in de database bepaalde commando’s nodig hebt. Deze commando’s bevinden zich in een zogenaamde Hoofdstuk 2

35document.docx

TableAdapter, ook wel DataTableAdapter genoemd. Je kunt een TableAdapter opdracht geven om het commando om alle veranderingen in de dataset naar de onderliggende database weg te schrijven uit te voeren. Dit gaat met Update(). De TableAdapter in dit project is bij het aanmaken van de BindingSource automatisch gemaakt en heet NawgegevensTableAdapter.

1. Kijk onder in het design scherm.

Je ziet dan de TableAdapter NawgegevensTableAdapter.

De code om de NawgegevensTableAdapter zijn Update (werk bij) commando uit te laten voeren is:

NawgegevensTableAdapter.Update(ProfielkeuzesDataSet)

Een TableAdapter kan commando’s voor meerdere datasets bevatten. Vandaar dat bij het Update commando tussen haakjes vermeld staat welke dataset moet worden geüpdate.

En tenslotte moet je de dataset laten weten dat alle aanpassingen inmiddels zijn opgeslagen en dat hij ze niet meer als aanpassingen mag onthouden.

ProfielkeuzesDataSet.AcceptChanges()

Natuurlijk moet je ook nog controleren of het bijwerken gelukt is, en als dat niet zo is, de gebruiker waarschuwen. Dat gaat weer met een Try – Catch – End Try constructie.

1. Genereer een subroutine btnOpslaan_Click door te dubbelklikken op de btnOpslaan knop.

2. Pas de code als volgt aan:

Private Sub btnOpslaan_Click(sender As Object, e As EventArgs) Handles btnOpslaan.Click Try NawgegevensBindingSource.EndEdit() NawgegevensTableAdapter.Update(ProfielkeuzesDataSet) ProfielkeuzesDataSet.AcceptChanges() Catch MsgBox("Het opslaan is niet gelukt.") End Try End Sub

3. Controleer of de code goed werkt en breng eventueel verbeteringen aan.4. Sluit je project.

Hoofdstuk 2

36document.docx

naam: Harry

Hoofdstuk 3 Databases, SQL en databaseontwerp

Dit hoofdstuk gaat over databases en SQL. Je gaat eerst even kijken wat een database is en hoe zo’n database in elkaar zit. Daarna krijg je uitleg over SQL, een taal waarmee je de gegevens in een database kunt selecteren en bewerken. En je gaat al direct praktisch aan de slag met het programma SQLOefenaar, een programma dat je laat oefenen met SQL.

Databases

Tabellen, records en veldenEen database is een verzameling gegevens die op een bepaalde manier zijn geordend. Een voorbeeld van een database is de verzameling gegevens die een school van haar leerlingen heeft. Omdat een database veel verschillende gegevens bevat, zijn die gegevens meestal verdeeld over meerdere tabellen. Zo’n tabel kun je vergelijken met een kaartenbak. Bij een school zouden dit bijvoorbeeld de tabellen leerlinggegevens en profielgegevens kunnen zijn. Tabellen hebben records. Zeg maar kaarten. Zo is er voor elke leerling in de tabel leerlinggegevens een record. En elk record is ten slotte weer opgebouwd uit een aantal velden, zoals naam, adres enzovoort.

Een voorbeeld van een papieren database met één tabel:

Een tabelEen tabel bevat allemaal records met dezelfde soort gegevens. Bijvoorbeeld een bak met kaarten met de leerlinggegevens.

Een recordEen record heeft velden voor de verschillende gegevens.Bijvoorbeeld een kaart met de gegevens van 1 leerling.

Een veldEen veld is een onderdeel van een record waar je 1 gegeven invult.

De meeste databases hebben meer dan 1 tabel en zitten zo in elkaar dat de gegevens in de verschillende tabellen aan elkaar gekoppeld kunnen worden. Kijk maar eens naar de volgende eenvoudige praktijksituatie.

Hoofdstuk 3 37

Een administratie van een school heeft besloten om gegevens van leerlingen in een digitale database te stoppen. In die database komen de NAW-gegevens (Naam, Adres en Woonplaats) van de leerlingen te staan en ook de profielen die de leerlingen volgen met de vakken die bij deze profielen horen. Het moderne voortgezet onderwijs havo/vwo kent in de zogenaamde tweede fase 4 profielen, te weten de profielen Cultuur en Maatschappij, afgekort als CM, Economie en Maatschappij, afgekort als EM, Natuur en Gezondheid, afgekort als NG en Natuur en Techniek, afgekort als NT.

CM heeft de vakken wiskunde, geschiedenis en tekenen.EM heeft de vakken wiskunde, economie en aardrijkskunde.NG heeft de vakken wiskunde, scheikunde en biologie.NT heeft de vakken wiskunde, scheikunde en natuurkunde.

Stel je voor dat de school slechts 6 leerlingen heeft. De administratie zou kunnen besluiten om voor de leerlinggegevens een database met daarin een tabel met de volgende records te gaan maken:

naam: Janprofiel:CMvak1: wiskundevak2: geschiedenisvak3: tekenen

naam: Pietprofiel:EMvak1: wiskundevak2: economievak3: aardrijkskunde

naam: Klaasprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

naam: Nellekeprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

naam: Harryprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

naam: Harry.profiel:EMvak1: wiskundevak2: economievak3: aardrijkskunde

De tabel heeft 5 velden: naam, profiel, vak1, vak2 en vak3.

SleutelveldEr blijken op deze school 2 Harry’s te zijn, gelukkig wel met verschillende profielen. Maar het zou kunnen voorkomen dat er meerdere leerlingen met dezelfde naam hetzelfde profiel hebben. Het wordt dan onmogelijk om ze te onderscheiden. Om alle mogelijke misverstanden te vermijden besluit de administratie aan elke leerling een uniek nummer te koppelen, het zogenaamde id-nummer, een soort Burgerservicenummer. Zo’n veld waar elke waarde uniek moet zijn, heet een sleutelveld. Id is een sleutelveld, want er kunnen niet twee leerlingen zijn met hetzelfde id. De records in de tabel komen er dan als volgt uit te zien:

Hoofdstuk 3 38

id: 1naam: Janprofiel:CMvak1: wiskundevak2: geschiedenisvak3: tekenen

id: 2naam: Pietprofiel:EMvak1: wiskundevak2: economievak3: aardrijkskunde

id:3naam: Klaasprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

id:4naam: Nellekeprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

id: 5naam: Harryprofiel:NTvak1: wiskundevak2: scheikundevak3: natuurkunde

id: 6naam: Harry.profiel:EMvak1: wiskundevak2: economievak3: aardrijkskunde

Hoofdstuk 3 39

Bij 20 leerlingen zouden er nu 20 x 6 = 120 gegevens moeten worden ingevoerd.

id naam profiel vak1 vak2 vak31 Jan CM wiskunde geschiedeni

stekenen

2 Piet EM wiskunde economie aardrijkskunde

3 Klaas NT wiskunde scheikunde natuurkunde4 Nelleke NT wiskunde scheikunde natuurkunde5 Harry NT wiskunde scheikunde natuurkunde6 Harry NG wiskunde scheikunde biologie7 Iwan NT wiskunde scheikunde natuurkunde8 Nelleke CM wiskunde geschiedeni

stekenen

9 Nelleke NT wiskunde scheikunde natuurkunde10 Natasja CM wiskunde geschiedeni

stekenen

11 Alie NT wiskunde scheikunde natuurkunde12 Jaap CM wiskunde geschiedeni

stekenen

13 Erik NG wiskunde scheikunde biologie14 Erica NG wiskunde scheikunde biologie15 Ali EM wiskunde economie aardrijkskund

e16 Kees EM wiskunde economie aardrijkskund

e17 Jens CM wiskunde geschiedeni

stekenen

18 Karel CM wiskunde geschiedenis

tekenen

19 Alexia EM wiskunde economie aardrijkskunde

20 Asma CM wiskunde geschiedenis

tekenen

Gegevens verdelen over meerdere tabellenAls je even kritisch kijkt zie je dat aan een profiel telkens dezelfde vakken gekoppeld zijn. Dat is telkens dezelfde informatie en die is dus overbodig. Het ontwerp wordt beter wanneer je de gegevens verdeelt over twee tabellen. Deze tabellen worden door één gemeenschappelijk veld gekoppeld. Het veld waarmee je de tabellen gaat koppelen is profiel. Er ontstaan nu twee tabellen, de ene tabel noemen je leerlingen en de andere tabel noemen je profielen. Ze zien er als volgt uit.

Hoofdstuk 3 40

De tabel leerlingen

id naam profiel1 Jan CM2 Piet EM3 Klaas NT4 Nelleke NT5 Harry NT6 Harry NG7 Iwan NT8 Nelleke CM9 Nelleke NT10 Natasja CM11 Alie NT12 Jaap CM13 Erik NG14 Erica NG15 Ali EM16 Kees EM17 Jens CM18 Karel CM19 Alexia EM20 Asma CM

En de tabel profielen.

profiel vak1 vak2 vak3CM wiskunde geschiedenis tekenenEM wiskunde economie aardrijkskundeNG wiskunde scheikunde biologieNT wiskunde scheikunde natuurkunde

Door de oorspronkelijke tabel te splitsen hoef je nog maar 3x20 + 4x4 = 76 gegevens in te voeren. Bij duizenden leerlingen wordt de winst nog veel groter. En als je later een wijziging in de samenstelling van een profiel wilt doorvoeren, wil je die niet in honderden records doen, maar in slechts 1.

Hoofdstuk 3 41

Tabellen koppelenAls je wilt weten welke vakken leerling Kees heeft, moet je in de tabel leerlingen opzoeken welk profiel Kees heeft en vervolgens in de tabel profielen de vakken aflezen die bij dat profiel horen.

id naam profiel1 Jan CM2 Piet EM3 Klaas NT4 Nelleke NT5 Harry NT6 Harry NG7 Iwan NT8 Nelleke CM9 Nelleke NT10 Natasja CM11 Alie NT12 Jaap CM13 Erik NG14 Erica NG15 Ali EM16 Kees EM17 Jens CM18 Karel CM19 Alexia EM20 Asma CM

Relaties en relationele databaseEr is dus een relatie tussen het veld profiel in de tabel leerlingen en het veld profiel in de tabel profielen.

De tabellen en de relaties tussen de velden kun je tonen in een zogenaamd strokendiagram:

leerlingen

profielen

In het bovenstaande strokendiagram staat links de naam van de tabel. Van elke tabel wordt het sleutelveld aangegeven door middel van een horizontale pijl met dubbele kop. De relatie tussen de velden in de twee tabellen wordt aangeduid door de andere pijl.Zo’n database waarin er relaties bestaan tussen tabellen heet een relationele database.

Hoofdstuk 3 42

profiel vak1 vak2 vak3CM wiskunde geschiedenis tekenenEM wiskunde economie aardrijkskundeNG wiskunde scheikunde biologieNT wiskunde scheikunde natuurkunde

id naam profiel

profiel vak1 vak2 vak3

Tot zover de uitleg over hoe de gegevens in een database zijn georganiseerd.

Werken met Access

Een nieuwe database makenJe kunt heel gemakkelijk een database met een tabel aanmaken in ACCESS 2016.

1. Start ACCESS en kies voor Lege database.

Nu verschijnt er een scherm waarin je de naam van de

database moet opgeven.

1. Vul bij bestandsnaam keuzepakket.accdb in.2. Klik op Maken.

Het gemaakte bestand wordt in de map C:\Users\...\Documents opgeslagen onder de naam keuzepakket.accdb. Op de puntjes staat natuurlijk de naam van de ingelogde gebruiker van de computer. De extensie accdb is natuurlijk een afkorting van accesdatabase. Oudere versies van Acces hadden de extensie mdb.

Hoofdstuk 3 43

Een tabel maken1. Klik bij linksboven op Weergave - Ontwerpweergave.2. Vul in het scherm Opslaan als bij Tabelnaam leerlingen in.3. Klik op OK.

Je ziet dat het eerste veld van de tabel al automatisch is aangemaakt. Het heet Id, en heeft als gegevenstype AutoNummering.

Links naast het veld id staat een sleuteltje. Deze sleutel geeft aan dat het gegeven dat je invoert in dit veld uniek moet zijn. Daarnaast is er een eis dat er altijd iets moet worden ingevuld, een leeg veld kun je niet aanmaken.

4. Vul bij het volgende veld naam in en selecteer gegevenstype Korte tekst.5. Vul je bij het laatste veld profiel in en selecteer gegevenstype Korte tekst.

Het geheel ziet er als volgt uit:

Je hebt nog een tabel nodig.

1. Klik bovenin op de tab Maken – tabel.2. Klik op Weergaven – Ontwerpweergave.3. Geeft de tabel de naam profielen – OK.4. Geef de velden de namen profiel, vak1, vak2 en vak3.5. Maak Gegevenstype van alle velden Korte tekst.6. Selecteer het veld profiel en klik op het icoon Primaire sleutel.

Het veld profiel is nu het primaire sleutelveld van de tabel.

Het geheel ziet er als volgt uit:

Hoofdstuk 3 44

Tabellen vullen met gegevensJe gaat nu gegevens invullen in de velden van de tabel profielen.

1. Klik op Weergave – Gegevensbladweergave.2. Sla de tabel desgevraagd op.3. Vul nu de volgende gegevens in:

Ook in de tabel leerlingen moet wat ingevuld worden.

1. Selecteer de tabel leerlingen en klik op Weergave - Gegevensbladweergave.

2. Sla de tabel desgevraagd op.3. Vul nu de volgende gegevens in:

Hoofdstuk 3 45

Je hebt nu een database keuzepakket.accdb aangemaakt die twee tabellen genaamd leerlingen en profielen bevat.

Structured Query Language - SQL

Eenvoudige query’sWanneer een database veel gegevens bevat wordt het lastig om het overzicht te houden. Met behulp van de ‘vraagtaal’ Structured Query Language, afgekort SQL, kun je gegevens uit de tabellen selecteren en veranderen. De twee belangrijkste mogelijkheden van SQL zijn;

gegevens selecteren. Je vraagt de gegevens op die je op dat moment wilt zien. gegevens veranderen. Je kunt gegevens aan je database toevoegen, de gegevens

wijzigen of ze uit de database verwijderen.

SELECT … FROM … WHERESQL is een taal met een vaste structuur. De structuur voor het opvragen van gegevens uit de database is als volgt:

SELECT welke velden wil je zien? FROM in welke tabel(len) wil je zoeken?WHERE aan welke criteria moeten de gegevens voldoen?

Hoofdstuk 3 46

Zo’n stukje SQL als hierboven heet een query. Een voorbeeld:

Query 1Je wilt weten welk profiel leerling Kees heeft. De query die de juiste gegevens selecteert is dan:

SELECT profielFROM leerlingenWHERE naam=’Kees’

En je krijgt als resultaat:EM

Query 2En wanneer je wilt weten welke profielen de leerlingen met de voornaam Harry hebben wordt de query:

SELECT profielFROM leerlingenWHERE naam=’Harry’

Met als resultaat de lijst:NGNT

Query 3Je kunt ook gegevens uit meerdere velden selecteren. Kijk maar eens naar de volgende query.

SELECT id, naam, profielFROM leerlingenWHERE naam=’Harry’

Het resultaat is nu:5 Harry NT6 Harry NG

Query 4Met een sterretje geef je aan dat je alle velden opvraagt. Het * teken kun je zien als een soort joker teken. Bij het kaartspel jokeren mag je de joker ook als iedere andere kaart gebruiken.

SELECT *FROM leerlingenWHERE naam=’Harry’

Deze query retourneert (=selecteert) alle velden in de tabel leerlingen van iedereen die de naam ‘Harry’ heeft. De uitkomst is dezelfde als bij de vorige query.

Hoofdstuk 3 47

Er zijn kennelijk twee leerlingen met de naam Harry die een verschillend profiel hebben.

Query 5Zou je de gehele tabel, dus alle velden van iedereen in de tabel leerlingen willen opvragen, dan gebruik je de query:

SELECT *FROM leerlingen

Oefenen met SQLOefenaarGesnapt? Of toch nog even oefenen? Bij dit hoofdstuk hoort een programma genaamd SQLOefenaar waarmee je de query’s in dit hoofdstuk kunt oefenen.

Je vindt het bestand SQLOefenaar.exe en de bijbehorende database keuzepakket.accdb in de map waarin je de andere bij dit boek behorende bestanden hebt gezet. Als je de instructies in hoofdstuk 1 gevolgd hebt, is dit C:\Users\...\Documents\vbmetdatabases2015community.

1. Ga met de verkenner naar C:\Users\...\Documents\vbmetdatabases2015community en dubbelklik op SQLOefenaar.exe.

2. Kik op de knop Laad database en selecteer in map C:\Users\...\Documents\vbmetdatabases2015community de database keuzepakket.accdb.

3. Klik op de knop Voer query uit.

Je ziet het onderstaande:

Je ziet links in beeld een aantal selectievakjes en comboboxen om een query mee samen te stellen. Zodra je op de knop ‘Voer de query uit’ klikt, zie je in het tekstvak eronder de tekst van de query zoals jij die hebt samengesteld, en verschijnt in het datagrid rechts het resultaat van de query. In de tekstvakken daaronder zie de gegevens van het eerste record van de opgehaalde records.

Hoofdstuk 3 48

1. Voer de query’s die hiervoor staan uit en kijk naar de resultaten.

Iets uitgebreidere query’s

ORDER BYMaar met query’s kun je veel meer. Wanneer je de gegevens die je ophaalt alfabetisch wilt sorteren op de inhoud van het veld id, gebruik dan ORDER BY:

SELECT id, naam, profielFROM leerlingenWHERE naam= ‘Harry”ORDER BY id ASC

ASC sorteert de opgehaalde gegevens in opklimmende volgorde, DESC in aflopende volgorde.

1. Oefen deze en de volgende query’s met de SQLOefenaar

In plaats van het veld te noemen mag je ook het nummer van het veld aangeven.

SELECT id, naam, profielFROM leerlingenORDER BY 2 ASC

Deze query laat de id, namen en profielen van de leerlingen in opklimmende volgorde zien, gesorteerd naar het tweede geselecteerde veld, naam.

DISTINCTDe namen Harry en Nelleke komen meerdere keren voor. Om vaker voorkomende items slechts 1 keer te tonen gebruik je DISTINCT. De query voor een lijst met alle namen, 1 keer getoond en oplopend alfabetisch gesorteerd luidt:

SELECT DISTINCT naamFROM leerlingenORDER BY naam ASC

(Als je dit probeert in de SQLOefenaar, vervang je naam door 1; het nummer van het veld naam.)

Je hebt nu geoefend met een aantal woorden van SQL; SELECT, FROM, WHERE, ORDER BY, ASC, DESC en DISTINCT. Met deze woorden kun je lijsten gegevens opvragen uit één tabel. Maar zoals al eerder gezegd zitten bij elkaar horende gegevens meestal verspreid over meerdere tabellen.

Het koppelen van de tabellen in SQL.Vaak wil je gegevens uit meerdere tabellen combineren. Zo wil je bijvoorbeeld weten welke vakken horen bij het profiel dat Kees volgt. Wanneer je gegevens uit de meerdere tabellen wilt opvragen moet je een koppeling tussen de beide tabellen aanbrengen.

Hoofdstuk 3 49

Achter SELECT vermeld je zoals gewoonlijk de namen van de velden die je wilt zien. Let op! Omdat in beide tabellen het veld profiel voorkomt, moet je vermelden van welke tabel je het veld profiel wilt zien. Wanneer je het veld profiel uit de tabel leerlingen wilt zien, en dus niet het veld profiel uit de tabel profielen, schrijf je: leerlingen.profiel. Dus:

SELECT id, naam, leerlingen.profiel, vak1, vak2, vak3

Achter FROM vermeld je welke velden van welke tabellen je aan elkaar wilt koppelen. Dit gaat met het INNER JOIN … ON commando. De syntaxis van dit commando is als volgt:

FROM tabel1 INNER JOIN tabel2 ON tabel1.veld = tabel2.veld. Ofwel:

FROM profielen INNER JOIN leerlingen ON profielen.profiel = leerlingen.profiel

De hele query is dan:

SELECT id, naam, leerlingen.profiel, vak1, vak2, vak3FROM profielen INNER JOIN leerlingen ON profielen.profiel = leerlingen.profielWHERE naam = ‘Kees’

Het resultaat is een overzicht van het id, de naam, het profiel en de 3 bijbehorende vakken, keurig bij elkaar gezocht uit beide tabellen.

OefeningenMaak query’s die als resultaat precies die gegevens tonen die je nodig hebt om de volgende vragen te kunnen beantwoorden.

1. Welke vakken komen voor in het profiel CM ?2. Welke profielen bestaan er waarvan het eerste vak wiskunde is ?3. Welk profiel heeft als derde vak natuurkunde ?4. Laat de profielen gerangschikt zien.5. Laat alle profielen en vakken zien waarbij vak1 wiskunde is en rangschik naar

vak3.6. Laat vak1 en vak 3 zien van het profiel NG.7. Laat vak 1 en vak 2 zien van het profiel EM.

Hoofdstuk 3 50

Een Query in Microsoft ACCESS 2016 maken

In het begin van dit hoofdstuk hebben we een tabel leerlingen en profielen aangemaakt in ACCESS. Deze twee tabellen gaan we nu gebruiken om query´s mee uit te voeren.Je kunt in ACCESS nu ook gemakkelijk een Query maken. Dit gaat als volgt:

1. Start ACCESS.2. Open in C:\Users\...\Documents\vbmetdatabases2015community de

database keuzepakket.accdb.

Bij het openen van de database keuzepakket.accdb krijg je vaak de volgende mededeling op het scherm:

Klik dan op inhoud inschakelen en de waarschuwing zal verdwijnen.

1. Kies Maken - Queryontwerp.

Hoofdstuk 3 51

2. Selecteer de tabel leerlingen – toevoegen3. Selecteer de tabel profielen - toevoegen - sluiten.

Je ziet nu op het scherm de relatie in de vorm van een streepje die beide tabellen met elkaar verbindt via het veld profiel.

4. Klik op Sluiten.5. Kies Weergave. 6. Kies de optie SQL.

Je ziet dan de volgende Query verschijnen:

SELECT

Hoofdstuk 3 52

FROM leerlingen INNER JOIN profielen On leerlingen.profiel=profielen.profiel

Deze query kun je aanpassen. We gaan dat als voorbeeld 1 keer doen.

1. Vul de volgende query in:SELECT naam,vak1,vak2,vak3FROM leerlingen,profielenWHERE leerlingen.profiel=profielen.profiel;

(Een query in ACCESS eindigt altijd op ; )

Klik vervolgens linksboven op ´het rode uitroepteken.Vervolgens zie je het resultaat van de query verschijnen.

Je ziet het resultaat van de query. Maak zelf maar eens een paar query’s in het scherm SQL en kijk dan in het scherm Gegevensbladweergave naar het resultaat.

Hoofdstuk 3 53

Een database ontwerpenHoe ontwerp je nu eigenlijk een database? Daar gaan we het in dit hoofdstuk over hebben. We willen een eenvoudige database van een winkel maken.Wanneer je erover nadenkt kun je direct de twee belangrijkste tabellen van een winkel bedenken. Een winkel kent namelijk producten, ook wel artikelen genoemd, en deze producten worden gekocht door klanten. We gaan uit van deze twee tabellen; producten en klanten.Daarna bedenken we wat we van de klanten willen weten. Het eerste wat in ons opkomt is dat we de NAW-gegevens van de klanten willen opnemen in de tabel klanten. Nog belangrijker is dat elke klant een uniek gegeven heeft. Dit is nodig om onomstotelijk vast te kunnen stellen dat het om de klant gaat die we bedoelen. Je zou kunnen denken dat de naam hiervoor geschikt is, maar er blijken meerdere personen in Nederland te wonen met dezelfde achternaam en zelfs ook nog dezelfde voornaam. In het dagelijks leven krijgt iedereen van de overheid een zogenaamd Burgerservicenummer. Vroeger werd dit een sofinummer genoemd. In databaseland hebben we het vaak over een id, daarom nemen we in de tabel klanten een veld klantid op. Dit klantid is een zogenaamd sleutelveld. Zoals al eerder in dit hoofdstuk gezegd heeft een sleutelveld twee belangrijke eigenschappen. De inhoud van het veld moet uniek zijn en het mag niet leeg zijn. De informaticatermen hiervoor zijn uniciteitsbeperking (het moet uniek zijn) en totaliteitsbeperking (het moet worden ingevuld).Met de eerdergenoemde NAW-gegevens worden de velden Naam Adres en Woonplaats met postcode bedoeld.Bovendien wil je graag een emailadres en eventueel een telefoonnummer of een mobielnummer van je klanten in je tabel opnemen. Je kunt ook nog opnemen of een klant in aanmerking komt voor een korting. Hij of zij moet dan wel een klantenkaart hebben.

De tabel klanten ziet er nu als volgt uit:

klantenVeld Datatype (gegevenstype)klantid (sleutelveld) Autonumeriekadres Korte tekstwoonplaats Korte tekstpostcode Korte tekstemailadres Korte tekstmobiel Korte tekstklantenkaart Boolean (Ja/Nee)

Hoofdstuk 3 54

De tabel artikelen ziet er als volgt uit:

artikelenVeld Datatype (gegevenstype)artikelid (sleutelveld) Autonumeriekprijs Doublenaam Text

Wat is nu de relatie tussen deze twee tabellen Klanten en Artikelen?Wanneer je daar wat langer over nadenkt kun je het volgende opmerken:Bij 1 klant horen meerdere artikelen. Het is duidelijk dat 1 klant meerdere artikelen kan kopen. Omgekeerd geldt ook bij 1 artikel horen meerdere klanten. Een bepaald artikel kan immers door meerdere klanten worden aangeschaft.Zo´n relatie heet ook wel een één-op-veel relatie en wordt aangeduid met 1 ∞ Maar tussen de tabellen artikelen en klanten zitten twee één-op-veel relaties. Zo’n wederzijdse één-op-veel relatie heet een veel-op-veel relatie.Zo’n relatie mag niet in een relationele database. Daar moet dus iets aan gebeuren.

Daarom maken we een derde tabel; een zogenaamde koppeltabel. Deze bevat de sleutelvelden van de twee andere tabellen en een eigen sleutelveld.Deze koppeltabel ziet er als volgt uit.

1. Open de database keuzepakket.accdb die je eerder in dit hoofdstuk hebt gemaakt. Hij staat in C:\Users\...\Documents.

2. Maak de onderstaande tabel:

bestellingenVeld Datatype (gegevenstype)bestellingid (sleutelveld) Autonumeriekklantid Numeriekartikelid Numeriek

In het tabblad ‘Hulpmiddelen voor databases’ kun je als je Relaties selecteert de 3 tabellen en hun relaties toevoegen.

3. Kies in het tabblad Hulpmiddelen voor databases de optie Relaties.4. Voeg de 3 tabellen toe.

Hoofdstuk 3 55

5. Sleep met de muis van klantid(klanten) naar klantid(bestellingen)

Het volgende scherm verschijnt:

6. Vink Referentiële integriteit afdwingen aan en klik op Maken.7. Doe hetzelfde voor artikelid uit de tabel artikelen en uit de tabel bestellingen.

De relatie ligt dan vast en access zal bij SQL-opdrachten zelf de inner joins vermelden.

Mocht dit niet lukken, open dan in de map C:\Users\...\Documents\vbmetdatabases2015community de database winkel.accdb in de map om te kijken hoe het zou moeten.

Hoofdstuk 3 56

Hoofdstuk 4 .NET framework, namespaces en resourcesInleiding In dit hoofdstuk komen het .Net framework, de zogenaamde naamruimtes, misschien beter onvertaald namespaces, en de resources aan de orde. Het hoofdstuk begint met wat uitleg en eindigt met een project waarin je interfaces, een database, afbeeldingen en geluidsbestanden integreert, een soort van jukebox.

Het .NET (dotNET) frameworkDe veranderingen van Visual Basic 6.0 naar Visual Basic.NET 2003 waren enorm. Tot aan VB 6.0 was het steeds mogelijk om code uit voorgaande versies te blijven gebruiken in de nieuwere versie. Sinds de overgang van VB 6.0 naar VB.NET 2003 is dat niet meer zo. Dat wil zeggen dat vanaf VB.NET 2003 het niet meer mogelijk is code van versie 6.0 of ouder in nieuwe projecten te gebruiken. Wel werkt code van 2003 of nieuwer weer in nieuwere versies. De reden is dat het framework, een onderdeel van het besturingssysteem, waarop je de code runt is veranderd.

Het .NET Framework levert services om Windowsapplicaties te draaien. Heb je eenmaal een applicatie geschreven in Visual Basic.NET dan kun je het exe bestand van dit programma draaien op elke computer waarop het bij je applicatie behorende framework is geïnstalleerd. Je hoeft niet, zoals vroeger in Visual Basic 6.0, nog allerlei systeembestanden bij te leveren.

Vanaf Visual Basic.NET 2003, met framework 1.1, is Visual Basic echt object-georiënteerd. Er wordt nu ook met klassen gewerkt. En vanaf versie 3.5 biedt het .NET framewerk ook de mogelijkheid om in je programma’s met XML-bestanden te werken. XML is een formaat om gestructureerde data in een tekstbestand op te slaan.

Een kort overzicht van de VB-versies en de bijbehorende frameworks:

Versie framework installatiebestand

Visual Basic 6 geen frameworkVisual Basic.NET 2003 Framework 1.1 dotnexfix 1.1Visual Basic.NET 2005 Framework 2.0 dotnexfix 2.0Visual Basic.NET 2008 Framework 3.5 dotnexfix 3.5Visual Basic.NET 2010 Framework 4.0 dotnexfix 4Visual Basic.NET 2015 Framework 4.1-4.6 dotnexfix 4

Common Language Runtime (CLR)The CLR is de basis van het framework. Het zorgt ervoor dat vanuit verschillende programmeertalen de functies van het framework kunnen worden aangeroepen. Vandaag de dag zijn er vele programmeertalen die door het framework worden ondersteund, zoals Visual Basic, C# e.d. Ook zorgt het voor foutafhandeling en voor geheugenbeheer.

Data en XMLHet framework zorgt ook voor de verbinding tussen je programma en databases. Denk aan Access en SQL-databases, maar ook aan XML-bestanden.

Hoofdstuk 4 57

Base Class LibrariesHet .NET framework bevat een groot aantal hiërarchisch geordende klassen die samen de Base Class Libraries (BCL) worden genoemd. Deze klassen of classes zijn een verzameling object-georiënteerde objecten die benaderd kunnen worden vanuit elke .NET taal.

Een klasse is een soort sjabloon. Denk maar aan het Tools-tabblad dat allerlei klassen toont, zoals knop, label en tekstvak. Als je een dergelijk object, bij voorbeeld een knop, op het formulier plaatst, maak je een instantie (afdruk) van de klasse knop. Deze instanties hebben eigenschappen, zoals text en size. En sommige klassen hebben ook methoden. Een methode is een actie die een instantie van een klasse kan uitvoeren.

Zo’n instantie van een standaardklasse kun je direct benaderen. Je kunt tijdens het bouwen van je project, of tijdens het uitvoeren van je programma de eigenschappen van een instantie veranderen. En tijdens het uitvoeren van je programma kun je de methoden van een instantie aanroepen om het bepaalde dingen te laten doen. Hoe dat gaat zie je later.

NamespacesDe BCL is onderverdeeld in een aantal grote klassen, zoals web classes, Data classes, Windows Forms classes, XML-classes en System classes. Aan de naam van de klasse kun je zien wat de functionaliteit van de klasse is. Een aantal van deze klassen hebben weer kleinere subklassen. Zo’n superklasse met veel subklassen heet een namespace. Een voorbeeld hiervan is de klasse System.Data met onder andere de volgende subklassen. System.Data.Common System.Data.OLEDB System.Data.SQLClient

Deze klassen gebruik je wanneer je gebruik maakt van ADO.NET, een techniek om gegevens in databases te benaderen.

Andere namespaces zijn:

Namespace Bevat klassen die ondersteuning bieden bij:

System.Drawing Het maken van eenvoudige tekeningen. System.IO Het werken met files en data streams. System.Text Tekstbewerking. System.Web Het werken met ASP.NET System.Linq Het werken met datasources (nieuw in .NET 3.5) System.Data.OLEDB Het werken met ADO.NET, werken met access System.Data.ODBC Het werken met ODBC-drivers. System.Data.SQLClient Het werken met SQLserver.Wanneer je met een Access database werkt gebruik je: OleDBConnection OleDBCommand OleDBDataReader OleDBDataAdapterOleDB staat voor Object linking and embedding Database

Hoofdstuk 4 58

Wanneer je met de database SQLserver werkt gebruik je SQLConnection SQLCommand SQLDataReader SQLDataAdapter

SQL staat voor Structured Query Language (zie hoofdstuk 3)

Standaard heeft een VB.NET project al toegang tot een groot aantal klassen. Maar er zijn nog veel meer klassen. Deze zijn niet allemaal direct aanspreekbaar. Alleen de klassen waarvan de namespace (superklasse) standaard onderdeel is van een project kun je direct aanspreken. Als je een klasse uit een andere namespace wilt gebruiken moet je de naam van de betreffende namespace ervoor zetten, b.v. OleDb.OleDbCommand.

Imports statementsAls je klassen wilt gaan gebruiken waarvan de namespace niet standaard onderdeel is van je project, en je niet telkens de naam van de namespace wilt typen, is het handig om de namespace te importeren in je project. Dit doe je met imports statements. Imports statements geven de compiler aan welke namespaces in de code zullen worden gebruikt. Imports statements worden helemaal aan het begin van de code van een programma toegevoegd. Een voorbeeld is:

Imports System.Data.OleDb

Wanneer de namespace eenmaal is geïmporteerd is het dus niet langer nodig de namespace van een klasse te vermelden.

Dim commando As New OleDb.OleDbCommand

wordt nu gewoon:

Dim commando As New OleDbCommand

Wanneer je bovenaan je project een imports regel toevoegt zul je merken dat je na het intypen van imports system. een groot aantal mogelijkheden te zien krijgt. Dit zijn de namespaces die je kunt importeren. Het is zelfs zo dat je je eigen namespaces kunt maken en in volgende projecten steeds opnieuw kunt gebruiken.

Verderop in dit boek kom je in projecten voorbeelden van imports tegen.

Namespaces in webapplicatiesOok bij het maken van webapplicaties kun je namespaces toevoegen aan je project. Je gebruikt dan het web.config file van je webapplicatie om de benodigde namespaces toe te voegen. Een namespace die in het web.config file wordt genoemd hoeft niet nog elders in het project te worden toegevoegd. De toevoeging geldt voor het hele project.

Hoofdstuk 4 59

Bekijk te zijner tijd maar eens dat file en je zult het volgende zien:

<pages> <namespaces> <clear/> <add namespace=”System”/> <add namespace=”System.Collections”/>… </namespaces>

</pages>

ResourcesBij het maken van een databound project maak je gebruik van een database en mogelijk van andere bronnen, zoals afbeeldingen, geluidsbestanden en dergelijke. Om het geheel van bestanden overzichtelijk te houden is het aan te raden om deze bronbestanden in een aparte map van je project op te slaan. Deze map heet Resources.

Een bijkomend voordeel van het bewaren van de bronbestanden in de map Resources is, dat je, wanneer je project straks klaar is en je een setup wilt gaan maken, je alle bestanden in de Resources map in 1 keer aan de setup kunt laten toevoegen.

In het volgende project ga je leren hoe je de bronbestanden van je project in de map Resources plaatst.

1. Start Visual Studio en maak een nieuw Windows Forms Application project genaamd Muziek.

2. Sla het project op op de standaard locatie. (C:\Gebruikers\...\Documenten\Visual Studio 2015\Projects).

3. Rechtsklik in de Solution Explorer (rechtsboven) op My Project – Open.4. Klik op het tabblad Resources.5. Klik op het pijltje naast Add Resource – Add Existing file.6. Ga in de verkenner naar C:\Users\...\Documents\

vbmetdatabases2015community.7. Selecteer de 8 bestanden die beginnen met de namen van de beroemde

componisten Bach, Beethoven, Mozart en Vivaldi en de database muziekdatabase.accdb. (Houd de ctrl-knop ingedrukt tijdens het selecteren)

Als je deze bestanden niet allemaal ziet, verander dan eerst onder in het scherm de te tonen bestanden in All files.

8. Klik op Openen.

De bestanden worden gekopieerd naar de map Resources. Je ziet ze in de Solution Explorer in de map Resources en je kunt ze nu gebruiken.

1. Ga naar het design view van Form1.2. Open in de Toolbox de tab Data.3. Plaats een DataGridView op je form.4. Klik op het kleine pijltje rechtsboven op het DataGridView.

Hoofdstuk 4 60

5. Klik achter Choose Data Source op de pijl naar beneden - Add Project Data Source.

Op het volgende scherm is de database geselecteerd. Dat is prima want je wilt een database aan het DataGridView koppelen. 6. Klik op Next.

Op het volgende scherm is dataset geselecteerd. Ook dat is prima want je wilt de op te halen gegevens bewaren in een dataset. 7. Klik op Next.8. Kies in het volgende scherm voor de connection muziekdatabase.accdb.

Wanneer je de connection string uitklapt (expand) zie je dat deze verwijst naar de map Resources.

9. Klik op Next - Next.10.Vink in het scherm dat dan verschijnt Tables aan.11.Klik dan op Finish.

Onderaan de design mode van het form staan nu de objecten MuziekDatabase DataSet, MuziekBindingSource en MuziekTableAdapter. In de Solution Explorer zie je ook de dataset muziekdatabaseDataSet.xsd.Je ziet al direct de kopjes van de velden van de tabel in het DataGridView verschijnen. Het DataGridView zit vast aan de gegevens (de database).

Hoofdstuk 4 61

Om allerlei problemen met de bestanden in de map Resources te voorkomen moet je nog iets aanpassen in de eigenschappen van elk van deze bestanden.

Wanneer je bij Build Action de eigenschap op Content zet worden de bestanden gekopieerd naar de doelcomputer wanneer je een setup maakt.Wanneer je bij Build Action kiest voor none dan vertel je VB.net de uitkomst van de code te negeren maar alleen maar het bestand te kopiëren.

Dus de volgende eigenschappen betekenen:None – Het bestand wordt niet meegenomen en niet gecompileerd in het build proces, niet in de Project Output Group gezet en niet gecompileerd in het build process. Een voorbeeld is een tekst bestand dat documentatie bevat, zoals een Readme file.Content – Het bestand wordt niet gecompileerd, maar wordt wel gezet in de Content Output Group.

Bij de eigenschap Copy to Output Directory heb je ook meerdere mogelijkheden om aan te geven of het bronbestand wel of niet naar de outputdirectory wordt gekopieerd :Do not copy in dit geval wordt het bestand nooit van originele locatie naar de output directory gekopieerd.Copy always in dit geval wordt het bestand altijd gekopieerd.Copy if newer in dit geval wordt het bestand slechts gekopieerd als het nieuwer is dan het bestaande bestand.

12.Selecteer in de Solution Explorer alle bestanden in de map Resources.13.Zet rechtsonder in het tabblad Properties de eigenschap Build Action op

Content en de eigenschap Copy to Output Directory op Copy Always.14.Sla je project op met behulp van de Save All knop of via File – Save all.

Dan nu de interface.

1. Klik linksboven op de tab Form1.vb.2. Sleep vanuit de Toolbox twee knoppen en een PictureBox op het formulier.3. Stel de volgende Text waarden in: button1: Speel af, button2: Toon.4. Zet de eigenschap SizeMode van picturebox1 op Autosize.

Dit laatste zorgt ervoor dat de picturebox zich aanpast aan de geladen afbeelding.

De gebruiker van je programma gaat straks in het DataGridView 1 van de componisten kiezen. Hij selecteert eerst de naam van de gewenste componist. Daarna kiest hij met een klik op een van de knoppen of er een .wav-bestand met muziek van de componist wordt afgespeeld of dat er een afbeelding van de gekozen componist wordt getoond.

Dan nu de code onder de knoppen.

Hoofdstuk 4 62

Plaatjes laden in runtimeEen afbeelding laden in een picturebox gaat als volgt:

Picturebox1.Image = Image.FromFile(…)

Op de puntjes staan dan het pad naar het bestand en de bestandsnaam.Dus als je het bestand beethoven.jpg in de map Resources wilt laden, dan is de code:Picturebox1.Image = Image.FromFile(“Resources\beethoven.jpg”)

Maar je wilt niet altijd het bestand van Beethoven zien. Je wilt het laten afhangen van welke componist gekozen is in het datagridview. De code om de inhoud van een geselecteerde cel in een datagridview op te halen is:

DataGridView1.SelectedCells.Item(0).Value.ToString()

Met de methode DatagridView1.SelectedCells.Item(0).Value.ToString wordt de naam van het bestand uit het datagridview gelezen en wel uit de eerste kolom (Item(0)) van de rij die geselecteerd is. Deze naam wordt gebruikt door de resourceManager Omdat deze een object verwacht en niet bijvoorbeeld een string gebruiken we de methode GetObject. Het plaatje wordt dus als string uitgelezen uit de dataset en als object opgezocht in de map resources. (Je mag dus ook de extensie jpg niet gebruiken.)

PictureBox1.Image = My.Resources.ResourceManager.GetObject(DataGridView1.SelectedCells.Item(0).Value.ToString())

1. Dubbelklik op de knop Toon en voeg aan de eventhandler de volgende code toe:PictureBox1.Image = My.Resources.ResourceManager.GetObject(DataGridView1.SelectedCells.Item(0).Value.ToString())

2. Start je project.3. Selecteer een rij in het datagridview door in het datagridview in het grijze

hokje links naast de rij te klikken.4. Klik op de Toon-knop.

Je ziet een afbeelding van de geselecteerde componist.

5. Sluit je programma.

.wav-bestanden afspelenEn dan de muziek.We doen het nu net even iets anders dan bij de code van de afbeelding. Eerst zetten we de inhoud van de tweede kolom ((item(1))van de gekozen rij in de variabele filename. En deze variabele gebruiken we dan om aan te geven welk .wav bestand er afgespeeld moet worden.

Hoofdstuk 4 63

1. Pas de code onder de knop Speel af als volgt aan.

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click Dim filename As String filename = DataGridView1.SelectedCells.Item(1).Value.ToString() My.Computer.Audio.Play(My.Resources.ResourceManager.GetObject(filename), AudioPlayMode.Background)End Sub

AudioPlayMode.Background geeft aan dat er geen mediaspeler zichtbaar is.

2. Start je programma.3. Selecteer een rij.4. Klik op de knop Speel af.

De mediaplayer wordt gestart en speelt een wav bestand.

Hoofdstuk 4 64

Hoofdstuk 5 Databound objectenIn dit hoofdstuk ga je een Windows interface (form) maken waarop veel objecten gegevens uit een database tonen. De meeste van deze objecten kun je niet alleen op een Windows form gebruiken, maar net zo goed op een webpagina. In het hoofdstuk over het maken van een databound webapplicatie leer je nog enkele objecten kennen die specifiek voor een webpagina zijn. Je gebruikt in dit hoofdstuk objecten die je al eerder gezien hebt, zoals een form, tekstvakken, labels, knoppen, verschillende soorten keuzelijsten en een datagridview, maar ook objecten die waarschijnlijk nieuw voor je zijn, zoals een afbeeldingvak, een maskedtextbox, een datetimepicker, een monthcalender object en het tooltip object. Je leert hoe je de properties (eigenschappen) van de objecten instelt, zowel via het scherm properties als via code en welke events (gebeurtenissen) de objecten hebben. Ook leer je een aantal handige trucs om je interface op te maken.

In hoofdstuk 1 heb je een interface met data gebonden objecten gegenereerd met een wizard. Hoewel de resulterende interface alle nodige gegevens toont, is het resultaat toch niet echt geweldig. Wanneer je zelf een interface maakt, kun je hem maken precies zoals je hem hebben wilt. En verder staan je, wanneer de interface zelf maakt, meer objecten ter beschikking dan wanneer je een wizard gebruikt. Je gaat in dit hoofdstuk de verschillende objecten stuk voor stuk langs en kijkt naar hun properties en naar een aantal van de events die de objecten hebben. Ook oefen je met manieren om objecten makkelijk op de goede plek op het form te krijgen.

Voorbereiding1. Start Visual Studio en maak een nieuw Visual Basic Windows Forms

Application project genaamd interface.2. Pas eventueel de locatie aan naar: C:\Users\...\Documents\Visual Studio

2015\Projects.

Objecten plaatsen en objecteigenschappen

FormsDe belangrijkste objecten van je project zijn de forms (formulieren). Deze bevatten alle andere objecten. Een form kan op verschillende manieren worden aangepast om het precies zo te krijgen als je wilt. Allereerst pas je natuurlijk de naam van het form aan zodat deze weergeeft welke functie het form binnen je programma heeft. Dit hernoemen van een form doe je direct nadat je het form hebt gemaakt. Vooral als je met veel verschillende forms binnen je project werkt is het belangrijk de forms logische namen te geven. frmAanmeldingen is immers veel duidelijker dan Form7.

Tijdelijk probleemIn de huidige versie van Visual Studio 2015 ontstaat er een fout wanneer je de form naam aanpast en daarna het project opstart. Deze fout is bij Microsoft bekend. Hopelijk zal dit bij de volgende update van Visual Studio worden opgelost. Als de onderstaande naamswijziging problemen oplevert, verander dan de naam van het form weer terug naar Form1.

Hoofdstuk 5 65

1. Selecteer Form1 en verander de waarde van de property Name in frmInterface.

2. Start je project.3. Sluit je project.

De volgende stap is het aanpassen van de titel van het form. Zo kan de gebruiker zien in welk form hij of zij bezig is.

1. Selecteer het form en stel de property Text in op Interface.

Je kunt de titel van het form als je dat wilt ook in code (in runtime) veranderen. Dit gaat door de volgende code op te nemen in een subroutine, bij voorbeeld de Load eventhandler.

Me.Text = "Dit is de nieuwe titel van het formulier."

Dit levert de foutmelding 'Form1' is not a member of 'WindowsApplication1'. Dit is een bug in de huidige versie van Visual Studio. Hopelijk wordt dit later aangepast.

Me is hier de aanroep van het actieve form en tussen de dubbele aanhalingstekens vul je de titel van het form in. Oefen hier later maar eens mee. Eventueel moet je de Load eventhandler zelf nog even maken.

Een icoon toevoegen aan je formNatuurlijk wil je ook dat er in de titelbalk linksboven een leuk icoontje verschijnt. Dat kan. Zo’n icoontje bevindt zich in een .ico bestand.

1. Klik op het form.2. Klik in het properties scherm op Icon en dan op de 3 puntjes in de Icon regel.3. Browse naar C:\Users\...\Documents\vb2015communitymetdatabases.4. Klik op het fnlogo.ico bestand5. Klik op Open.6. Start je project.

Je ziet het icoontje linksboven in de titelbalk van je form verschijnen.


Het icoon is trouwens alleen zichtbaar wanneer ook de controlbox zichtbaar is.

De controlbox aanpassenRechtsboven in een formulier zie je vaak die zogenaamde controlbox met de knoppen voor minimaliseren, maximaliseren en sluiten. Soms wil je voorkomen dat de gebruikers van je programma deze knoppen gebruiken, bijvoorbeeld wanneer je onder je zelfgemaakte sluiten knop code hebt staan waarvan je wilt dat die wordt uitgevoerd voordat het formulier wordt afgesloten. Je kunt de hele controlbox weghalen, of alleen de minimize en maximize knoppen. Dit gaat door de waarden van Controlbox, Minimizebox of Maximizebox op false te zetten.

Hoofdstuk 5 66

1. Selecteer het form en zet de waarde van Controlbox op False.2. Start het project.

Oeps! Er is nu op het formulier geen mogelijkheid meer om het programma te stoppen. Je moet dus straks nog wel even een Sluiten knop toevoegen.

3. Stop het project door de knoppen Alt en F4 tegelijkertijd in te drukken.

Dit is trouwens ook een handige manier om een vastgelopen programma af te sluiten.

1. Selecteer het form en zet de waarde van Controlbox op True.

Eventueel kun je ook delen van de controlbox uitschakelen door de properties Maximizebox en/of Minimizebox op False te zetten.Dan kun je ook nog bepalen waar op het scherm van de gebruiker het formulier verschijnt. Wanneer je scherm niet maximized is, dus niet schermvullend, kun je het bijvoorbeeld midden op het scherm laten verschijnen door de property StartPosition op CenterScreen te zetten.

1. Selecteer het form en zet de property StartPosition op CenterScreen.2. Start je project.

Je ziet dat je formulier nu midden op het scherm verschijnt.

3. Sluit het project.

Ook nuttig is de mogelijkheid om een formulier maximized te laten starten. Het vult dan het hele beeldscherm, onafhankelijk van de grootte en resolutie van het beeldscherm van de gebruiker. Dit doe je door de property WindowState op Maximized te zetten.

1. Zet de property WindowState van het form op Maximized.2. Start je project.

Je ziet dat je formulier nu het hele scherm vult. Het scherm is nog leeg omdat er nog geen objecten op staan.

3. Sluit het project.4. Zet de property WindowState weer terug naar Normal.

Ook dit kan allemaal in code, bijvoorbeeld in de subroutine van de Form_Load gebeurtenis, als volgt:

Me.ControlBox = False Me.WindowState = FormWindowState.Normal Me.StartPosition = FormStartPosition.CenterScreen

Of als je wel een controlbox wilt, maar geen minimize en maximize knoppen:

Me.ControlBox = True

Hoofdstuk 5 67

Me.MaximizeBox = FalseMe.MinimizeBox = False

Tenslotte is er nog een laatste trucje dat je met het form, en trouwens ook met andere controls kunt uithalen; je kunt de opacity, oftewel de doorzichtigheid aanpassen. Bij 100% is een object niet doorzichtig, bij een lagere waarde wel in meer of mindere mate.

1. Stel de property opacity van het form in op 60%.2. Start het project.3. Sleep het form over het scherm over andere objecten heen.

Je ziet dat het form enigszins doorzichtig is geworden.

4. Stel de property opacity van het form weer in op 100%.

Tekstvakken en labelsDe meest voorkomende objecten op een formulier zijn tekstvakken en labels. Een textbox (tekstvak) toont 1 gegeven. Dus de inhoud van 1 veld van 1 record. Bijvoorbeeld de inhoud van het veld voornaam. Meestal staat er bij de textbox een label dat aangeeft welk gegeven de textbox toont.

Er zijn twee manieren om een object op een formulier te plaatsen. De eerste is door in de toolbox op het object te dubbelklikken. Er verschijnt dan een instantie van het object linksboven in het formulier. Voor de breedte en hoogte van het object worden standaardwaarden gebruikt. De tweede manier is om in de toolbox 1 keer te klikken op het object en het daarna met ingedrukte linkermuisknop te tekenen op het formulier.

1. Plaats 3 tekstboxen op het form door in de toolbox 3 keer te dubbelklikken op het object TextBox.

2. Plaats zo ook 3 labels op het form.

Het is een goede gewoonte om objecten een logische naam te geven, beginnend met 3 letters die het type van het object aangeven. Bij labels is dat lbl, bij tekstboxen txt, bij knoppen btn (van button) enzovoorts. Na die 3 letters komt de echte naam van het object, beginnend met een hoofdletter. Als je die naam goed kiest, geeft hij aan wat de inhoud van het object is. Zo is lblBeschrijving veel duidelijker dan Label3.

3. Geef de labels en tekstboxen de volgende namen: Label1:lblId, Label2:lblNaam, Label3:lblBeschrijving, TekstBox1:txtId, TexBox2:txtNaam en TextBox3:txtBeschrijving.

4. Zet de objecten ongeveer zo neer als in het voorbeeld hieronder.

Hoofdstuk 5 68

Dat ziet er slordig uit. Je kunt de labels en tekstvakken uitlijnen door ze aan te klikken en te verschuiven. Je merkt dan dat de objecten aandokken op een raster. Dit zorgt ervoor dat objecten niet slechts 1 of 2 pixels afwijken in uitlijning.

Maar je kunt de positie van objecten ook via het properties scherm instellen door onder location de Y en X-waarden in te stellen. Deze bepalen waar de linkerbovenhoek van het object wordt geplaatst. De Y-waarde bepaald de verticale afstand in pixels tot de bovenrand van het formulier. De X-waarde bepaald de horizontale afstand tot de linker zijrand van het formulier. De linkerbovenhoek van het formulier heeft waarden 0 en 0. In de property location van een object staat dan 0;0.

1. Zet txtId 145 pixels vanaf de linkerrand van het form en 30 pixels vanaf de bovenrand van het formulier.

Dat werk wel, maar is toch een heel gedoe, vooral als het niet 3 tekstboxen zijn, maar bijvoorbeeld 12. Er is dan ook een betere manier om de lay-out van een interface goed voor elkaar te krijgen, en wel via de Layout toolbar. De layout toolbar staat rechts in de toolbar.

1. Als de Layout toolbar niet zichtbaar is, rechtsklik dan in de toolbar en klik Layout aan.

2. Selecteer de drie labels door de Ctrl-toets ingedrukt te houden en ze 1 voor 1 aan te klikken.

3. Klik op de Align Lefts knop in de menubalk.

Hoofdstuk 5 69

Je ziet dat de linkerranden van de 3 labels nu verticaal uitgelijnd zijn. Nu moet de afstand tussen de 3 labels nog gelijk worden.

1. Klik op de Make Vertical Spacing Equal knop in de Layout toolbar.

De afstand tussen de 3 labels is nu gelijk. Nu moet ze nog iets dichter naar elkaar toe.

1. Klik op de Decrease Vertical Spacing knop.

De afstand tussen de labels is kleiner geworden. Tenslotte wil je ze nog iets hoger in het formulier hebben. De labels zijn nog steeds alledrie geselecteerd.

1. Klik op een van de labels en sleep het naar boven.2. Pas op dezelfde manier de locaties van de textboxen aan, zodat het geheel er

uit ziet als hieronder.

Je ziet dat je dus een aantal objecten tegelijk kunt aanpassen als je ze allemaal geselecteerd hebt.

Er is nog een andere manier om meerdere objecten tegelijk te selecteren, namelijk door er een vak omheen te plaatsen.

1. Klik linksboven lblId.

Hoofdstuk 5 70

2. Houdt de linkermuisknop ingedrukt en sleep de cursor naar rechtsonder lblBeschrijving.

3. Laat de cursor los.

Alle objecten binnen het vak zijn geselecteerd.

Zo kun je ook properties van meerdere objecten tegelijk aanpassen. Zo kun je bij voorbeeld de tekst van alle drie labels in één keer veranderen.

1. Zet de waarde van de property tekst van de die labels op ID.2. Klik op het form.

Je ziet dat de tekst van alle 3 labels is aangepast.

3. Klik buiten de 3 labels om de selectie ongedaan te maken.4. Pas de tekst in onderste 2 labels aan naar respectievelijk Naam en

Beschrijving.

Het is mooier wanneer de labels strak naast de textboxen staan.

1. Selecteer de 3 labels en klik op de Align Rights knop in de Layout toolbar.

Meestal zijn tekstboxen maar 1 regel hoog en breed genoeg voor een paar woorden. Maar het kan natuurlijk ook best zo zijn dat een textbox een groter stuk tekst moet tonen. Dat kan, wanneer je een paar eigenschappen instelt.

1. Selecteer txtBeschrijving.2. Zet de property MultiLine op True. 3. Maak het vak iets hoger en breder.4. Zet (indien nodig) de property Wordwrap op True.

Multiline = True zorgt ervoor dat de tekst in het vak over meerdere regels verdeeld kan worden. Wordwrap = True zorgt ervoor dat tekst die te breed is voor een regel automatisch naar de volgende regel wordt verplaatst. Wanneer Wordwrap op False staat gebeurt dit alleen na een volgende-regel symbool in de tekst.

Je kunt ook bepalen of een textbox schuifbalken moet tonen. Schuifbalken kunnen handig zijn wanneer je de textbox niet te groot wilt maken, maar de gebruiker toch de gelegenheid wilt geven makkelijk door tekst te scrollen.

5. Selecteer txtBeschrijving en zet de property ScrollBars op Vertical.

Dit plaatst een verticale scrollbar in het tekstvak.

6. Maak txtBeschrijving een flink stuk groter.7. Start je project.8. Type een paar regels tekst in txtBeschrijving.

Je ziet dat txtBeschrijving de tekst keurig verdeeld over meerdere regels en een verticale scrollbar toont.

Hoofdstuk 5 71


Al deze eigenschappen zijn trouwens ook in de code in te stellen. Een paar voorbeeldjes:

txtBeschrijving.Left = 200txtBeschrijving.Top = 200

Deze code is een voorbeeld van zogenaamd object-georiënteerd programmeren. Het werkt als volgt: je noemt eerst de naam van een object. Dan volgt een punt, en dan de naam van een objectproperty die je wilt veranderen. Dit veranderen heet bij programmeren een methode. Dan een = teken met daarachter de waarde die je aan de objectproperty wilt toekennen.

Bij voorbeeld: voetbal.kleur = groen. Voetbal is het object, kleur een property van het object voetbal, en groen de waarde van de property kleur. Dus: object.property = waarde.

Objecten op het formulier instellen en aan de database koppelen

TekstvakkenNu wordt het tijd om de tekstvakken aan de database te koppelen.

Eerst voeg je de database leerlingen.accdb als Data Source toe aan je project.

13.Klik linksboven in het scherm op de tab Data Sources.

Als de tab Data Sources niet zichtbaar is, kun je hem zichtbaar maken via View – Other Windows – Data Sources.

Het scherm Data Sources opent.

14.Klik linksboven op het icoon met het plusje.15.Klik achtereenvolgend op Database – Next – Dataset – Next.16.Klik op New Connection.17.Browse naar de database C:\Users\...\Documents\

vb2015communitymetdatabases\leerlingen.accdb18.Test de connection.19.Klik op Next.20.Kik op Ja als antwoord op de vraag of de database gekopieerd moet worden.21.Klik op Next.22.Vink in het volgende scherm alleen de tabel namen aan.23.Klik op Finish.

In de Solution Explorer zie je dat de database leerlingen.accdb en de dataset leerlingenDataSet.xsd aan je project zijn toegevoegd. Nu nog even het voortdurend kopiëren uitschakelen.

1. Selecteer in de Solution Explorer de database leerlingen.accdb.

Hoofdstuk 5 72

2. Zet in het tabblad Properties de property Copy to Output Directory op Copy if newer.

En dan bind je de tekstvakken aan de data source.

1. Selecteer de textbox Id.2. Kies in het Propertiesvak Databindings – (Plus teken) – Advanced – 3

puntjes.3. Kies in de dropdown lijst Binding – Other Data Sources – Project Data

Sources – leerlingenDataSet – Namen – Id - OK.

De tekst van txtID is nu gekoppeld aan het veld Id in de dataset leerlingenDataSet en er is automatisch een Bindingsource aangemaakt om deze verbinding te beheren. Ook is er automatisch een TableAdapter gemaakt om de gegevens uit de database op te halen en in de dataset te plaatsen.

Kies voor de andere 2 tekstvakken in de dropdown lijst niet Other Data Sources, maar de net aangemaakte NamenBindingSource . Als je dit namelijk wel zou doen, maakt VB voor elk vak een nieuwe BindingSource aan. Dat werkt wel, maar wordt erg onoverzichtelijk.

4. Bind de andere 2 tekstvakken aan hun data source.5. Start je project.

Je ziet dat alle tekstvakken de inhoud van de velden van het eerste record van de tabel Namen van de database Leerlingen tonen.

MaskedTextBoxEen bijzonder soort textbox is de MaskedTextBox. Het verschil zit ‘m in de wijze waarop de inhoud van het textbox wordt getoond. Je kunt namelijk de vorm waarin de inhoud wordt getoond instellen. Dit is niet alleen handig om gegevens uit de database mooi te tonen, maar ook om ervoor te zorgen dat de gebruiker van je programma alleen gegevens in de juiste vorm kan invoeren.

1. Plaats een MaskedTextBox op je form.2. Klik in het Properties vak op de property Mask.3. Klik op de drie puntjes.

Hoofdstuk 5 73

Je ziet een aantal standaard opties. Deze zijn vooral geschikt voor Amerikaanse gegevens. Maar onderaan staat ook de optie Custom. Als je die kiest kun je zelf de vorm van de gegevens bepalen met behulp van een aantal codes. Het gebruik van deze codes is eigenlijk een vorm van data validatie, en wordt daarom uitgelegd in het hoofdstuk dat over data validatie gaat. Wil je nu al weten hoe het gaat, selecteer dan om beurten een aantal van de stadaard opties en kijk onder in het scherm wat de bij die optie behorende code is.Het koppelen van zo’n maskedtextbox gaat op dezelfde manier als bij een gewone textbox.

CheckboxEen checkbox toont de waarde van een veld met gegevens van het type Boolean. Zo’n veld bevat de waarde 0 of 1. Een checkbox toont de waarde door aangevinkt te zijn of juist niet. Het koppelen van een checkbox aan een veld in de BindingSource gaat op dezelfde manier als bij een tekstvak, alleen wordt nu niet de property text, maar de property checkstate gekoppeld.

1. Plaats een checkbox op het form.2. Koppel de checkbox aan het veld Geschikt.3. Start je project.

Je ziet dat er een vinkje staat in de tekstbox. Dit is zo omdat in het veld Geschikt in de dataset in het eerste record een 1 ofwel True staat.

Knoppen

SnelknopcombinatieOok knoppen zijn veelvoorkomende objecten. Handig om tekst op te zetten en een gebeurtenis mee aan te roepen. Maar je kunt meer met een knop.

1. Plaats een knop op frmInterface.2. Geef die knop de naam btnExit.3. Stel de tekst van de knop in op &Sluiten.

Je ziet dat de tekst die op de knop verschijnt Sluiten is. Dat streepje onder de S geeft aan dat de combinatie van de Alt-toets en de s de snelknopcombinatie is om de klikgebeurtenis van deze knop aan te roepen. Om dat te testen zet je wat code in de subroutine van deze klikgebeurtenis.

1. Dubbelklik op de knop btnExit.2. Plaats in de gegenereerde subroutine de opdracht End.

Private Sub btnExit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnExit.Click

EndEnd Sub

3. Run het project.4. Houd de Alt toets ingedrukt en druk op de letter s.

Hoofdstuk 5 74

De klikgebeurtenis van de knop wordt aangeroepen en het programma wordt afgesloten. Hoewel de meeste mensen hun muis gebruiken om op knoppen te klikken, zijn er ook gebruikers die bij voorkeur toetscombinaties gebruiken. Een goede interface is ook hiervoor geschikt. Stel dus altijd toetscombinaties in voor knoppen. De gekozen letter hoeft trouwens niet altijd de eerste letter van het woord te zijn. Het kan elke willekeurige letter zijn. Dit is handig wanneer je meerdere knoppen hebt waarvan de beginletter van de tekst hetzelfde is.

Als de onderstreping niet zichtbaar is, ligt dit aan de instellingen van Windows. Je kunt de onderstreping zichtbaar maken door in Start – Instellingen het onderdeel Onderstrepen voor sneltoetsen inschakelen aan te zetten. Zoek op onderstrepen. Houdt er bij het gebruik van snelknopcombinaties rekening mee dat dit misschien op de computer van de gebruiker van je programma ook uitgeschakeld is.

Een knop met een icoonMaar je hoeft niet altijd (alleen maar) tekst op een knop te zetten. Soms is het goed de tekst te vervangen door een icoon; een plaatje dat iets aanduidt. Kies dan wel een icoon dat door iedereen gelijk herkend wordt. Probeer niet te veel af te wijken van de standaard iconen die in Windows programma’s worden gebruikt.

Je voegt het benodigde bestand stop.ico als resource aan je project toe.

1. Selecteer de knop btnExit en klik bij de property Image op de drie puntjes.2. Selecteer Project resource file.

Dit zet het ico bestand in je Resources map.

3. Klik op Import en zoek in de map C:\Users\...\Documents\vb2015communitymetdatabases het bestand stop.ico op.

Als het niet zichtbaar is, moet je misschien eerst in de dropdown lijst All Files (*.*) kiezen.

4. Kies Openen – OK.

Stop.ico is in de map Resources verschenen en het icoon staat ook op de btnExit knop.

5. Stel de property ImageAlign op TopCenter.6. Stel de property TextAlign op BottomCenter.7. Pas de vorm van de knop zo aan dat zowel plaatje als tekst goed te zien zijn.8. Run het project.

Je ziet dat het plaatje en de tekst beide zichtbaar zijn.


Besluit je dat je toch geen tekst wilt omdat het icoon voldoende duidelijk is, dan haal je gewoon de tekst weg door het vakje achter de property Text leeg te maken. Je

Hoofdstuk 5 75

bent dan wel de toetscombinatie kwijt. Je kunt de afbeelding van de knop natuurlijk ook in runtime veranderen. Dit gaat zo:

Button1.Image = My.Resources.stop

Let op! Deze code gaat er vanuit dat het bestand stop.ico als resource in het project is opgenomen. Pas eventueel de naam die je in de code gebruikt aan.

De tekst van een knop in runtime aanpassenMeestal staat de tekst op een knop vast. Je kunt de tekst echter ook gedurende het runnen van het programma veranderen. Dat kan op verschillende manieren. De eerste manier is door in je code een instructie op te nemen om de tekst te veranderen. Dat werkt als volgt:

1. Plaats een nieuwe knop op het formulier en noem die btnTekstWissel.2. Zet de property Text op Aan.3. Dubbelklik op btnTekstWissel.4. Zorg dat de gegenereerde subroutine er als volgt uitziet:

Private Sub btnTekstWissel_Click(sender As Object, e As EventArgs) Handles btnTekstWissel.Click If btnTekstWissel.Text = "Aan" Then btnTekstWissel.Text = "Uit" Else : btnTekstWissel.Text = "Aan" End If End Sub

5. Run het project.6. Klik een aantal keren op btnTekstWissel.

Je ziet dat de tekst van de knop telkens verandert.


De tekst van een knop uit de database halenJe kunt de tekst van een knop, en trouwens van vrijwel elk object, laten bestaan uit de inhoud van een veld in een dataset. Dat lijkt moeilijker dan het is. Een voorbeeld:

1. Plaats een nieuwe knop op het formulier en noem die btnTekstDynamisch.2. Zet de property DataBindings – NamenBindingSource -- Naam.

De tekst van deze knop toont nu de inhoud van het veld Naam van het eerste record in NamenBindingSource.

3. Run het project om het resultaat te zien.4. Sluit het project.

Dit koppelen had ook in code gekund, bijvoorbeeld voor een textbox genaamd Textbox4 waarin je het veld Id wilt tonen, en wel zo:

TextBox4.DataBindings.Add("Text", NamenBindingSource, "Id")

Hoofdstuk 5 76

Je kunt de code dan in de form_Load eventhandler plaatsen, of eventueel zelfs onder een knop.

Je kunt een knop nog verder opmaken door bijvoorbeeld de voor- en achtergrondkleuren te veranderen. Oefen dat zelf maar eens. Ook kun je een achtergrondplaatje instellen, maar in de praktijk is dat vaak niet zo handig.

Objecten uitschakelen en onzichtbaar makenTwee eigenschappen die erg nuttig zijn, zijn Enabled en Visible. Het kan nodig zijn om bepaalde knoppen ontoegankelijk te maken wanneer de gebruiker met een bepaalde handeling bezig is. Zo wil je bij voorbeeld liever niet dat een gebruiker in een nieuw record zelf het sleutelveld veranderd. Je kunt de textbox dan uitschakelen. Of je wilt niet dat de gebruiker het formulier verlaat terwijl hij of zij bezig is gegevens in een nieuwe record in te vullen. Je kunt dan de knop btnExit uitschakelen, of zelfs onzichtbaar maken.

1. Voeg twee regels code toe aan de btnTekstWissel_Click zodat die er als volgt komt uit te zien.

Private Sub btnTekstWissel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnTekstWissel.ClickIf btnTekstWissel.Text = "Aan" ThenbtnTekstWissel.Text = "Uit"btnExit.Enabled = FalseElse : btnTekstWissel.Text = "Aan"btnExit.Enabled = TrueEnd IfEnd Sub

2. Run het project en klik een paar keer op btnTekstWissel. Je ziet dat btnExit uit en aan wordt gezet.


Je kunt een knop zelfs onzichtbaar, en dus onbenaderbaar, maken door de property Visible op False te zetten.

1. Vervang in de code van de btnTekstWissel_Click twee keer het woord Enabled door Visible.

2. Run het project en bekijk het verschil door een paar keer op btnTekstWissel te klikken.

3. Sluit het project.4. Verander Visible weer 2 keer terug in Enabled.

Bepalen welk object de focus heeftHet kan ook handig zijn om aan het eind van een subroutine te bepalen welk object na afloop van de subroutine de focus heeft. Wanneer je wilt dat txtBeschrijving de focus krijgt aan het eind van de klik subroutine van btnTekstWissel voeg je de regel

txtBeschrijving.Focus()

aan de subroutine toe.

Hoofdstuk 5 77

1. Voeg de bovenstaande regel code toe aan de subroutine btnTekstWissel_Click

De volledige code van de subroutine wordt dan:

Private Sub btnTekstWissel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnTekstWissel.Click If btnTekstWissel.Text = "Aan" Then btnTekstWissel.Text = "Uit" btnExit.Enabled = False Else : btnTekstWissel.Text = "Aan" btnExit.Enabled = True End If txtBeschrijving.Focus() End Sub

2. Klik op txtId om deze de focus te geven.3. Klik op btnTekstWissel.

Je ziet dat de focus nu op txtBeschrijving staat.4. Sluit het project.

Door een formulier tabbenBij het invullen van een formulier is het voor de gebruiker makkelijk als hij of zij van het ene textbox naar de volgende kan springen door op de TAB-toets te drukken. En misschien wel als laatste naar een toepasselijke knop. Dat kan. Visual Studio geeft bij het aanmaken van objecten deze objecten een tab index mee. Deze loopt op vanaf 0. Telkens wanneer de gebruiker op de TAB-toets drukt, krijgt het object met het volgend hogere tabindexnummer de focus. Door deze tab indexen in de gewenste volgorde te zetten kun je de TAB-volgorde instellen.

1. Stel de tab indexen van de volgende objecten als volgt in:txtId:0, txtNaam:1, txtBeschrijving:2, btnTekstDynamisch:3

2. Run het project en druk een aantal keren op de TAB-toets.3. Sluit het project.

Het is handig om de tab indexen van laag naar hoog in te stellen.

Stel je voor dat, bij voorbeeld bij het invullen van de gegevens van een nieuw record, een gebruiker door een aantal tekstvakken is geTABt en daarna de actie wil afronden met het klikken op een knop. Om het de gebruiker nog makkelijker te maken, kun je voor een formulier een default (standaard) knop instellen. Dat is de knop waarvan de click subroutine wordt aangeroepen wanneer er op de ENTER-toets wordt gedrukt. Als voorbeeld stellen we btnExit in als default knop.

1. Klik op het form.2. Stel de property AcceptButton in op btnExit.3. Start het project.4. Druk op de ENTER-toets.

Je merkt dat het programma reageert alsof je op btnExit hebt geklikt. Zo kun je ook instellen welke knop aangeroepen moet worden wanneer er op de ESC-toets wordt

Hoofdstuk 5 78

gedrukt door de CancelButton property in te stellen. De code om een AcceptButton en een CancelButton in te stellen is:

Me.AcceptButton = button1Me.CancelButton = button2

KeuzelijstenKeuzelijsten die gegevens uit de database tonen zijn heel geschikt om de gebruiker een keuze te laten maken uit gegevens die ook werkelijk in de database voorkomen. Als er bijvoorbeeld door een luchtvaartmaatschappij op enkele dagen per week vluchten worden aangeboden, dan is het belangrijk dat een klant bij het zoeken naar zo’n vlucht in een keuzelijst alleen die dagen te zien krijgt waarop er ook daadwerkelijk vluchten zijn. Als die dagen nog weleens veranderen, kun je die niet in de code instellen. De namen van die dagen moeten dan uit de database komen. Hiervoor zijn de standaard keuzelijsten, de zogenaamde listboxen, uitstekend geschikt.

Maar moet de gebruiker van je programma ook de gelegenheid krijgen om zelf iets toe te voegen aan de lijst met gegevens, dan moet die keuzelijst ook een invulvakje hebben. In zo’n geval gebruik je een keuzelijst met invulvak, ook wel combobox genoemd.

1. Plaats een listbox op het form.2. Stel de property DataSource in op NamenBindingSource.3. Stel de property DisplayMember in op Naam.4. Start het project.

Je ziet dat de keuzelijst gevuld is. Als de keuzelijst te kort is om alle informatie te tonen, wordt automatisch een scrollbar toegevoegd.


Je kunt de items in de listbox ook sorteren. Dit doe je door de property Sorted op True te zetten.

1. Stel van Listbox1 de property Sorted in op True.2. Start je project en controleer welk effect dit heeft op de getoonde gegevens.3. Sluit het project.

Keuzelijsten hebben wel als nadeel dat ze veel ruimte vragen om alle items te tonen. Daar kun je wel wat aan doen.

1. Maak de keuzelijst zo hoog dat hij ongeveer 2 items tegelijk kan tonen.2. Stel de property AllowDrop in op True.3. Start het project en controleer welke uitwerking dit heeft op de keuzelijst.4. Sluit het project.

Op deze manier kun op minder ruimte dezelfde gegevens aan je gebruiker aanbieden.

Hoofdstuk 5 79

Comboboxen (keuzelijsten met invulvak) bieden nog wat meer mogelijkheden om de lay-out te veranderen. Zo kun je met DropDownWidth de breedte van de uitgeklapte cellen bepalen. En met MaxDropDownItems bepaal je het maximale aantal uitgeklapte cellen. Bij lange lijsten is het verstandig dit in te stellen om te voorkomen dat deze uitgeklapt andere objecten afdekken.

1. Plaats een keuzelijst met invulvak (Combobox) op het formulier.2. Stel de property DataSource in op NamenBindingSource.3. Stel de property DisplayMember in op Naam.4. Stel de property DropDownWidth op 300.5. Stel de property MaxDropDownItems op 3.

Soms werkt bovenstaande property niet correct. Sla hem dan maar over.

6. Start het project en bekijk hoe de combobox eruitziet.7. Sluit het project.

Ook handig is de property MaxLength die bepaald hoeveel letters de gebruiker mag invoeren in het invulvak.

Het kan ook voorkomen dat je de gegevens in een keuzelijst helemaal niet uit een database wilt halen, maar dat je ze gewoon zelf wilt invoeren omdat ze vaststaan en nooit zullen veranderen. Dat kan ook. Je vult dan in het Properties scherm niets in bij DataSource en DisplayMember, maar klikt op de puntjes naast Items (Collection). Er verschijnt een leeg lijstje waar je de items van je keuzelijst kunt invullen. Na elk item even op de ENTER-toets drukken en wanneer je lijstje compleet is op OK. En ook dit kan weer in code:

ListBox1.Items.Add("Jonge kaas")

In het hoofdstuk over webapplicaties staat een voorbeeld van nog meer mogelijkheden om een listbox aan data te binden.

AfbeeldingvakPictureboxen (afbeeldingvakken) zijn handig om plaatjes te tonen. En nog handiger is het dat je ook in runtime via code de afbeelding in het vak kunt aanpassen.

1. Plaats een Picturebox object rechtsboven op het form.2. Klik in het Properties scherm naast Image.3. Importeer als Project resource file C:\Users\...\Documents\

vb2015communitymetdatabases \bfly1.bmp en ken dit als bron aan het afbeeldingvak toe.

Je kunt dit ook in code doen:

1. Plaats een tweede afbeeldingvak op het form.2. Stel de BorderStyle in op FixedSingle.3. Dubbelklik op het afbeeldingvak om een klikgebeurtenis te genereren. 4. Plaats de volgende code in de subroutine van de klik gebeurtenis.

Hoofdstuk 5 80

Private Sub PictureBox2_Click(ByVal sender As System. Object, ByVal e As System.EventArgs) Handles PictureBox2.Click PictureBox2.Image = interfaces.My.Resources.bfly1 End Sub

Als interfaces.My.Resources.bfly1 niet werkt, gebruik dan My.Resources.blfly11. Start je project en klik op het tweede afbeeldingvak.

Je plaatje verschijnt. 2. Sluit je project.

Plaatjes passen meestal niet goed in het afbeeldingvak. Je kunt dat oplossen door de SizeMode aan te passen. De standaardwaarde is Normal. Het plaatje wordt dan linksboven in het afbeeldingvak geplaatst en alles wat te groot is wordt niet getoond. Als je SizeMode op StretchImage instelt wordt een te klein plaatje opgerekt totdat het het afbeeldingvak vult. Dit kan soms betekenen dat het plaatje vervormt. Gewoon even proberen dus. Een andere oplossing kan de instelling AutoSize zijn. Deze instelling zorgt ervoor dat het afbeeldingvak zich aanpast aan de grootte van het plaatje. Pas hier wel mee op, want voor je het weet beslaat je afbeeldingvak het hele formulier. PictureBoxSizeMode.CenterImage plaatst het plaatje gecentreerd in het afbeeldingvak. Dat zou er in code dus als volgt kunnen uitzien:

PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage

Maar je kunt de instelling natuurlijk ook gewoon bij de property SizeMode in het Properties scherm doen.

1. Verander de instellingen van PictureBox1.SizeMode een paar keer en run telkens je project om de verschillen te zien.

Datagridview (dataraster)Het datagridview is ideaal om grote hoeveelheden gegevens te tonen. Daarnaast is het ook mogelijk de lay-out van het datagridview flink aan te passen. Je vindt het datagridview in de Toolbox in de tab Data.

1. Plaats een datagridview op het formulier.

Je ziet naast het datagridview gelijk een schermpje verschijnen waarin je de belangrijkste eigenschappen van het datagridview kunt aanpassen.

2. Stel de property DataSource van het datagridview in op NamenBindingSource.

Je ziet gelijk in de headers (kopjes) van het datagridview de namen van de velden verschijnen.

Hoofdstuk 5 81

Je ziet dat standaard de mogelijkheden om gegevens toe te voegen, aan te passen en te verwijderen zijn aangevinkt. Om hiervan gebruik te kunnen maken zouden we bij voorbeeld een knop kunnen toevoegen om de TableAdapter de opdracht te geven de wijzigingen op te slaan. Dat doen we nu niet. Vink deze opties maar uit om die mogelijkheden uit te schakelen.

3. Klik buiten het datagridview.4. Maak het datagridview groot genoeg om alle 4 tabellen te kunnen tonen.

Vind je de lijntjes tussen de cellen niet mooi, dan kun je ze aanpassen met de property GridColor, of zelfs weghalen door de property CellBorderStyle op None te zetten. En wil je het lettertype van de header veranderen, stel dat dan in bij ColumnHeaderDefaultCellStyle. Deze instellingen zijn geldig voor het hele datagridview, maar je kunt de instellingen ook voor aparte kolommen en rijen aanpassen. Je doet dit door in het Properties scherm te klikken op de 3 puntjes naast Columns, een kolom te kiezen en de instellingen in bij voorbeeld de DefaultCellStyle aan te passen.

Belangrijk!! Zorg ervoor dat je, wanneer je zo dadelijk met deze instellingen gaat experimenteren, eerst de property met de originele instelling OP PAPIER noteert, zodat je ongewenste veranderingen weer ongedaan kunt maken. Ook Edit – Undo kan hier wonderen verrichten.

1. Experimenteer wat met deze instellingen.

Wil je niet dat er iets aan de data in het raster kan worden veranderd, dan kun je dat in plaats van bij het instellen van de datasource ook bij properties instellen. Stel dan de property ReadOnly in op True. En wil je links in het raster geen rijkopjes zien, dan stel je RowHeadersVisible op False. In het eigenschappenvak kan nog veel meer worden ingesteld.

Maar er zijn nog meer mogelijkheden om de lay-out van het datagridview in te stellen.

Hoofdstuk 5 82

Wil je de standaard lay-out van de cellen veranderen, verander dan de instellingen bij de property DefaultCellStyle. En wil je alleen de lay-out voor de even rijen aanpassen, dan kan dat door de eigenschappen van de AlternatingDefaultCellStyle aan te passen.

1. Klik op de 3 puntjes naast DefaultCellStyle.2. Kies de instellingen die je wilt voor alle rijen.3. Klik op de 3 puntjes naast AlternatingDefaultCellStyle.4. Kies de instellingen die je wilt voor de even rijen.5. Start je project en kijk hoe je datagridview eruitziet.6. Sluit het project.

Je kunt ook helemaal zelf bepalen welke velden (kolommen) uit de dataset het datagridview toont.

1. Selecteer het datagridview.2. Klik in het Properties scherm op de 3 puntjes naast de property Columns

(Collection).

Je komt dan in het Edit Columns scherm.

3. Selecteer de kolom Namen links in het scherm.4. Klik op Remove (verwijder).

De kolom Namen is uit het Datagridview verdwenen.

Je kunt ook een verwijderde kolom weer toevoegen.

1. Klik op Add en selecteer de gewenste kolom.2. Klik op Add en Close.

De kolom is onderaan het lijst je met kolommen toegevoegd. Met de pijltjes knoppen rechts naast het lijstje met kolomnamen kun je een geselecteerde kolom omhoog en omlaag zetten in het lijstje.

Je kunt in het Columns scherm ook de breedte van de geselecteerde kolom instellen. Je kunt een vast breedte opgeven bij Width, maar ook de breedte laten bepalen aan de hand van de inhoud van de cellen van de kolom. Kies je bij AutoSizeMode voor Header, dan wordt de kolom zo breed dat de tekst van de header er precies in past. Bij All Cells wordt hij zo breed dat de tekst van de breedste cel er precies in past.

DateTimePicker en MonthCalenderDe DateTimePicker en de MonthCalender zijn objecten die weliswaar geen gegevens uit een database tonen, maar wel heel handig zijn op forms waar gegevens naar een database worden ingevoerd. Ze bieden de gebruiker namelijk de gelegenheid om data en tijden makkelijk in te voeren. Zou je ze niet gebruiken, dan moet je rekening houden met allerlei mogelijke (verkeerde) invoer. Mensen schrijven 3 oktober 2006 bijvoorbeeld als 3-10-06, maar ook als 03-10-2006, als 3 nov 2006,

Hoofdstuk 5 83

en ga zo maar door. Je zou dan in je code heel wat toeren moeten uithalen om er zeker van te zijn dat je de juiste invoer binnen krijgt. Al dat gedoe voorkom je wanneer je een DateTimePicker of MonthCalender object gebruikt. Je vindt deze objecten op het tabblad Tools.

1. Plaats een DateTimePicker object en een MonthCalender object op het form.

2. Start je project.3. Klik op het driehoekje in de DateTimePicker.

Je ziet dat er een na het klikken op het driehoekje in de DateTimePickers een MonthCalender verschijnt, identiek aan het MonthCalender object dat je ook net geplaatst hebt. De DateTimePicker lijkt dan ook erg op het MonthCalender object. Het verschil zit hem erin dat de DateTimePicker de gekozen dag in een textbox laat zien. Dat kan soms heel handig zijn. Daar staat tegenover dat het MonthCalender object meer mogelijkheden biedt om de lay-out aan te passen. Het is maar net wat je wilt. Wil je de data waaruit de gebruiker van de DateTimePicker kan kiezen beperken, stel dan toepasselijke waarden in bij de properties MinDate en MaxDate. Wanneer de gebruiker een nieuwe datum kiest, verschijnt die in het textbox van de DateTimePicker. Dit kun je uitlezen als tekst of als een DateTime object. Zo’n DateTime object kun je weer gebruiken om allerlei informatie uit te halen, zoals de tijd, de datum, de maand, het jaar en zelfs de weekdag. Je kunt ook de ValueChanged gebeurtenis die wordt aangeroepen wanneer de gebruiker een datum kiest, gebruiken om de gekozen informatie, bijvoorbeeld de datum, in een textbox te plaatsen.

Je kunt de manier waarop de DateTimePicker de datum en dergelijke toont aanpassen aan je wensen door de eigenschappen Format en CustomFormat in te stellen. Je kunt bij Format kiezen uit Long, Short en Time en Custom.

1. Selecteer DateTimePicker1 en kies bij property Format afwisselend de eerste drie formaten.

2. Kijk naar de veranderingen in de manier waarop DateTimePicker1 de gegevens toont.

Om je eigen lay-out samen te stellen selecteer je bij Format Custom en gebruik je bij CustomFormat een combinatie van de volgende elementen:

d dag met 1 of 2 cijfers.dd dag met 2 cijfers. Cijfers onder de 10 worden voorafgegaan door een 0.ddd dag van de week, afgekort tot 3 letters.dddd volledige dag van de week.h uur in 1 of 2 cijfers. 12 uur opmaak.hh uur in 2 cijfers. 12 uur opmaak. Uren onder de 10 krijgen eerst een 0.H uur in 1 of 2 cijfers. 24 uur opmaakHH uur in 2 cijferss seconden in 1 of 2 cijfers.ss seconden in 2 cijfers. Seconden onder de 10 krijgen eerst een 0.

Hoofdstuk 5 84

yy jaar in 2 cijfers.yyy jaar in 4 cijfers.

1. Stel de property Format op Custom.2. Combineer dan bij CustomFormat een aantal van bovenstaande elementen.3. Start je project en bekijk wat de DateTimePicker toont.4. Sluit je project.

Ook kun je tekst toevoegen aan het CustomFormat. Zowel in het Properties scherm als in code.

1. Plaats de volgende code in de subroutine van de Form_Load gebeurtenis.

DateTimePicker1.Format = DateTimePickerFormat.CustomDateTimePicker1.CustomFormat = "'U hebt gekozen:'dddd dd MMMM yyyy'.'"

2. Start je project en controleer hoe de lay-out van het DateTimePicker object is veranderd.


Het MonthCalender object biedt nog meer mogelijkheden qua lay-out. Zo kun je via FirstDayOfWeek bepalen welke dag als eerste wordt getoond. MaxSelectionCount bepaald hoeveel dagen er geselecteerd mogen worden. ShowToday bepaalt of de huidige datum wordt geaccentueerd en ShowTodayCircle of er een cirkeltje of rechthoekje omheen staat. Heel nuttig is het om ShowWeekNumbers op True te zetten. Je ziet dan de weeknummers links in beeld. Wil je dat bepaalde data vet worden weergegeven, dan stel je dat in via AnnuallyBoldedDates voor data die elk jaar vet weergegeven moeten worden, met BoldedDates voor data die eenmalig vet weergegeven moeten worden en met MonthlyBoldedDates voor data die elke maand vet weergegeven moeten worden. Wil je bijvoorbeeld de 25e van elke maand vet tonen, dan gaat dit als volgt:

1. Selecteer het MonthCalender object.2. Klik op de 3 puntjes naast MonthlyBoldedDates DateTime[]Array.3. Klik op Add.4. Klik op het driehoekje naast Value en selecteer de 25e.5. Klik op OK.6. Start je project.7. Blader door de maanden en zie dat elke 25e vet wordt weergegeven.

TooltipTen slotte Tooltip. Een van de handigste hulpmiddelen om de gebruikers van je programma gericht hulp te bieden. Wanneer een gebruiker de cursor een paar seconden boven een object houdt, toont Tooltip een tip. En wel een tip die jij hebt ingesteld. Ten minste als je voor dat object een ToolTip hebt ingesteld.

1. Plaats een ToolTip object op het formulier.

Je ziet dat het ToolTip object niet op het formulier zelf staat, maar net als de dataobjecten die je eerder hebt gemaakt, onder het formulier. Dit is zo omdat het

Hoofdstuk 5 85

ToolTip object zelf niet zichtbaar is op het formulier. In het properties vak zie je de property InitialDelay. De waarde van deze property geeft in milliseconden aan hoelang de cursor boven een object moet blijven hangen voordat de tooltip verschijnt. AutoPopDelay geeft aan hoelang de tooltip zichtbaar moet blijven.Nu je een ToolTip object aan je formulier hebt toegevoegd, hebben alle objecten van je formulier die een ToolTip kunnen krijgen, een extra regel gekregen in hun eigenschappenvak, namelijk ToolTip on ToolTip1.

2. Klik op het datagridview.3. Stel de property ToolTip on ToolTip1 in op Uitleg bij grid. Dit is de ToolTip

tekst bij het datagridview.4. Start je project en houdt de cursor even boven het datagridview.

Je ziet de ToolTip verschijnen.


Tooltips besparen ruimte op je formulier. Ze verschijnen immers alleen wanneer de gebruiker de cursor boven een object houdt. Dat scheelt, want je zult merken dat je al snel ruimte te kort komt op een formulier. Het is een goede gewoonte om alle objecten waarbij de gebruiker twijfels kan hebben te voorzien van een ToolTip.

Objectgebeurtenissen (events) en hun subroutines (eventhandlers)

Gebeurtenissen en hun subroutinesProgramma’s die object georiënteerd geprogrammeerd zijn “doen” meestal pas iets nadat de gebruiker iets heeft gedaan, bij voorbeeld op een knop geklikt of een optie uit een menu gekozen. Zo’n actie van de gebruiker heet een gebeurtenis ofwel event. Wanneer een event plaatsvindt wordt de code in de eventhandler die aan het event is gekoppeld uitgevoerd. Alle objecten, dus niet alleen knoppen en menu’s, hebben een hele reeks events. Door de juiste events te kiezen voor je code kun je je programma precies dat laten doen wat je wilt. Het kiezen van het juiste event is dus erg belangrijk.

Een aantal events ken je al. Zo vindt de event Form_Load plaats wanneer een form in het geheugen wordt geladen. De eventhandler van dit event is een prima plaats voor code die moet worden uitgevoerd voordat het formulier voor de gebruiker beschikbaar wordt. Voor webformulieren gelden nog bijzondere regels voor de Load gebeurtenis. Dit onderwerp wordt behandeld in het hoofdstuk over webapplicaties met databases.

Het Click event ken je ook al. Vooral bij knoppen wordt dit veel gebruikt. Maar de meeste objecten hebben nog tientallen andere events. Een voorbeeld:

1. Open het codescherm van je project.

Linksboven zie je een dropdownbox met alle objecten uit je project.

2. Kies btnExit.

Hoofdstuk 5 86

Rechts ernaast is nog een dropdownbox die de events van het geselecteerde object toont. De events die al code bevatten worden vet getoond.

3. Kies MouseEnter.

Er wordt nu automatisch een subroutine voor de gebeurtenis MouseEnter van het object btnExit gemaakt.

4. Plaats de volgende code:

btnExit.Image = interfaces.My.Resources.bfly1

of, als dit niet werkt

btnExit.Image = My.Resources.bfly1

5. Start je project.6. Beweeg met de muis over btnExit.

Je ziet dat de subroutine in MouseEnter wordt aangeroepen wanneer je met de muis btnExit binnengaat. De afbeelding verandert.

Hieronder zie je een overzicht van een aantal gebeurtenissen die bij databound interfaces handig zijn.

Overzicht gebeurtenissenObject Gebeurtenis Wanneer … Handig om …Vele EnabledChanged de waarde van de

property enabled van een object veranderd. Dus b.v. wanneer je het object “uitschakelt”.

de afbeelding of de tekst van een object te veranderen.

Vele GotFocus het object de focus krijgt.

de opmaak van het object te veranderen.

Invoervak LostFocus het object de focus verliest.

de invoer te valideren, bijvoorbeeld om te teksten of de invoer wel een string is.

Hoofdstuk 5 87

Object Gebeurtenis Wanneer … Handig om …Vele MouseEnter

MouseLeavede cursor het object binnengaat of verlaat.

de lay-out, bij voorbeeld de lettergrootte of de afbeelding, van een object aan te passen. Of om een informatiescherm dat hoort bij het object aan te roepen/sluiten.

Keuzelijst SelectedIndexChanged er een item in de lijst wordt geselecteerd.

de gekozen waarde te lezen en door te geven aan een query die vervolgens de op het scherm getoonde gegevens aanpast aan de gemaakte selectie.

Datagridview CellClick er op een cel wordt geklikt.

allerlei acties te laten plaatsvinden afhankelijk van waar er op het datagridview is geklikt.

Stel je voor je wilt je programma iets laten doen afhankelijk van waar de gebruiker in het datagridview heeft geklikt en van de waarde van property Value van de aangeklikte cel.

Die waarden kun je opvragen via DataGridView1.CurrentCellAddress.X en DataGridView1.CurrentCellAddress.Y. De tekst (value) van de cel zit in DataGridView1.CurrentCell.Value.

1. Maak een DataGridView1_CellClick subroutine.2. Pas de subroutine als volgt aan:

Private Sub DataGridView1_CellClick(sender As Object, e As DataGridViewCellEventArgs) Handles DataGridView1.CellClick MessageBox.Show("Col is " & DataGridView1.CurrentCellAddress.X & ", Row is " & DataGridView1.CurrentCellAddress.Y & ", Value is " & DataGridView1.CurrentCell.Value) End Sub

(Denk eraan dat je alle code op 1 regel typt.)

3. Start je project en klik op het datagridview.

Hoofdstuk 5 88

De Messagebox geeft de rij, kolom en tekst van de cel terug. Heb je bij voorbeeld in de tweede rij, derde kolom geklikt, dan is het rijnummer 1 en het kolomnummer 2. Er wordt immers vanaf 0 geteld.

4. Klik nog een paar keer op ander cellen om het resultaat te zien.5. Sluit je project.

En wat heb je daar nou aan? Wel, wanneer, zoals in dit voorbeeld, in de eerste kolom van het datagridview het id nummer van een leerling staat, dan kun je deze waarde inlezen en gebruiken in een query om andere gegevens van deze leerling op te halen uit de database. In het hoofdstuk over webapplicaties komt dit weer ter sprake.

Object Gebeurtenis Wanneer … Handig om …DateTimePicker/ TextChanged en

ValueChangeder een datum wordt gekozen.

de gekozen gegevens door te geven aan bij voorbeeld een tekstvak.

Bijvoorbeeld bij het aanmaken van een nieuwe record, kan het voor de gebruiker makkelijk zijn om een in te voeren datum uit de DateTimePicker te kiezen. Deze wordt dan in de textbox voor de datum geplaatst. Zo kun je er als programmeur voor zorgen dat het formaat dat ingevoerd wordt overeenkomt met het formaat van het bijbehorende datumveld in de database. Je zou dit kunnen doen in via de TextChanged gebeurtenis:De subroutine ziet er dan als volgt uit:

Private Sub DateTimePicker1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DateTimePicker1.TextChangedtxtDatum.Text = DateTimePicker1.ValueEnd Sub

Object Gebeurtenis Wanneer … Handig om …MonthCalender DateChanged er een datum

wordt gekozen.de gekozen gegevens door te geven aan bij voorbeeld een tekstvak.

De gebeurtenis heet anders, maar werkt hetzelfde als de TextChanged en ValueChanged gebeurtenissen van het DateTimePicker object.

Hoofdstuk 5 89

Hoofdstuk 6 Zonder wizards, maar in code

In dit hoofdstuk leer je hoe je zonder wizards, maar in code een verbinding met een database maakt en met zelfgemaakte query’s de gegevens in die database ophaalt of bijwerkt. Ook leer je hoe je afbeeldingen behorend bij gegevens in een database kunt tonen. En tenslotte is er nog een extra stuk over hoe je gegevens uit een Microsoft Excel spreadsheetbestand importeert in een Microsoft Access database.

In het project profielkeuzes in een van de vorige hoofdstukken heb je met behulp van wizards contact gemaakt met een database. Je hebt gegevens opgehaald uit de database en in een dataset geplaatst. Je hebt de gegevens in de dataset gewijzigd, een record toegevoegd en een record verwijderd. En daarna heb je de wijzigingen in de dataset weggeschreven naar de onderliggende database. Dat werkt op zich prima, maar soms is het beter om de gegevens in de database onmiddellijk bij te werken. Dit is bijvoorbeeld het geval wanneer meerdere gebruikers tegelijkertijd met dezelfde database werken en daar wijzigingen in aanbrengen. Je wilt in zo’n situatie dat iedereen met de meest recente gegevens werkt. Je maakt dan nadat je wijzigingen in de gegevens hebt aangebracht verbinding met de database en voert alle wijzigingen direct in de database door. Onmiddellijk nadat je de wijzigingen in de database hebt doorgevoerd, lees je dan de gewijzigde gegevens in de database weer in naar de dataset die de gegevens die je in je programma ziet bevat. Zo blijf je bij. Dit zou je allemaal kunnen doen door na elke wijziging het update commando van de bij de dataset behorende data-adapter aan te roepen, maar je hebt meer controle over wat er gebeurt wanneer je zelf commando’s maakt. Je gebruikt dus niet de select, insert, delete en update commando’s van de data-adapter, maar je maakt zelf in SQL de query’s om de gegevens in de database te wijzigen. Die gebruik je dan om de database te benaderen.

Je gaat in dit hoofdstuk een aantal projecten maken met verschillende databases. Deze databases worden als resources toegevoegd aan de projecten.

Gegevens ophalen uit een database in code - uitlegDe code om gegevens op te halen uit een database is vrij uitgebreid. Daarom volgt er nu eerst een stuk uitleg. Je hoeft hier nog niets te maken.

Hoofdstuk 6 90

Een verbinding maken in codeOm verbinding te kunnen maken heb je een zogenaamde verbindingsstring (in het Engels connection string) nodig. In deze string geef je aan met welk type provider je werkt en waar de database zich bevindt. Een provider is hier geen internet service provider, maar een stuk software, een zogenaamde database engine, dat de gegevens in de database beheert. Microsoft Access versies 2000 en 2003 gebruiken de provider Jet.OLEDB.4.0. Vanaf versie 2007 gebruikt Access de provider Microsoft.ACE.OLEDB.12.0. Je kunt nog meer instellen in een verbindingsstring. Zo kun je, wanneer de database beveiligd is met een wachtwoord, dit wachtwoord in de verbindingsstring instellen. Keuzepakket.accdb is niet beveiligd met een wachtwoord en dat hoef je dus nu niet in te stellen. Het dimensioneren en instellen van de verbindingsstring kan in 1 keer. En wel als volgt:

Public strVerbindingsString As String = "provider=Microsoft.ACE.OLEDB.12.0;Data Source= .\Resources\keuzepakket.accdb;"

Deze verbindingsstring bestaat uit twee delen: “Provider = Microsoft.ACE.OLEDB.12.0;" bepaalt de provider. En "Data Source= keuzepakket.accdb;" geeft het pad naar de data source. Dit is de database keuzepakket.accdb die in de map Resources staat.

Dan dimensioneer je een nieuw object genaamd verbinding1. Dit object is van het type OleDbConnection en het gebruikt de informatie in de parameter strVerbindingsString om te bepalen via welke provider en met welke database het object verbinding moet maken. Dan open je de verbinding. Dit gaat als volgt:

Public verbinding1 As New OleDbConnection(strVerbindingsString)verbinding1.Open()

Deze verbindingsstring en verbinding heb je in het project in verschillende subroutines nodig. Om ze niet telkens opnieuw te hoeven typen zet je ze als publieke variabelen helemaal boven in je code, direct na Public Class Form1. Ze zijn dan vanuit elke subroutine benaderbaar.

Nadat je de verbinding met de database hebt geopend, kun je door middel van query’s de gegevens in de database benaderen, en dus gegevens uit de database ophalen, of gegevens veranderen, toevoegen of verwijderen. Als dat klaar is, sluit je de verbinding met:

verbinding1.close()

Tijd om te oefenen hoe je in code een verbinding met een database tot stand brengt.1. Maak in Visual Studio een nieuwe Windows Forms Application en noem het

project verbinding.2. Sla het op in de map C:\Users\...\Documents\Visual Studio 2015\Projects.3. Plaats een knop op het scherm.4. Geef deze knop de tekst Test verbinding met de database.5. Maak de knop breder zodat de gehele tekst zichtbaar is.

Hoofdstuk 6 91

6. In de menubalk kies Project – verbinding properties – Resources.7. Klik op het pijltje naast Add Resource – Add Existing File.8. Kies in de map C:\Users\...\Documents\vbmetdatabases2015community

de database keuzepakket.accdb - Open.

Nu je de database hebt toegevoegd zie je hem rechts in de Solution Explorer in de map Resources.

1. Dubbelklik op de knop om een Button1_Click eventhandler te maken.2. Schrijf nu de volgende code:

Let op! Heb je álle code zoals hierboven gemaakt? Ook de code boven de Button1_Click eventhandler? En de code helemaal bovenaan?

3. Test je project.

Als alles goed is gegaan zie je wanneer je op de knop klikt in de Messagebox de mededeling “Hoera, er is verbinding”.


Om goede query’s te kunnen maken moet je de structuur van de database kennen. Het strokendiagram van de database keuzepakket.accdb ziet er als volgt uit:

leerlingen

profielen

De database bevat 2 tabellen. Links zie je de namen van de tabellen: leerlingen en profielen. Van elke tabel wordt het sleutelveld aangegeven door middel van een horizontale pijl met dubbele kop. De relatie tussen de twee tabellen wordt aangeduid door de andere pijl ook wel de foreign key genoemd.

Een query maken in codeOm de gegvens in de database te benaderen gebruik je query’s. Een query om alle gegevens uit de tabel profielen te selecteren maak je als volgt:

Hoofdstuk 6 92

id naam profiel

profiel vak1 vak2 vak3

Dim qrySelect As StringqrySelect = "SELECT * FROM profielen"

Het * symbool betekent dat je gegevens van alle velden van de tabel profielen opvraagt. Je zou natuurlijk ook de namen van alle velden kunnen intypen. Dit is soms handiger omdat je daarmee de volgorde van de velden kunt bepalen. Maar in dit voorbeeld is * goed genoeg.

Een commando maken in codeOm een query te kunnen uitvoeren gebruik je een commando. Zo dimensioneer je een commando:

Dim command1 As New OleDbCommand

Je moet aangeven dat het CommandType van het type Text is:

command1.CommandType = CommandType.Text

Als commandtekst (query) van het commando stel je qrySelect in. Dit is de query die je eerder hebt gemaakt. command1.CommandText = qrySelect

In plaats van de variabele qrySelect te gebruiken, had je hier ook direct een query kunnen intypen. Dan zou het zijn geweest:

command.CommandText="SELECT * FROM profielen"

Maar het is vaak overzichtelijker om de query apart te houden.

Om het commando te kunnen uitvoeren, moet het commando weten van welke verbinding het gebruik moet maken.

command1.Connection = verbinding1

Je commando om gegevens uit de database op te halen is klaar. Maar om het commando te kunnen uitvoeren heb je een data-adapter of een datareader nodig. Wanneer je een datareader gebruikt wordt verderop in dit hoofdstuk uitgelegd. In dit voorbeeld gebruik je een data-adapter.

Een data-adapter maken in codeDe code om een data-adapter te maken is als volgt:

Dim adapter1 As New OleDbDataAdapter

Data-adapters kunnen meerdere commando’s hebben. Een select commando om gegevens te selecteren, een update commando om gegevens in de database mee bij te werken, een insert commando om nieuwe gegevens in de database te plaatsen en een delete commando om gegevens te wissen. Adapter1 gebruikt het commando command1 als select commando. Dit select commando is dus het commando om gegevens op te halen.

Hoofdstuk 6 93

adapter1.SelectCommand = command1

Een dataset maken in codeAls je dan met het select commando van de data-adapter gegevens hebt opgehaald, wil je ze ergens bewaren. Hiervoor gebruik je een dataset. Je dimensioneert een dataset, genaamd dataset1, met daarin een tabel profielen. In deze tabel bewaar je de opgehaalde gegevens.

Dim dataset1 As New DataSet("profielen")

Een dataset vullen in codeMet de methode fill van de data-adapter kun je tenslotte daadwerkelijk de dataset vullen.

adapter1.Fill(dataset1)

Een datagridview aan een dataset koppelen in codeMaar je ziet nog steeds geen gegevens. Om deze gegevens zichtbaar te maken kun je gebruik maken van bijvoorbeeld tekstvakken (TextBox), een keuzelijst (ListBox) of een dataraster (DataGridView). In dit voorbeeld gebruik je een DataGridView. Bij een DataGridView hoef je alleen aan te geven dat zijn data source een bepaalde dataset is. In dit geval dataset1. Met de methode Tables(0) geef je aan dat het gaat om de eerste tabel.

DataGridView1.DataSource = dataset1.Tables(0)

Je mag ook de tabelnaam geven, in dit voorbeeld “profielen” .

DataGridView1.DataSource = dataset1.Tables(“profielen “)

Gegevens ophalen uit een database in code – aan de slagDit waren de uitleg en een kleine vingeroefening. Nu ga je echt aan de slag. Je gaat een aantal kleine voorbeeldprojecten maken.

Een datagridview vullen in code1. Zet een DataGridView op het form. (Het staat in de Toolbox, in de tab Data.)2. Maak het form en het DataGridView iets groter.3. Dubbelklik op de knop om de Button1_Click subroutine te maken.4. Pas de Button1_Click subroutine als volgt aan:

Hoofdstuk 6 94

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click verbinding1.Open() Dim qrySelect As String qrySelect = "Select * FROM profielen"

Dim command1 As New OleDbCommand command1.CommandType = CommandType.Text command1.CommandText = qrySelect command1.Connection = verbinding1

Dim adapter1 As New OleDbDataAdapter adapter1.SelectCommand = command1

Dim dataset1 As New DataSet("profielen") adapter1.Fill(dataset1) DataGridView1.DataSource = dataset1.Tables(0) verbinding1.Close() End Sub

5. Run je project en klik op de knop.

Je ziet de gegevens in datagridview1 verschijnen.

6. Sluit het programma.

Het gebruik van aanhalingstekens, & en _ in query’sJe hebt de tekens ‘ ’, “ ”, & en _ nu al een paar keer gezien in dit boek. Omdat het verkeerd gebruik van deze tekens een bron is van veel frustratie volgt hier wat uitleg.

Aanhalingstekens“In code staat een string meestal tussen dubbele aanhalingstekens. Bijvoorbeeld qrySelect = "SELECT * FROM profielen".

’Wanneer je binnen een string nog een string wilt aangeven, kun je hiervoor niet nog een keer dubbele aanhalingstekens gebruiken. Dus qrySelect = “SELECT woonplaats FROM leerlingen WHERE achternaam = “Veenstra”” werkt niet. De computer denkt dat de string na de tweede dubbele aanhalingstekens, dus voor de V van Veenstra, is afgelopen. Binnen een string gebruik je dan ook enkele aanhalingstekens om een andere string aan te geven. Een goede query is:

qrySelect = “SELECT woonplaats FROM leerlingen WHERE achternaam = ‘Veenstra’”.

&Soms wil je in een query gegevens opnemen die je inleest uit een object, zoals de geselecteerde tekst in een combobox. Stel je voor dat er een combobox is, waarin de gebruiker kan kiezen welke achternaam opgenomen moet worden in de query.

De code wordt dan:qrySelect = “SELECT woonplaats FROM leerlingen WHERE achternaam = ‘” & combobox1.Text & “‘”

Hoofdstuk 6 95

De query begint zoals altijd met dubbele aanhalingstekens. Deze string loopt door tot na het enkele aanhalingsteken na =. Normaal zou nu de naam komen, maar nu niet. Je gebruikt immers een stringvariabele, namelijk de tekstwaarde van combobox1. Daarom sluit je de string na het enkele aanhalingsteken met dubbele aanhalingstekens. Dan komt het ampersand teken &. Dit combineert twee strings. Tenslotte plak je met nog een ampersand het laatste stukje string “’” erachter. Dit kleine stukje string bevat het enkele aanhalingsteken dat de string achternaam afsluit. Let op! Wanneer je geen stringvariabele gebruikt, maar bij voorbeeld een double, gebruik je de enkele aanhalingstekens niet. Die gebruik je alleen bij strings en stringvariabelen.

& en _Sommige regels code zijn erg lang. Dit komt vooral voor wanneer je een uitgebreide query maakt. Je gebruikt dan een ampersand gevolgd door een spatie en een liggend streepje om de regel af te breken en aan de volgende regel vast te plakken. Bij voorbeeld:

qrySelect= “SELECT woonplaats, postcode, telefoonnummer FROM leerlingen “ & _ “WHERE achternaam = ‘Veenstra’”

Een datareader gebruiken in codeTot nu toe heb je om gegevens met een query uit een database te lezen een data-adapter gebruikt. Zo’n data-adapter plaatst alle gegevens die met een select query zijn opgehaald in een dataset. Maar je kunt ook gebruik maken van een datareader. Met een datareader kun je afzonderlijke gegevens een voor een uitlezen en bijvoorbeeld samenvoegen tot één geheel en in een listbox plaatsen.Ook kun je één bepaalde waarde zoeken en in een textbox zetten.Een datareader is weliswaar niet zo gestructureerd dan een dataset maar geeft in bepaalde situaties veel sneller toegang tot data.

Eerst open je de verbinding.

verbinding1.Open()

Ook voor een datareader heb je een commando nodig. In onderstaand voorbeeld bepaal je de tekst van de select query en de verbinding gelijk bij het dimensioneren van het commando. Je gebruikt nu geen variabele qrySelect, maar typt de tekst van de query direct in.

Dim command1 As New OleDb.OleDbCommand("SELECT * FROM profielen ", verbinding1)

Dan dimensioneer je de datareader en je geeft command1 gelijk opdracht om de gegevens op te halen.

Dim dataLezer1 As OleDb.OleDbDataReader = command1.ExecuteReader()

Een listbox vullen in code met behulp van een datareaderZodra je het commando ExecuteReader hebt uitgevoerd zitten de rijen (rows, ofwel records) met gegevens in de datareader. Je wilt ze in een listbox plaatsen. Voor de

Hoofdstuk 6 96

zekerheid maak je die listbox eerst even leeg. Doe je dit niet, dan worden de nieuwe gegevens toegevoegd aan de eventueel al aanwezige gegevens. Je maakt de listbox als volgt leeg:

ListBox1.Items.Clear()

Om iets uit de datareader te kunnen lezen gebruik je de methode Read(). Er wordt dan een hele rij met gegevens gelezen. Wanneer de te lezen waarde van het type string is gebruik je de methode GetString(). Voor een boolean waarde gebruik je de methode GetBoolean(), voor een double waarde de methode GetDouble() enzovoorts. Maar je mag ook voor al deze typen waarden GetValue() gebruiken. Je kunt regels inlezen zolang er rijen in de datareader staan.

In de code hieronder worden telkens 4 ingelezen items met behulp van ampersand tekens gecombineerd tot 1 string. Die string wordt dan toegevoegd aan de lijst met items van Listbox1.Het eerste veld in elke rij (=record) van de gegevens die je uit de datareader inleest is het veld id. Dit zou je uit kunnen lezen met GetString(0). 0 is immers het nummer van het eerste veld. Maar in dit voorbeeld wil je de inhoud van het veld id niet tonen. Je begint te lezen bij het tweede veld, dat nummer 1 heeft. Je gebruikt een While – constructie om te lezen totdat er geen rijen meer in de datalezer staan.

While dataLezer1.ReadListBox1.Items.Add(dataLezer1.GetString(1) & ": " & dataLezer1.GetString(2) & ": " & dataLezer1.GetString(3) & ": " & dataLezer1.GetString(4))End While

De volgende code met GetValue zou hetzelfde resultaat opleveren:

While dataLezer1.ReadListBox1.Items.Add(dataLezer1.GetValue(1) & ": " & dataLezer1.GetValue(2) & ": " & dataLezer1.GetValue(3) & ": " & dataLezer1.GetValue(4))End While

En tenslotte sluit je de verbinding met de datalezer en de verbinding met de database.

verbinding1.Close()

1. Voeg aan het project een keuzelijst (listbox) en een knop toe.2. Pas de Button2_Click subroutine als volgt aan:

(Let op! Type de code die vooraan de regel begint door op de vorige regel. Het past hier niet meer op de vorige regel. In de code past het wel.)

verbinding1.Open() Dim command1 As New OleDb.OleDbCommand("SELECT * FROM profielen ", verbinding1) Dim dataLezer1 As OleDb.OleDbDataReader = command1.ExecuteReader() ListBox1.Items.Clear() While dataLezer1.Read ListBox1.Items.Add(dataLezer1.GetValue(0) & ": " & dataLezer1.GetValue(1) & ": " & dataLezer1.GetValue(2) & ": " & dataLezer1.GetValue(3))

Hoofdstuk 6 97

End Whiledatalezer1.close verbinding1.Close()

1. Start je project en klik op de tweede knop.

Je ziet nu de gegevens in ListBox1 verschijnen.


Een tekstvak vullen in code1. Voeg aan het project een tekstvak en een knop toe.2. Pas de Button3_Click subroutine als volgt aan:

(Let op! Type ook hier weer de code die vooraan de regel begint door op de vorige regel.)

verbinding1.Open() Dim command1 As New OleDb.OleDbCommand("SELECT vak2 FROM profielen ", verbinding1) Dim dataLezer1 As OleDb.OleDbDataReader = command1.ExecuteReader() dataLezer1.Read() TextBox1.Text = dataLezer1.GetValue(0) datalezer1.Close verbinding1.Close()

Je gebruikt in dit voorbeeld GetValue om de gegevens uit de datalezer op te halen.

3. Run je project en klik op de derde knop.

Je ziet nu de gegevens in het tekstvak verschijnen.

4. Sluit het programma.5. Sluit de solution.

Objecten aan een dataset binden in codeIn hoofdstuk 2 heb je al gezien hoe je eenvoudig met behulp van instellingen in het Properties scherm objecten zoals tekstvakken, keuzelijsten en datarasters aan velden in een tabel van een dataset kunt koppelen. Dit koppelen wordt ook wel binden genoemd. In de voorbeelden hiervoor heb je die binding nog niet gebruikt omdat je telkens de beschikbare waarden in de datareader of dataset in de objecten hebt gezet. Maar het is beter om de objecten wel te binden. Als er dan veranderingen in de gegevens in de dataset of datareader plaatsvinden, worden de nieuwste gegevens getoond in de objecten. Dat kan natuurlijk ook in code.

Een tekstvak aan een dataset binden in code1. Maak een nieuwe Windows Forms Application genaamd project2.2. Sla dit op in de map C:\Users\...\Documents\Visual Studio 2015\Projects.3. Plaats een knop en een tekstvak op het formulier.4. Zet aan het begin van het project (boven Public Class Form1) de imports:

Imports System.Data.OleDbImports System.Data

Hoofdstuk 6 98

5. Voeg de database keuzepakket.accdb als Resource toe aan het project.6. Maak in de code een lege regel na Public Class Form1.7. Voeg daar nu volgende code toe:

Public strVerbindingsString As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\keuzepakket.accdb;"Public verbinding1 As New OleDb.OleDbConnection(strVerbindingsString)

8. Dubbelklik op button1 en pas de Button1_Click subroutine als volgt aan:(Type de code die vooraan de regel begint door op de vorige regel.)

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT vak2 FROM profielen WHERE profiel='CM'", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "vak") TextBox1.DataBindings.Clear() TextBox1.DataBindings.Add(New Binding("Text", dataset1, "vak.vak2")) verbinding1.Close() End Sub

Eerst wordt de verbinding geopend. Dan wordt er een data-adapter gedimensioneerd en er wordt er gelijk een query voor deze adapter ingesteld. Deze query selecteert de gegevens in het veld vak2 in de tabel profielen waarbij alleen de records worden opgehaald waar in het veld profiel de waarde CM staat. De adapter gebruikt de verbinding verbinding1. Dan wordt er een dataset gedimensioneerd en daarna worden door adapter1 de gegevens opgehaald en in dataset1 geplaatst in een tabel genaamd “vak”. Zo’n tabel in een dataset kan meerdere velden bevatten, maar in dit voorbeeld zet je er alleen de opgehaalde gegevens uit het veld vak2 in. De code Textbox1.Databindings.Clear() is nodig om een eventueel al aanwezige binding te verwijderen. Vergeet je dit te doen, dan krijg je een de tweede keer dat je op de knop drukt een foutmelding. Er is dan immers al een binding. Textbox1 kan nu worden gebonden aan de gegevens in de dataset. De binding is van het type Text. De gegevens in de dataset zijn van dit type, en ook de waarden van de eigenschap text van het tekstvak zijn van het type tekst. Textbox1 wordt gebonden aan dataset1, tabel vak, veld vak2.

1. Start je project en klik op de knop.

Je ziet de inhoud van het eerste record van het veld vak2 van de tabel vak in dataset1 verschijnen. Je ziet het woord geschiedenis.


Een listbox aan een dataset binden in codeZo kun je ook een dataset aan een listbox koppelen.

1. Plaats een knop en een listbox op het formulier.

Hoofdstuk 6 99

2. Dubbelklik op button 2 en pas de Button2_Click subroutine als volgt aan:(Let op! Type de code die helemaal vooraan de regel begint door op de vorige regel.)

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT vak2 FROM profielen WHERE profiel='CM'", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "vak") ListBox1.DataSource = dataset1 ListBox1.DisplayMember = "vak.vak2" verbinding1.Close() End Sub


Je ziet het tweede vak van het profiel CM, geschiedenis, opnieuw verschijnen.


Je ziet dat de code bijna hetzelfde is als in het vorige voorbeeld. Het enige verschil zit hem in de twee regels die over de ListBox1 gaan. In de eerste regel wordt vastgesteld dat de DataSource dataset1 is. En in de tweede regel wordt duidelijk dat het getoonde veld in de dataset in de tabel vak zit en vak2 heet.

Maar stel je eens voor dat in je in dataset niet vak2 van het profiel CM wilt zien, maar de derde vakken van alle profielen. Dat gaat eenvoudig door de query aan te passen. Verander de query in de Button2_Click subroutine in:

("SELECT vak3 FROM profielen", verbinding1)

En pas ook de instelling DisplayMember van ListBox1 aan:

ListBox1.DisplayMember = "vak.vak3"


Je ziet nu alle derde vakken van alle profielen.


Een combobox aan een dataset binden in code Het binden van een combobox gaat bijna hetzelfde als het binden van een listbox. Alleen is het object nu ComboBox1 in plaats van ListBox1.

1. Plaats een knop en een combobox op het formulier.2. Dubbelklik op button 3 en pas de Button3_Click subroutine als volgt aan:

(Let op! Type de code die helemaal vooraan de regel begint door op de vorige regel.)

Hoofdstuk 6 100

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT naam FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "leerlingnamen") ComboBox1.DataSource = dataset1 ComboBox1.DisplayMember = "leerlingnamen.naam" verbinding1.Close() End Sub

3. Start je project en klik op button 3.4. Klik op het driehoekje in de combobox.

Je ziet nu alle namen.


Een DataGridView opmaken in codeJe hebt in een eerder hoofdstuk 5 al met een zogenaamd DataGridView gewerkt.Je kunt de lay-out van een DataGridView via het Properties scherm instellen,maar het kan ook in code.

1. Plaats een knop en een DataGridView op het formulier.2. Dubbelklik op button 4 en pas de Button4_Click subroutine als volgt aan:

(Let op! Type de code die helemaal vooraan de regel begint door op de vorige regel.)

Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click

verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT * FROM profielen",verbinding1)Dim dataset1 As New DataSetadapter1.Fill(dataset1, "profielen")

DataGridView1.DataSource = dataset1.Tables("profielen")

DataGridView1.Columns(0).HeaderText = "profiel"DataGridView1.Columns(0).Width = "50"

DataGridView1.Columns(1).HeaderText = "eerste vak"DataGridView1.Columns(1).Width = "100"

DataGridView1.Columns(2).HeaderText = "tweede vak"DataGridView1.Columns(2).Width = "100"

DataGridView1.Columns(3).HeaderText = "derde vak"DataGridView1.Columns(3).Width = "100"

Me.DataGridView1.DefaultCellStyle.SelectionForeColor = Color.YellowMe.DataGridView1.DefaultCellStyle.BackColor = Color.YellowMe.DataGridView1.DefaultCellStyle.Font = New Font("Arial", 8)Me.DataGridView1.Rows(0).DefaultCellStyle.BackColor = Color.PaleGreenMe.DataGridView1.Columns(0).DefaultCellStyle.BackColor = Color.MediumOrchid

Hoofdstuk 6 101

Me.DataGridView1.DefaultCellStyle.ForeColor = Color.BlueMe.DataGridView1.Item(2, 2).Style.BackColor = Color.Violet

verbinding1.Close()

End Sub

Hoe werkt dit? Nadat je verbinding hebt gemaakt, de dataset gevuld, en de dataset aan het raster gebonden, bepaal je de lay-out. Met de onderstaande code stel je de tekst boven kolom 0 en de breedte van deze kolom in.

DataGridView1.Columns(0).HeaderText = "nr"DataGridView1.Columns(0).Width = "20"

Met de methode DefaultCellStyle kun je achtergrond- en voorgrondkleur alsmede het font van alle cellen van het raster instellen.

Met DataGridView1.DefaultCellStyle.BackColor zet je de voorgrondkleur van de geselecteerde rij op bruin.

Me.DataGridView1.DefaultCellStyle.SelectionForeColor = Color.Brown

De achtergrondkleur van alle cellen instellen gaat zo:

Me.DataGridView1.DefaultCellStyle.BackColor = Color.Yellow

En het font van alle cellen zet je als volgt op Arial, grootte 8:

Me.DataGridView1.DefaultCellStyle.Font = New Font("Arial", 8)

Met de volgende code zet je de achtergrondkleur van de eerste rij op groen.

Me.DataGridView1.Rows(0).DefaultCellStyle.BackColor = Color.PaleGreen

En met deze code zet je de achtergrondkleur van de eerste kolom op oranje.

Me.DataGridView1.Columns(0).DefaultCellStyle.BackColor = Color.Orange

Met de bovenstaande code zet je de kleur van tekst van alle cellen op blauw.

Me.DataGridView1.DefaultCellStyle.ForeColor = Color.Blue

En met deze code zet je de achtergrondkleur van één bepaalde cel (derde rij en derde kolom) op violet.

Me.DataGridView1.Item(2, 2).Style.BackColor = Color.Violet

1. Start je project en klik op de vierde knop.

Je ziet nu het datagridview keurig opgemaakt.


Hoofdstuk 6 102

De gegevens in een database wijzigen in codeJe gaat in het volgende project weer werken met de database keuzepakket.accdb. Je gaat in code een record toevoegen, gegevens wijzigen en een record verwijderen.

Een record toevoegen aan een database in codeEen record toevoegen aan een database gaat in SQL via een insert query.Zo’n query ziet er als volgt uit:

INSERT INTO naamtabel (naamveld1, naamveld2, naamveld3…) VALUES (waarde1, waarde2, waarde3…)

Dus INSERT INTO gevolgd door de naam van de tabel waar de gegevens aan toegevoegd moet worden. Dan volgen tussen haakjes de namen van alle velden waar iets ingevuld moet worden. Daarna VALUES, en weer tussen haakjes de waarden die in de eerdergenoemde velden moeten worden ingevuld. Wanneer je de volgende gegevens wilt invoeren: id: 22, naam: Louise, profiel: NT, dan ziet de query er als volgt uit:

INSERT INTO leerlingen (id, naam, profiel) VALUES (22, 'Louise', 'NT')

Je ziet dat de waarden Louise en NT tussen enkele aanhalingstekens staan. Dit moet omdat ze van het type string zijn. Het veld id is van het type integer en dus staat de waarde 22 niet tussen haakjes.

1. Maak een nieuw Windows Forms Application project genaamd project3 in de map C:\Users\...\Documents\Visual Studio 2015\Projects.

2. Zet aan het begin van het project de imports:

Imports System.Data.OleDbImports System.Data

3. Voeg de database keuzepakket.accdb als resource toe aan het project.4. Type de verbindingsstring en de verbinding weer aan het begin van de code

van Form1, direct na Public Class Form1.(Type de code die helemaal vooraan de regel begint door op de vorige regel.)

Public strVerbindingsString As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\keuzepakket.accdb;"Public verbinding1 As New OleDb.OleDbConnection(strVerbindingsString)

Voeg de volgende objecten aan het project toe en geef ze de volgende eigenschappen.

Hoofdstuk 6 103

Object: knopName: btnToonGegevensText: Toon gegevens in raster

Object: knopName: btnNieuweRijOpslaanText: Nieuwe rij opslaan

Object: knopName: btnUpdateText: Gewijzigde gegevens opslaan

Object: tekstvakName: txtIdText:(leeg)

Object: tekstvakName:txtNaamText:(leeg)

Object: tekstvakName: txtProfielText:(leeg)

Object: labelName:lblIdText: Id

Object: labelName:lblNaamText: Naam

Object: labelName:lblProfielText: Profiel

Object: tekstvakName: txtId2Text:(leeg)

Object: tekstvakName:txtNaam2Text:(leeg)

Object: tekstvakName: txtProfiel2Text:(leeg)

Object: labelName:lblId2Text: Id

Object: labelName:lblNaam2Text: Naam

Object: labelName:lblProfiel2Text: Profiel

Object: knopName: btnVerwijderText: Verwijder geselecteerde rij

Object: datagridviewName: DataGridView1

Het scherm ziet dan er bij voorbeeld als volgt uit:

1. Maak de btnToonGegevens_Click subroutine als volgt:

Private Sub btnToonGegevens_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnToonGegevens.Click verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "Leerlinggegevens") DataGridView1.DataSource = dataset1.Tables(0) verbinding1.Close() End Sub

Deze code bevat niets nieuws. De tabel in dataset1 heet Leerlinggegevens.

Hoofdstuk 6 104

2. Pas de subroutine btnNieuweRijOpslaan_Click als volgt aan:

Private Sub btnNieuweRijOpslaan_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNieuweRijOpslaan.Click verbinding1.Open() If txtId.Text = "" Or txtNaam.Text = "" Or txtProfiel.Text = "" Then MsgBox("Vul alle drie bovenste textboxen in !") Exit Sub End If

Dim qryInsert As String Dim id As Integer id = CInt(txtId.Text) qryInsert = "INSERT INTO leerlingen ( id, naam , profiel) values (" & id & ",'" & txtNaam.Text & "','" & txtProfiel.Text & "')" Dim command1 As New OleDbCommand command1.CommandType = CommandType.Text command1.CommandText = qryInsert command1.Connection = verbinding1 command1.ExecuteNonQuery() MsgBox("De gegevens: " & txtId.Text & " " & txtNaam.Text & " " & txtProfiel.Text & " zijn aan de database toegevoegd") Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "Leerlinggegevens") DataGridView1.DataSource = dataset1.Tables(0) verbinding1.Close() End Sub

Hier zie je wel iets nieuws. Je gebruikt hier geen select query, maar een insert query. Insert, update, en delete query’s worden uitgevoerd door het commando ExecuteNonQuery. Dit lijkt een onlogische naam. Je voert immers wel een query uit. Maar het betekent gewoon dat je een query uitvoert die geen resultaat teruggeeft. Dus geen select query. En wanneer het commando is uitgevoerd, en de gegevens aan de database zijn toegevoegd, toont een messagebox de gebruiker dat het gelukt is. Tenslotte wordt de dataset opnieuw gemaakt en gevuld en wordt de dataset opnieuw aan het datagridview gebonden om de nieuwste stand van zaken te tonen.

1. Start je project.2. Klik op de knop Toon gegevens in raster.

De gegevens verschijnen in het datagridview.

3. Vul in de3 linker tekstvakken de volgende gegevens in:Id: 22Naam: LouiseProfiel: NT

4. Druk op de knop Nieuwe rij opslaan.

Er verschijnt een messagebox die meldt dat de gegevens zijn opgeslagen.

5. In het raster scrol omlaag en controleer of de gegevens zijn toegevoegd.

Hoofdstuk 6 105

Gegevens wijzigen in een database in codeHet wijzigen van gegevens in een database gaat met een update query. In zo’n query geef je aan welke gegevens gewijzigd moeten worden en in welke records dit moet gebeuren. Je moet die records dus kunnen selecteren. Dit kan in de database keuzepakket.accdb met behulp van het veld id. Dit is een sleutelveld en dus zijn de waarden in dit veld uniek. Als je het id van een leerling weet, kun je daarmee zijn of haar record selecteren.

De syntax van een update query is als volgt:

UPDATE tabelnaam SET (veld1 = waarde1, veld2 = waarde2, veld3 = waarde3..) WHERE veld = waarde

In de database zijn de gegevens van Louise als volgt: id: 22, naam: Louise, profiel: NT.

Stel je voor dat je een of meerdere van die waarden wilt wijzigen. Dan kun je de waarden bij voorbeeld plaatsen in 3 tekstvakken en ze daarin waar nodig wijzigen. De waarde van het veld id verander je natuurlijk niet. Dat is immers een sleutelwaarde. Daarna gebruik je de update query om de al dan niet gewijzigde waarden naar het juiste record in de database weg te schrijven. De code daarvoor is:

UPDATE leerlingen SET naam = '" & txtNaam2.Text & "', profiel = '" & _txtProfiel2.Text & "' WHERE id = " & strId

De waarden van de velden naam en profiel zijn van het type string en moeten tussen enkele aanhalingstekens staan. Het veld id is van het type integer en krijgt dus geen aanhalingstekens.

Om te voorkomen dat iemand per ongeluk de waarde van het veld id verandert, sluit je die af door de eigenschap enabled van txtId2 op False te zetten.

1. Zet de eigenschap enabled van txtId2 op False.

Wanneer de gebruiker dubbelklikt in het datagridview moeten de gegevens van die rij in de drie tekstvakken rechts terecht komen. Om gegevens uit een DataGridView te lezen bepaal je de index van de geselecteerde rij. Dit gaat met CurrentRow.Index.

Dim intGeselecteerderij As Integer intGeselecteerderij = DataGridView1.CurrentRow.Index

Dan loop je in die rij de kolommen langs van kolom 0 tot en met laatste en je plaatst de inhoud van de cellen in variabelen. Dit gaat met:

Variabele = DataGridView1.Item(kolomnummer, rijnummer).Value.toString

De code wordt dan als volgt:

Hoofdstuk 6 106

Dim strId As String Dim strNaam As String Dim strProfiel As String


strId = DataGridView1.Item(0, intGeselecteerderij).Value.ToString strNaam = DataGridView1.Item(1, intGeselecteerderij).Value.ToString strProfiel = DataGridView1.Item(2,intGeselecteerderij).Value.ToString

Tenslotte plaats je de teksten in de variabelen in de tekstvakken helemaal rechts.

txtId2.Text = strId txtNaam2.Text = strNaam txtProfiel2.Text = strProfiel

1. Klik in het formulier zodat je in de code terecht komt.2. Maak in Form1.vb een eventhandler voor het DataGridView1_Click event.

(Selecteer in de middelste kolom DataGridView1 en in de rechterkolom Click.)

3. Pas de gegenereerde DataGridView1_Click subroutine als volgt aan:

Private Sub DataGridView1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DataGridView1.Click Dim strId As String Dim strNaam As String Dim strProfiel As String


strId = DataGridView1.Item(0, intGeselecteerderij).Value.ToString strNaam = DataGridView1.Item(1, intGeselecteerderij).Value strProfiel = DataGridView1.Item(2, intGeselecteerderij).Value

txtId2.Text = strId txtNaam2.Text = strNaam txtProfiel2.Text = strProfiel End Sub

1. Run je project en klik op de knop Toon gegevens in raster.2. Dubbelklik in een van de rijen.

De inhoud van de drie velden van de geselecteerde rij verschijnt in de tekstvakken rechts.

Hoofdstuk 6 107


Nu nog de code om eventuele wijzigingen bij te werken in de database.

1. Zet de volgende code in de subroutine btnUpdate_Click:

Private Sub btnUpdate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnUpdate.ClickIf txtId2.Text = "" Or txtNaam2.Text = "" Or txtProfiel2.Text = "" Then MsgBox("Dubbelklik eerst in het datagridview !") Exit Sub End If Dim strId As String strId = txtId2.Text

verbinding1.Open() Dim qryUpdate As String qryUpdate = "UPDATE leerlingen SET naam = '" & txtNaam2.Text & "', profiel = '" & txtProfiel2.Text & "' WHERE id = " & txtId2.Text

Dim command1 As New OleDbCommand command1.CommandType = CommandType.Text command1.CommandText = qryUpdate command1.Connection = verbinding1 command1.ExecuteNonQuery() Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "Leerlinggegevens") DataGridView1.DataSource = dataset1.Tables(0) verbinding1.Close() End Sub

In het laatste stuk van de code wordt ervoor gezorgd dat de gewijzigde gegevens direct op het scherm zichtbaar worden. De code is dezelfde als de code onder de ‘Toon gegevens in raster knop.

In het stukje

If txtId2.Text = "" Or txtNaam2.Text = "" Or txtProfiel2.Text = "" Then MsgBox("Dubbelklik eerst in het datagridview !") Exit Sub End If

Aan het begin van de code wordt gecontroleerd of de drie meest rechtse tekstvelden gevuld zijn. Als een of meer van deze 3 tekstvelden leeg is wordt er een messagebox getoond en wordt de subroutine afgesloten door de opdracht Exit Sub.

Zoals je inmiddels wel begrijpt plaatst deze update query de waarden in de tekstvakken txtNaam2 en txtProfiel2 in de bijbehorende velden van het record met het juiste id.

1. Start je project en klik op de knop Toon gegevens in raster.2. Dubbelklik in een van de rijen.

Hoofdstuk 6 108

De inhoud van de drie velden van de geselecteerde rij verschijnt in de tekstvakken rechts. De tekst in het tekstvak voor het id is vaag. Daar kun je niet bij.

3. Verander het profiel van NT in NG.4. Druk op de knop Gewijzigde gegevens opslaan.

Je ziet dat de wijziging is doorgevoerd.


Als je het programma opnieuw start zul je, wellicht tot je verbazing zien dat de verandering is verdwenen. De gegevens zijn weer teruggezet naar de originele situatie. Dit komt doordat de eigenschap Copy to Output van de database in de map Resources op Copy always staat. Dit betekent dat elke keer dat je je project start er een kopie van de database wordt gemaakt. Dus vanuit de map C:\Users\...\Documents\vbmetdatabases2015community naar de Resources map van je project. Tijdens het ontwikkelen van de code is dit handig omdat je dan telkens met de originele gegevens werkt. Anders zouden tijdens het ontwikkelen van je project de gegevens in de database telkens veranderen. En dat wil je waarschijnlijk niet. In het hoofdstuk waarin je leert hoe je een setup maakt, leer je hoe je, wanneer je project helemaal klaar is, dit verandert zodat je database niet meer telkens gekopieerd wordt, maar de wijzigingen behouden blijven.

Een record verwijderen uit een database in codeOm een record te verwijderen gebruik je een delete query. De syntax van zo’n query is:

DELETE FROM tabelnaam WHERE veldnaam = waarde

Voor het verwijderen van alle gegevens van Louise, met id 22 wordt de query dan:

DELETE FROM leerlingen WHERE id = 22

1. Genereer een btnVerwijder_Click subroutine.2. Pas de code van de subroutine als volgt aan:

Hoofdstuk 6 109

Private Sub btnVerwijder_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVerwijder.Click Dim strId As String Dim geselecteerderij As Integer geselecteerderij = DataGridView1.CurrentRow.Index strId = DataGridView1.Item(0, geselecteerderij).Value.ToString Dim resultaat As String resultaat = MsgBox("Wilt u deze gegevens echt verwijderen ?", MsgBoxStyle.YesNo) If resultaat = vbYes Then verbinding1.Open()

Dim qryDelete As String qryDelete = "DELETE FROM leerlingen WHERE id = " & strId

Dim command1 As New OleDbCommand command1.CommandType = CommandType.Text command1.CommandText = qryDelete command1.Connection = verbinding1 command1.ExecuteNonQuery()

Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "Leerlinggegevens") DataGridView1.DataSource = dataset1.Tables(0)

verbinding1.Close() Else Exit Sub End If

End Sub

De code is bijna dezelfde als in het vorige voorbeeld. Eerst lees je de waarde uit het veld id van de geselecteerde rij. Die waarde zet je in de variabele strId.

Dim strId As String Dim geselecteerderij As Integer geselecteerderij = DataGridView1.CurrentRow.Index strId = DataGridView1.Item(0,geselecteerderij).Value.toString

Dan vraag je de gebruiker via een messagebox om het verwijderen van de rij te bevestigen.

Dim resultaat As String resultaat = MsgBox("Wilt u deze gegevens echt verwijderen ?", MsgBoxStyle.YesNo) If resultaat = vbYes Then

En als dit gebeurt open je de verbinding en stel je een query samen met de waarde van strId. Deze query voer je uit met command1. Tenslotte lees je de gewijzigde gegevens opnieuw in uit de database.

verbinding1.Open()

Dim qryDelete As String qryDelete = "DELETE FROM leerlingen WHERE id = " & strId

Hoofdstuk 6 110

Dim command1 As New OleDbCommand command1.CommandType = CommandType.Text command1.CommandText = qryDelete command1.Connection = verbinding1

command1.ExecuteNonQuery()

Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "Leerlinggegevens") DataGridView1.DataSource = dataset1.Tables(0)

Verbinding.Close()

En als de gebruiker ervoor kiest om de rij toch niet te verwijderen en op No klikt spring je uit de subroutine.

Else Exit Sub End If

1. Start je project en klik op de knop Toon gegevens in raster.2. Klik in een rij in het raster.3. Klik op de knop Verwijder geselecteerde rij.4. Klik op OK in de messagebox.

Je ziet dat de geselecteerde rij is verdwenen.

Afbeeldingen tonen via een database in codeSoms wil je naast tekst en numerieke gegevens ook bijbehorende afbeeldingen tonen. In dit voorbeeld laat je de foto’s van de personen in een database laten zien.

Je kunt afbeeldingen in een Microsoft Access database opslaan als Binary Large Objects, ofwel BLOB’s. Het nadeel van het gebruik van BLOB’s is dat je database snel heel groot wordt. Slimmer is het om de naam van het bestand met de afbeelding in de database op te slaan en de bestanden zelf buiten de database te zetten. Je leest dan de naam van het bestand uit de database en gebuikt die naam om het juiste bestand met de afbeelding te laden.

In dit project gebruik je een combobox om te selecteren van wie je een foto wilt zien in een picturebox. Dat kan natuurlijk ook anders. Zo zou je er bij voorbeeld ook voor kunnen kiezen via een klik gebeurtenis de benodigde informatie uit een datagridview te halen. Je hebt eerder in dit hoofdstuk al gezien hoe zoiets gaat.

Je gebruikt voor het volgende project de database fotodatabase.accdb. Je vindt deze database en de bijbehorende grafische bestanden in de map die je hebt gebruikt om de bestanden van dit boek in te bewaren. Waarschijnlijk is dit C:\Users\...\Documents\vbmetdatabases2015community.

1. Maak een nieuw Windows Forms Application project genaamd project4.2. Sla het op in de map C:\Users\...\Documents\Visual Studio 2015\Projects.

Hoofdstuk 6 111

3. Voeg het databasebestand fotodatabase.accdb dat staat in de map C:\Users\...\Documents\vbmetdatabases2015community als resource toe aan het project.

4. Voeg op dezelfde manier de 3 bestanden fotojan.jpg, fotoklaas.jpg en fotopiet.jpg toe.

5. Klik in de Solution Explorer in de map Resources op de fotojan.jpg, en zet in de propertylist Build Action op Content en zet Copy to Output Directory op Copy always.

6. Doe deze twee aanpassingen ook bij de bestanden fotopiet.jpg en fotoklaas.jpg.

7. Zet aan het begin van het project, dus nog vóór Public Class Form1, de Imports:

Imports System.Data.OleDbImports System.DataImports System.Drawing

Je ziet dat er nu een extra import is, en wel die van de klasse System.Drawing. Deze heb je nodig om op het formulier grafische objecten te kunnen gebruiken.

8. Stel de verbindingsstring en de verbinding weer aan het begin van de code van Form1 als een publieke variabele in.

Public strVerbindingsString As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;"Public verbinding1 As New OleDb.OleDbConnection(strVerbindingsString)

9. Voeg de volgende objecten aan het project toe en geef ze de volgende eigenschappen.

Object: knopName: btnToonGegevensText: Toon gegevens

Object: tekstboxName: txtNaamFotoText:(leeg)

Object: comboboxName:cbxNamen

Object: pictureboxName: PictureBox1Sizemode: StretchImage

Je scherm ziet er dan ongeveer als volgt uit:

Hoofdstuk 6 112

De code om een afbeelding te tonen in een picturebox is:

PictureBox1.Image = Image.FromFile("pad\naambestand")

Dus wanneer je bestand met de afbeelding in de map van Resources van je project staat en je bestand fotojan.jpg heet, wordt het:

PictureBox1.Image = Image.FromFile(".\Resources\fotojan.jpg")

Database fotodatabase.accdb lijkt op profielkeuzes.accdb, maar heeft 1 extra veld genaamd foto voor de naam van het fotobestand.

In combobox cbxNamen toon je de namen van de leerlingen. Dit organiseer je in de Load subroutine, of bij voorbeeld in de click subroutine van een knop zoals hieronder.

1. Pas de btnToonGegevens_Click subroutine als volgt aan:

Private Sub btnToonGegevens_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnToonGegevens.Click verbinding1.Open()

Dim adapter1 As New OleDbDataAdapter("SELECT naam FROM leerlingen", verbinding1) Dim dataset1 As New DataSet adapter1.Fill(dataset1, "leerlingnamen")

cbxNamen.DataSource = dataset1 cbxNamen.DisplayMember = "leerlingnamen.naam"

verbinding1.Close() End Sub

De btnToonGegevens_Click subroutine vult in dataset1 de tabel leerlingnamen met de namen uit de databasetabel leerlingen. Het veld naam in die tabel leerlingnamen van dataset1 wordt dan gebonden aan de combobox cbxNamen.

Hoofdstuk 6 113

Als je een naam in de combobox selecteert, en dus het geselecteerde item verandert, roep je de onderstaande eventhandler aan.

2. Dubbelklik op de combobox om een cbxNamen_SelectedIndexChanged subroutine te genereren. Pas de subroutine als volgt aan:

Private Sub cbxNamen_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cbxNamen.SelectedIndexChanged Dim strVerbindingsString2 As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;"

Dim verbinding2 As New OleDb.OleDbConnection(strVerbindingsString2)

verbinding2.Open()

Dim adapter2 As New OleDbDataAdapter("SELECT foto FROM leerlingen WHERE naam='" & cbxNamen.Text & "'", verbinding2) Dim dataset2 As New DataSet adapter2.Fill(dataset2, "fotos") txtNaamFoto.DataBindings.Clear() txtNaamFoto.DataBindings.Add(New Binding("Text", dataset2, "fotos.foto"))

If txtNaamFoto.Text <> "" Then PictureBox1.Image = Image.FromFile(".\Resources\" & txtNaamFoto.Text) End If verbinding2.Close() End Sub

Wanneer deze eventhandler wordt aangeroepen wordt verbinding2 geopend. Dan wordt er voor apdapter2 een select query gemaakt op basis van de in de combobox geselecteerde naam. De query haalt de waarde van het veld foto op en plaatst deze in de tabel fotos in dataset2. Dan wordt tekstvak txtNaamFoto gebonden aan de tabel fotos, veld foto. Het tekstvak wordt gevuld met de inhoud van het eerste en enige record. Hierin staat nu de naam van het bestand. De tekst van txtNaamFoto gebruik je als variabele wanneer je de het beeld (image) van PictureBox1 instelt.

3. Test je programma.

Zoals je ziet staat er al een foto in de picturebox. Dit is zo omdat er al gelijk een SelectedIndexChange event gebeurt zodra de combobox met gegevens wordt geladen.

Hoofdstuk 6 114

Gegevens uit een Microsoft Excel bestand inlezen naar een Microsoft Access database

Soms wil je gegevens die opgeslagen staan in een Microsoft Excel bestand gebruiken in een Microsoft Access database. Je kunt ze dan inlezen naar een de database.

In dit voorbeeld gebruik je een Excelbestand genaamd namen.xlsx met op het eerste blad drie kolommen. In de eerste kolom staan de voornamen, in de tweede kolom eventuele tussenvoegsels en in de derde kolom staan de achternamen. De database namendatabase.accdb waar je de gegevens in wilt hebben heeft een tabel namen met drie velden; voornaam, tussenvoegsel en achternaam.

1. Maak een nieuw project genaamd importeren aan in de map C:\Users\...\Documents\Visual Studio 2015\Projects.

2. Voeg de bestanden namen.xlsx en namendatabase uit de map C:\Users\...\Documents\vbmetdatabases2015community als Resources toe aan het project.

3. Klik nu in de map Resources op het namen.xlsx bestand en zet in de propertylist Build action op Content en zet Copy to Output Directory op Copy always

4. Plaats de volgende objecten op het formulier:

Object: knopName: btnToonGegevensText: Toon gegevens

Object: knopName: btnImporteerText: Importeer gegevens

Object: datagridviewName:DataGridView1

5. Zet de volgende imports aan het begin van de code:

Imports System.DataImports System.Data.OleDb

Zet onder Public Class Form1 de verbindingsstring met de access database.

Public strVerbindingsString As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\namendatabase.accdb;" Public verbinding1 As New OleDb.OleDbConnection(strVerbindingsString)

Maak een subroutine btnToonGegevens_Click met de volgende code:

Hoofdstuk 6 115

Private Sub btnToonGegevens_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnToonGegevens.Click

Dim verbinding1 As New OleDb.OleDbConnection(strVerbindingsString) verbinding1.Open()

Dim adapter As New OleDbDataAdapter("SELECT * from Namen", verbinding1) Dim dataset1 As New DataSet adapter.Fill(dataset1, "Namen")

DataGridView1.DataSource = dataset1.Tables("Namen")

verbinding1.Close() End Sub

6. Start je project en klik op de knop Toon gegevens.

Je ziet in het datagridview de titels van de velden van de tabel Namen verschijnen. Maar omdat de tabel nog leeg is, zie je geen rijen met gegevens. Die moeten eerst nog ingelezen worden uit het Excel bestand.

7. Maak een subroutine btnImporteer_Click met de volgende code:

Hoofdstuk 6 116

Private Sub btnImporteer_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnImporteer.Click Dim strVerbindingsStringExcel As StringstrVerbindingsStringExcel = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\namen.xlsx;Extended Properties='Excel 12.0 Xml;HDR=YES;'" Dim excelverbinding As New OleDbConnection(strVerbindingsStringExcel) excelverbinding.Open()

Dim da1 As New OleDbDataAdapter("Select voornaam from [Blad1$]", excelverbinding) Dim da2 As New OleDbDataAdapter("Select tussenvoegsel from [Blad1$]", excelverbinding) Dim da3 As New OleDbDataAdapter("Select achternaam from [Blad1$]", excelverbinding)

Dim dataset1 As New DataSet da1.Fill(dataset1, "voornaam") da2.Fill(dataset1, "tussenvoegsel") da3.Fill(dataset1, "achternaam")

Dim dt1 As New DataTable Dim dt2 As New DataTable Dim dt3 As New DataTable dt1 = dataset1.Tables("voornaam") dt2 = dataset1.Tables("tussenvoegsel") dt3 = dataset1.Tables("achternaam")

excelverbinding.Close() verbinding1.Open()

Dim qryInsert1 As String Dim aantal, i As Integer aantal = dt1.Rows.Count()

For i = 0 To aantal - 1 If dt2.Rows(i)("tussenvoegsel") Is DBNull.Value Then dt2.Rows(i)("tussenvoegsel") = ""

qryInsert1 = "INSERT INTO Namen (voornaam, tussenvoegsel, achternaam) VALUES('" & dt1.Rows(i)("voornaam") & "','" & dt2.Rows(i)("tussenvoegsel") & "','" & dt3.Rows(i)("achternaam") & "')"

Dim command1 As New OleDbCommand command1.Connection = verbinding1 command1.CommandType = CommandType.Text command1.CommandText = qryInsert1 command1.ExecuteNonQuery() Next i

verbinding1.Close()

MessageBox.Show("Het importeren uit Excel is geslaagd.")End Sub

1. Start je project.2. Klik op de knop Toon gegevens.

Hoofdstuk 6 117

Alleen de veldnamen zijn in het raster zichtbaar.

3. Klik op de knop Importeer gegevens.

Een messagebox meldt dat de gegevens zijn geimporteerd.

4. Klik op OK.5. Klik weer op de knop Toon gegevens.

Je ziet de geimporteerde gegevens.

Maar hoe werkt de code?

Je dimensioneert een stringvariabele voor de verbindingsstring.

Dim strVerbindingsStringExcel As String

Daarna zet je de juiste waarden in deze variabelen.

strVerbindingsStringExcel = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\namen.xlsx;Extended Properties='Excel 12.0 Xml;HDR=YES;'"

De provider is ook bij Microsoft Excel 2016 de engine Microsoft.ACE.OLEDB.12.0 De Data Source is het Excel bestand in de map Resources.Van de Extended Properties hoef je alleen de versie van Excel aan te geven. Voor Excel 2016 en nieuwer gebruik je versienummer 12.0. Voor een oudere versie gebruik je versienummer 8.0 of 4.0. HDR= No. Meestal bevat de eerste rij van een Excel bestand de veldnamen oftwel kolomtitels, in het Engels headers genoemd. Met HDR= geef je aan of dit het geval is. Wanneer je kiest voor HDR=YES zullen de waarden in de eerste rij van het Excel blad als headers worden gezien en als veldnamen worden ingelezen. Bij HDR=NO worden de waarden in de eerste rij van het Excel bestand beschouwd als gewone waarden en gewoon worden ingelezen. Je ziet zo dadelijk hoe dat gaat. IMEX bepaald de IMport EXport mode. Er zijn drie mogelijke waarden: 0,1 en 2. Waarde1 bepaalt dat er waarden worden ingelezen. 2 is voor het exporteren van waarden en 3 voor het linken van waarden.

Dan wordt er een verbinding gedimensioneerd en geopend.

Dim excelverbinding As New OleDbConnection(strVerbindingsStringExcel)

excelverbinding.Open() En er worden 3 data-adapters gedimensioneerd. Een data-adapter kan maar 1 select commando hebben. Vandaar dat je 3 data-adapters voor de 3 kolommen nodig hebt. Deze data-adapters halen elk de gegevens uit 1 kolom. Als je HDR=YES hebt gekozen, vul je hier de namen van de velden in zoals ze in het Excel blad in de eerste regel staan. In dit geval dus: voornaam, tussenvoegsel en achternaam.

Hoofdstuk 6 118

Wanneer je HDR=NO hebt ingevuld, genereert Excel automatisch namen voor de velden (Fields) en wel F1 voor het eerste veld, F2 voor het tweede veld enzovoorts. Je typt dan in plaats van de naam van het veld het F-nummer in, eventueel gevolgd door as … om het veld toch een naam te geven. Bij voorbeeld

Dim da1 As New System.Data.OleDb.OleDbDataAdapter("Select voornaam from [Blad1$]", excelverbinding) Dim da2 As New System.Data.OleDb.OleDbDataAdapter("Select tussenvoegsel from [Blad1$]", excelverbinding) Dim da3 As New System.Data.OleDb.OleDbDataAdapter("Select achternaam from [Blad1$]", excelverbinding) Dim da1 As New System.Data.OleDb.OleDbDataAdapter("Select F1 as voornaam from [Blad1$]", excelverbinding)

Hierna maak je een dataset aan om de gegevens in te bewaren. Je hebt aan 1 dataset genoeg omdat een dataset meerdere tabellen kan bevatten. Dan geef je via het commando Fill van de 3 data-adapters de data-adapters de opdracht om de dataset te vullen met hun gegevens. Dit levert 3 tabellen op.

Dim dataset1 As New DataSet da1.Fill(dataset1, "voornaam") da2.Fill(dataset1, "tussenvoegsel") da3.Fill(dataset1, "achternaam")Na dit stukje code zitten de geimporteerde gegevens in de dataset.

Zodadelijk ga je code schrijven om de ingelezen waarden in de drie tabellen weg te schrijven naar een database. Om die code overzichtelijk te houden, zet je de lange namen van de tabellen in de dataset in datatable variabelen. Je dimensioneert er 3 en wijst ze de namen van de drie tabellen in datasset1 toe.

Dim dt1 As New DataTable Dim dt2 As New DataTable Dim dt3 As New DataTable dt1 = dataset1.Tables("voornaam") dt2 = dataset1.Tables("tussenvoegsel") dt3 = dataset1.Tables("achternaam")

Dan sluit je de verbinding met het Excel bestand.

excelverbinding.Close()

Nu de gegevens zijn opgeslagen in de dataset kun je ze gaan opslaan in een database. De verbindinsrting met de database staat al als een public variabele bovenaan in je code. Die open je met:

Verbinding1.Open()

Je hebt straks om de gegevens aan de database te kunnen toevoegen een insert query nodig. Die komt straks binnen de herhalingslus te staan omdat je telkens een rij met een hoger nummer wilt inlezen, en binnen de query de teller van de lus wordt gebruikt. Maar je wilt geen variabelen dimensioneren binnen een herhalingslus, dus

Hoofdstuk 6 119

je dimensioneert de stringvariabele voor die insert query nu vast. Ook het commando om de query uit te voeren dimensioneer je niet binnen de lus, maar nu.

Dim qryInsert As String Dim command1 As New OleDbCommand command1.Connection = verbinding1 command1.CommandType = CommandType.Text

Je gaat nu elke rij gegevens in de dataset apart naar de database wegschrijven. Je hebt dus een variabele nodig om in op te slaan hoeveel rijen er zijn, en een teller om bij te houden in welke rij je zit. Je dimensioneert de integer variabelen aantal voor het aantal rijen en i om als teller te gebruiken. Met dt1.Rows.Count() bepaal je hoeveel rijen er in de tabel voornamen van de dataset zitten. dt1 is immers de variabele met als waarde dataset1.Tables(“voornaam”). Dit aantal sla je op in de variabele aantal.

Dim aantal, i As Integer aantal = dt1.Rows.Count()

Nu kun je een herhalingslus gaan opzetten. i bevat het nummer van de huidige rij. De lus wordt herhaald van rij 0 tot en met aantal – 1. Waarom -1? Als het aantal rijen in de dataset bijvoorbeeld 3 bedraagt, zijn deze genummerd van 0 tot en met 2. Dus als je de lusroutine 3 keer wilt uitvoeren loopt de For Next lus van 0 tot en met 2.

For i = 0 To aantal - 1

Next i

Voor je de waarden echt kunt gaan toevoegen aan de database moet je nog 1 probleempje oplossen. Wanneer er in het Excel bestand niets staat in het veld tussenvoegsel wordt de waarde NULL ingelezen. Een database kan zo zijn ontworpen dat er geen NULL-waarden ingevoerd kunnen worden. Wanneer je in de database geen NULL-waarden wilt hebben, kun je de waarde NULL omzetten naar een lege string. Je controleert dan of de waarde van dt2.Rows(i)("tussenvoegsel") van het type DBNull is. En als dit zo is, verander je de waarde in een lege string.

If dt2.Rows(i)("tussenvoegsel") Is DBNull.Value Then dt2.Rows(i)("tussenvoegsel") = ""

Dan kun je eindelijk de waarden in dataset1 gaan toevoegen aan de database. Dit gaat met een de insert query qryInsert1. De 3 variabelen dt1.Rows(i)(“voornaam”) enz. staan tussen enkele aanhalingstekens omdat ze stringwaarden bevatten.

qryInsert1 = "INSERT INTO Namen (voornaam, tussenvoegsel, achternaam) VALUES('" & dt1.Rows(i)("voornaam") & "','" & dt2.Rows(i)("tussenvoegsel") & "','" & dt3.Rows(i)("achternaam") & "')"

Om de query uit te voeren wijs je de net samengestelde insert query qryInsert toe aan command1 en voer je het command uit met ExecuteNonQuery.

command1.CommandText = qryInsert1 command1.ExecuteNonQuery()

Hoofdstuk 6 120

Als het toevoegen aan de database dan klaar is, sluit je de verbinding en laat je je gebruiker weten dat alles gelukt is. verbinding1.Close() MessageBox.Show("Het importeren uit Excel is geslaagd.")

4. Test je programma.

Hoofdstuk 6 121

Hoofdstuk 7 Afdrukken op papier

In dit hoofdstuk leer je hoe je gegevens afdrukt op papier of naar een bestand. De standaard manier om dit in VB te doen is met behulp van zogenaamde Crystal Reports die helaas alleen beschikbaar zijn in de duurdere versies van Visual Studio of met andere software die je nog extra moet aanschaffen. Toch is het ook zonder Crystal Reports of extra software heel goed mogelijk om af te drukken. Je ziet in dit hoofdstuk voorbeelden van het afdrukken van tekst die op het scherm staat en van tekst die in een dataset staat.

PrintPreViewDialogVoor dit eerste project hoeft er geen printer op je computer te zijn aangesloten.

1. Maak een nieuw Windows Forms Application project genaamd afdrukken1.2. Sla dit op in de map C:\Users\...\Documents\Visual Studio 2015\Projects.

In de Toolbox vind je een onderdeel Printing, speciaal voor objecten die te maken hebben met het afdrukken.

1. Open in de Toolbox het onderdeel printing.2. Plaats een PrintPreviewDialog object en een PrintDocument object op het

formulier. Ze verschijnen onderaan form1.3. Plaats ook een knop op het formulier, maak deze iets breder en stel de tekst

van de knop in op Toon afdrukvoorbeeld.4. Selecteer PrintPreviewDialog1 en stel bij de eigenschap Document de

waarde PrintDocument1 in.

Dit vertelt het object PrintPreviewDialog1 welk document het moet tonen.

5. Genereer een Click subroutine voor Button1.6. Pas de subroutine als volgt aan:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click PrintPreviewDialog1.ShowDialog End Sub

7. Start je project.8. Klik op de knop Toon afdrukvoorbeeld.

Je ziet het scherm Afdrukvoorbeeld met daarin een (nog leeg) document. Je zou zelfs al kunnen afdrukken, maar dat heeft met een leeg document natuurlijk geen zin.


Afdrukken van tekst uit een RichTextBoxDe volgende stap is om eerst tekst te tonen in het afdrukvoorbeeld en vervolgens die tekst af te drukken. Die af te drukken tekst moet ergens vandaan komen. Bij

Hoofdstuk 7 122

voorbeeld uit een zogenaamde RichTextBox. Dit is een soort tekstvak dat meer mogelijkheden heeft dan een gewoon tekstvak. We gaan die tekst even klaarzetten.

1. Plaats nog een knop en een RichTextBox op het formulier.2. Maak de knop iets breder en stel de tekst in op Vul RichTextBox1. 3. Genereer een Click subroutine voor de knop Vul RichTextBox1.4. Pas de subroutine als volgt aan:

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click RichTextBox1.Text = "Hallo, hier Hilversum." End Sub

5. Klik op deze knop.

Je ziet nu de tekst Hallo, hier Hilversum. in RichTextBox1.

Printdocument opmaken1. Dubbelklik onder aan het scherm op PrintDocument1.

Je hebt nu een PrintDocument1_PrintPage subroutine gegenereerd. Hier kun je instellen welke tekst er in PrintDocument1 zit, en hoe die moet worden afgedrukt.Dit doe je door een aantal parameters van de methode e.Graphics.Drawstring in te stellen. Deze methode ‘tekent’ tekst in het document.

Je wilt de tekst in RichTextBox1 in het PrintDocument1 zetten. Je kiest lettertype Arial, lettergrootte 10 met een standaard fontstyle en een zwarte kleur. Je wilt het afdrukken van de tekst laten beginnen op 150 pixels van de linkerrand van het papier en 100 pixels van de bovenrand van het papier. Pas de subroutine als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage e.Graphics.DrawString(RichTextBox1.Text, New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 100) End Sub

2. Start je project.3. Klik op de knop Vul RichTextBox1.

De tekst Hallo, hier Hilversum. verschijnt in de RichTextBox.

4. Klik op de knop Toon afdrukvoorbeeld.

De tekst van is nu zichtbaar in het afdrukvoorbeeld. Maar wel erg klein. Dat los je zo dadelijk op. Misschien moet je nu even met behulp van de loep (instellen op 100%) linksboven de tekst nog wat uitvergroten.

5. Druk op het icoon Afdrukken linksboven in het scherm.

Het document wordt afgedrukt.

Hoofdstuk 7 123


Even oefenen.

1. Wijzig de parameters voor het lettertype en de marges een paar keer en kijk telkens welk effect dit heeft.


PrintPreviewDialog instellenHet scherm PrintPreviewDialog (afdrukvoorbeeld) en de tekst in het document worden nogal klein weergegeven. Je gebruiker kan met behulp het icoon met het vergrootglas inzoomen op de tekst, en het scherm met behulp van de knop maximaliseren rechtsboven in het scherm beeldschermvullend maken. Maar je kunt het de gebruiker ook makkelijk maken en dit al in de code van je programma zo instellen. Met behulp van de methode WindowState van het PrintPreviewDialog object kun je instellen dat het PrintPreviewDialog venster gemaximaliseerd wordt weergegeven. En met behulp van de methode PrintPreviewControl.Zoom kun je de zoomfactor instellen.

1. Pas de code van de Button1_Click subroutine maar eens als volgt aan:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click PrintPreviewDialog1.WindowState = FormWindowState.Maximized PrintPreviewDialog1.PrintPreviewControl.Zoom = 1.0 PrintPreviewDialog1.ShowDialog() End Sub

2. Start je project.3. Klik op de knop Vul RichTextBox1.4. Klik op de knop Toon afdrukvoorbeeld.

Dat ziet er beter uit.


Je hebt in dit project de waarde van de eigenschap Document van het object PrintPreviewDialog1 in het Properties scherm ingesteld. Zou je dit in code willen doen, dan ziet dit er als volgt uit:

PrintPreviewDialog1.Document = PrintDocument1

Een afbeelding van het formulier afdrukkenAls je op je formulier een afbeelding toont, bij voorbeeld wanneer je gegevens in beeld hebt waarbij ook een foto hoort, kun je zo’n afbeelding gemakkelijk afdrukken.

6. Ga nu in de Solution Explorer op de naam van het project staan, klik op de rechtermuisknop en selecteer eigenschappen (properties).

7. Klik op het tabblad Resources en klik bovenin op het driehoekje naast Add Resource - Add Existing File.

8. Browse naar C:\Users\...\Documents\vbmetdatabases2015community.

Hoofdstuk 7 124

9. Selecteer fotojan.jpg en kies Openen. 10. Klik in de Solution Explorer in de map Resources op het eerste

fotobestand, en zet de properties Build action op Content en Copy to Output Directory op Copy always.

11. Plaats een picturebox op het formulier.12. Stel de eigenschap SizeMode in op StretchImage.13. Stel de eigenschap Image in Project resource file - fotojan.14. Pas eventueel de lengte en breedte van de picturebox aan om de foto goed te

tonen.

Het afdrukken van een afbeelding gaat met de methode e.Graphics.DrawImage. Je moet aangeven welke afbeelding afgedrukt moet worden, waar de linkerbovenhoek van de afbeelding moet komen en hoe breed en hoog de afbeelding moet zijn.

Als afbeelding neem je de afbeelding van Picturebox1. Neem als linkerstartpunt weer 150, net als bij de tekst. En neem als bovenstartpunt 200, dus iets onder de tekst. Een breedte van 180 pixels en een hoogte van 240 pixels geeft een redelijk grote afbeelding.

1. Dubbelklik op PrintDocument1 en pas code als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage e.Graphics.DrawString(RichTextBox1.Text, New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 100) e.Graphics.DrawImage(PictureBox1.Image, 150, 200, 180, 240) End Sub

2. Start je programma.3. Klik op de knop Vul RichTextBox1.4. Klik op de knop Toon afdrukvoorbeeld.

Je ziet in het afdrukvoorbeeld de afbeelding onder de tekst.


Gegevens in een dataset afdrukkenTot nu toe heb je de af te drukken gegevens, de tekst en de afbeelding, uit objecten op het formulier gelezen. Dit is prima wanneer je bijvoorbeeld alle gegevens van 1 persoon van het scherm leest en afdrukt. Maar het komt ook vaak voor dat je de gegevens van meerdere records onder elkaar wilt afdrukken. Je kunt die gegevens dan natuurlijk in een datagridview op het formulier tonen en ze daar weer uit halen. Maar je kunt ze ook direct uit een dataset lezen.

In dit volgende project ga je eerst gegevens ophalen uit de database. Die zet je in een dataset. Omdat het makkelijk is om je gegevens te kunnen zien, koppel je een datagridview aan de dataset. Het datagridview toont dan de inhoud van de dataset. Maar het datagridview gebruik je verder niet bij het afdrukken van de gegevens. Tenslotte plaats je de gegevens die in de dataset zitten in het printdocument.

Hoofdstuk 7 125

Je maakt eerst een nieuw project en het formulier.

1. Maak een nieuw Windows Forms Application project genaamd afdrukken2.2. Sla dit project op in de map C:\Users\...\Documents\Visual Studio 2015\

Projects.3. Plaats een datagridview, twee knoppen, een PrintPreviewDialog en een

PrintDocument op het formulier.4. Noem de eerste knop btnLaadGegevens en stel de eigenschap text van

deze knop in op Laad gegevens.5. Noem de tweede knop btnAfdrukken en stel de eigenschap text van deze

knop in op Afdrukken.6. Maak de knoppen iets breder om de tekst zichtbaar te maken.7. Stel bij de eigenschappenlijst van het PrintPreviewDialog1 als Document

PrintDocument1 in.

Dan plaats je de imports om met een Microsoft Database te kunnen werken. Dit heb je al in eerdere hoofdstukken gezien.

1. Zet helemaal bovenaan in de code, dus nog vóór Public Class Form1, de volgende code:

Imports System.DataImports System.Data.OLEDB

En daarna kopieer je de database van dit project naar de map Resources in de project map en maak je een subroutine om de gegevens in de dataset en het datagridview te laden.

1. Voeg keuzepakket.accdb (in C:\Users\...\Documents\vbmetdatabases2015community) als resource aan je project toe.

2. Zet de property Build action op Content en Copy to Output Directory op Copy always.

3. Zet de code voor de verbindingsstring op een nieuwe regel direct na Public Class Form1.

Public verbindingsstring As String ="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\keuzepakket.accdb;"Public verbinding1 As New OleDb.OleDbConnection(verbindingsstring)

4. Genereer een btnLaadGegevens_Click subroutine en pas de code van de subroutine als volgt aan:

Private Sub btnLaadGegevens_Click(sender As Object, e As EventArgs) Handles btnLaadGegevens.Click verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT naam FROM leerlingen", verbinding1) adapter1.Fill(dataset1) DataGridView1.DataSource = dataset1.Tables(0) verbinding1.Close() End Sub

Hoofdstuk 7 126

Je ziet een paar blauwe foutlijntjes. Terecht, want dataset1 bestaat nog niet. Dat los je nu op. Je moet dataset1 vanuit meerder subroutines kunnen benaderen. In de subroutine btnLaadGegevens om de dataset te kunnen vullen. En in de subroutine PrintDocument1_PrintPage om de gegevens in de dataset naar PrintDocument1 te kunnen schrijven. Daarom dimensioneer je dataset1 niet in één van deze subroutines, maar helemaal bovenaan je code. Dan is het object vanuit elke subroutine van het formulier te benaderen.

5. Plaats helemaal bovenaan je code, bovenaan in de code van Form1, na Public Class Form1 en de code van de verbindingsstring, de regel

Private dataset1 As New DataSet

Het ziet er dan als volgt uit:

Public Class Form1 Public verbindingsstring As String="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\keuzepakket.accdb;" Public verbinding1 As New OleDb.OleDbConnection(verbindingsstring) Private dataset1 As New DataSet

De blauwe foutlijntjes zijn verdwenen. Tijd om even te testen wat je al hebt.

6. Start je project.7. Klik op de knop Laad gegevens.

Je ziet de gegevens in het datagridview verschijnen. Dit zijn de gegevens die in de dataset zitten. Prima.


De volgende stap is de gegevens in de dataset record voor record in PrintDocument1 te zetten. Dit doe je met behulp van een For Next herhalingslus, waarin je telkens de gegevens van 1 record van dataset1 aan PrintDocument1 toevoegt. Om te weten hoe vaak je dit moet doen, moet je weten hoe veel records er in dataset1 zitten. De code om dit te achterhalen is:

dataset1.Tables(0).Rows.Count

Dat is een te onoverzichtelijk stukje code om telkens te gebruiken. Daarom zet je de waarde die deze methode oplevert in een integer variabele genaamd aantalleerlingen. Ook heb je nog een integer variabele genaamd teller nodig om de voortgang in je herhalingslus bij te houden. Dat ziet er in code als volgt uit:

Dim aantalleerlingen as integeraantalleerlingen = dataset1.Tables(0).Rows.CountDim teller as integer

Dan de For Next constructie. De herhalingslus loopt van het eerste record, genummerd 0, tot en met het laatste record. Het nummer van dit record is 1 lager dan het aantal records in de dataset. Waarom? Omdat, als er bij voorbeeld 12 records in de dataset zitten, het laatste record nummer 11 heeft. De records in de

Hoofdstuk 7 127

dataset zijn immers genummerd vanaf nummer 0. Daarom wordt de lus herhaald tot en met (aantalleerlingen -1). De tabellen, de rijen en de kolommen in de dataset zijn trouwens ook genummerd vanaf 0.

For teller = 0 To (aantalleerlingen – 1)

In de For Next herhalingslus komt de code om telkens uit dataset1, uit de eerste (en enige) tabel genaamd Table(0), uit de rij (Row) met de huidige tellerwaarde, uit de eerste kolom (Item(0)) de inhoud te halen en toe te voegen aan PrintDocument1.Het lettertype is Arial, 10 punten hoog, de fontstijl is normaal (Regular) en de kleur (Brushes) is zwart.

Dan bepaal je de positie. Je wilt starten op 50 pixels vanaf de linker papierrand. Het verticale startpunt is 50 pixels vanaf de bovenrand van het papier, plus (20*het nummer van de regel) pixels. Dus bij de tweede regel is dat 50 + (20*1). Dat is 70. Bij de tweede regel is het 50 + (20*2). Dat is 90. Enzovoorts. Die 20 is het aantal pixels dat je per regel omlaag wilt gaan. Gebruik je een groter lettertype, dan zul je een groter getal dan 20 moeten nemen.

e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(0)), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50 + (20 * teller))

9. Dubbelklik op PrintDocument1 en pas de code als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim aantalleerlingen As Integer aantalleerlingen = dataset1.Tables(0).Rows.Count Dim teller As Integer For teller = 0 To (aantalleerlingen - 1) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(0), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50 + (20 * teller)) Next teller End Sub

Tenslotte moet er nog code onder de knop Afdrukken om het scherm Afdrukvoorbeeld op te roepen.

10. Genereer een Click subroutine voor de knop Afdrukken.11. Pas de code in de subroutine als volgt aan:

Private Sub btnAfdrukken_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAfdrukken.Click PrintPreviewDialog1.WindowState = FormWindowState.Maximized PrintPreviewDialog1.PrintPreviewControl.Zoom = 1.0 PrintPreviewDialog1.ShowDialog() End Sub

12. Start je project.13. Klik op de knop Laad gegevens.14. Klik op de knop Afdrukken.

Hoofdstuk 7 128

Het scherm Afdrukvoorbeeld verschijnt met daarin PrintDocument1 met de lijst met namen.


Je hebt een lijst met onder elkaar alle namen in de dataset afgedrukt. Maar je kunt natuurlijk ook meer gegevens over elke persoon in de database laden en die naast elkaar rij voor rij afdrukken. Je moet dan eerst de query in de btnLaadGegevens_Click subroutine aanpassen. Je wilt nu niet alleen de namen, maar alle gegevens in de tabel ophalen.

1. Pas de query in de btnLaadGegevens_Click subroutine als volgt aan:

SELECT * FROM leerlingen

Dan moet je ook de afdrukroutine aanpassen. De namen zaten zonet in de dataset in de eerste kolom. Dit is Item(0). Wanneer je alle gegevens in de dataset hebt geladen, zijn er nu drie kolommen, ofwel drie items. Het tweede item heet dan Item(1). De kolom met deze gegevens moet rechts naast de eerste kolom komen. Dus pas je voor de tweede af te drukken kolom de x-waarde (de horizontale beginpositie) van e.Graphics.DrawString aan en zet je deze op 150.

e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(1), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 50 + (20 * teller))

Voor de derde kolom met gegevens pas je de x-waarde opnieuw aan en zet die op bij voorbeeld 250.

2. Pas de code van PrintDocument1 als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim aantalleerlingen As Integer aantalleerlingen = dataset1.Tables(0).Rows.Count Dim teller As Integer For teller = 0 To (aantalleerlingen - 1) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(0), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50 + (20 * teller)) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(1), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 50 + (20 * teller)) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(2), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 250, 50 + (20 * teller)) Next teller End Sub

3. Start je project.4. Klik op de knop Laad gegevens.5. Klik op de knop Afdrukken.

Hoofdstuk 7 129

Je ziet in het scherm Afdrukvoorbeeld nu de drie kolommen met gegevens naast elkaar.


Afbeeldingen in een database afdrukkenJe kunt in een database afbeeldingen bewaren. Dan staan ze mooi in het juiste record en zijn ze makkelijk via een query op te halen. Maar wanneer je afbeeldingen in een database zet, groeit deze database erg snel. Dus worden afbeeldingen vaak buiten de database bewaard. In de database zelf zet je dan een verwijzing naar de naam van het bestand.

In de database die je in dit project tot nu toe hebt gebruikt staan geen gegevens over afbeeldingen. Je hebt dus een andere database nodig. Deze heet fotodatabase.accdb. Ook heb je een aantal afbeeldingen nodig. In dit voorbeeld gebruik je een aantal foto’s. Een daarvan heb je al in een eerder project in dit hoofdstuk gebruikt.

Je gebruikt nog steeds het project genaamd afdrukken2.

1. Voeg bovenaan bij de twee imports de volgende code toe:

Imports System.Drawing

2. Voeg de 3 foto bestanden in de map C:\Users\...\Documents\vbmetdatabases2015community als resource aan je project toe.

3. Voeg ook fotodatabase.accdb als resource toe.4. Zet bij alle 4 bestanden in properties Build action op Content en Copy to

Output Directory op Copy always.

Omdat je nu met een andere database gaat werken, heb je nog een verbindingsstring nodig.

5. Voeg onder de eerste verbindingsstring een tweede toe met de naam van de database in fotodatabase.accdb.

De code ziet er dan als volgt uit:

Public Class Form1 Public verbindingsstring As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\keuzepakket.accdb;" Public verbinding1 As New OleDb.OleDbConnection(verbindingsstring) Public verbindingsstring2 As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;" Public verbinding2 As New OleDb.OleDbConnection(verbindingsstring2) Private dataset1 As New DataSet

6. Voeg een knop toe op het formulier met als tekst Laad fotogegevens en als name btnLaadFotogegevens.

Hoofdstuk 7 130

7. Voeg de volgende code onder de knop btnLaadFotogegevens

verbinding2.Open()Dim adapter2 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding2) adapter2.Fill(dataset1) DataGridView1.DataSource = dataset1.Tables(0) verbinding2.Close()

Je ziet dat DataGridView1 door deze code (opnieuw) gebonden wordt aan dataset1, die inmiddels via verbinding2 en adapter2 (opnieuw) met gegevens is gevuld. Even testen of je project nog goed werkt.

1. Maak het datagridview iets breder om alle 4 kolommen te kunnen tonen.2. Start je project.3. Klik op de knop Laad Fotogegevens.

In het datagridview zie je de gegevens in de dataset. Het zijn nu 4 kolommen. Er is een kolom foto bijgekomen. In deze kolom staan de namen van de afbeeldingen; fotojan.jpg enzovoorts.

4. Klik op de knop Afdrukken.

Je ziet in het scherm Afdrukvoorbeeld nu opnieuw de drie kolommen met gegevens naast elkaar. Het zijn er maar drie omdat je de code voor het vullen van PrintDocument1 nog niet hebt veranderd.


Om de afbeelding aan PrintDocument1 toe te voegen moet je 1 regel code toevoegen. De opdracht begint met niet met e.Graphics. DrawString, maar met e.Graphics.DrawImage. Je geeft opdracht een afbeelding uit een bestand te tekenen (af te drukken) met (Image.FromFile). Je geeft aan waar dat bestand staat. Het pad naar de map zet je direct als een string, dus tussen haakjes, in de code: “.\Resources\”. Daarachter plak je met het ampersand teken (&) de naam van het bestand. En die naam haal je uit de dataset, net zoals je dat hiervoor met de andere items hebt gedaan. De naam van het bestand staat in de vierde kolom in de dataset, dus heet die kolom Item(3). Ten slotte geef je nog aan waar op het papier de afbeelding moet komen. 400 pixels van links en 50 + (250 * teller) van boven. 250 is hier de hoogte van de afbeelding. Ten slotte stel je de breedte en de hoogte van de afbeelding in pixels in; 150 breed, 200 hoog.

6. Klik je op Printdocument1 en voeg de volgende regel toe aan de For Next lus:

e.Graphics.DrawImage(Image.FromFile(".\Resources\" & dataset1.Tables(0).Rows(teller).Item(3)), 400, 50 + (250 * teller), 150, 200)

Je zet de regels met de afbeeldingen nu 250 pixels onder elkaar. Om de bijbehorende tekst in lijn met de afbeelding te krijgen, moet ook daar de y-waarde (verticale beginpunt) worden veranderd van 20 naar 250.

Hoofdstuk 7 131

7. Pas de PrintDocument1_PrintPage subroutine als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim aantalleerlingen As Integer aantalleerlingen = dataset1.Tables(0).Rows.Count Dim teller As Integer For teller = 0 To (aantalleerlingen - 1) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(0), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50 + (250 * teller)) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(1), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 50 + (250 * teller)) e.Graphics.DrawString(dataset1.Tables(0).Rows(teller).Item(2), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 250, 50 + (250 * teller))e.Graphics.DrawImage(Image.FromFile(".\Resources\" & dataset1.Tables(0).Rows(teller).Item(3)), 400, 50 + (250 * teller), 150, 200) Next teller End Sub

8. Test je project en breng eventueel verbeteringen aan.

De afbeeldingen zijn wat vertekend, maar dat is zo omdat ze niet allemaal dezelfde afmetingen hebben. In een ‘echt’ project gebruik je natuurlijk afbeeldingen die dezelfde grootte hebben, of je bepaalt eerst de afmeting van de afbeelding en past dan de code aan. Maar dat gaat voor dit boek te ver.

Het PrintDocument instellen in codeTot nu toe past wat je afdrukt prima zonder verdere instellingen op 1 pagina. Wanneer je afdrukken langer of ingewikkelder worden kun je met behulp van het object PrintDocument instellen hoe alles afgedrukt moet worden. Alleen de startpositie van het afdrukken aangeven is dan niet meer genoeg. Je moet bepalen welk gedeelte van het papier bedrukt mag worden en de marges instellen.

Via het object PrintDocument kun je alles instellen dat je mogelijk nodig zou kunnen hebben om een document af te drukken. Zo kun je bij voorbeeld via de eigenschap PrintSettings de printer waarop gaat worden afgedrukt kiezen en allerlei instellingen van die printer beïnvloeden. En via de eigenschap DefaultPageSettings kun je de standaard instellingen voor alle af te drukken pagina’s bepalen. DefaultPageSettings.Landscape = True, bijvoorbeeld zorgt ervoor dat de pagina’s van het PrintDocument “liggend” worden afgedrukt. DefaultPageSettings.Color = False bepaalt dat de pagina niet in kleur wordt afgedrukt. Je kunt in een zoekmachine zoals Google zoeken op PageSettings Members om nog meer over de mogelijkheden van DefaultPageSettings te leren.

In het volgende project ga je wat experimenteren met de instellingen van het PrintDocument.

1. Maak een nieuw Windows Forms Application project genaamd afdrukken3.

Hoofdstuk 7 132

2. Sla dit project op in de map C:\Users\...\Documents\Visual Studio 2015\Projects.

3. Plaats een PrintPreviewDialog object, een PageSetupDialog object en een PrintDocument object op het formulier.

4. Selecteer PrintPreviewDialog1 en stel bij de eigenschap Document de waarde PrintDocument1 in.

5. Selecteer PageSetupDialog1 en stel bij de eigenschap Document de waarde PrintDocument1 in.

6. Plaats een RichTextBox op het formulier. Maak de RichTextBox flink groot.7. Open het bestand langetekst.txt (in C:\Users\...\Documents\

vbmetdatabases2015community) via de verkenner en kopieer en plak de tekst in het bestand achter de eigenschap lines van RichTextBox1. Gebruik de 3 puntjes om de tekst te kunnen plakken.

8. Plaats een knop op het formulier en stel de tekst van de knop in op Afdrukvoorbeeld tonen.

9. Maak de knop iets breder om de gehele tekst te tonen.10. Dubbelklik op PrintDocument1 om een Prindocument1_PrintPage

subroutine te genereren.

De code om af te drukken kan snel onoverzichtelijk worden. Daarom maak je gebruik van een aantal variabelen met logische namen. In de code in deze subroutine ga je eerst het lettertype Arial, grootte 12 instellen in een variabele genaamd lettertype van het type Font. Dan dimensioneer je een variabele letterkleur van het type Brush. Deze stel je in op zwart. Dit gaat met:

Dim lettertype As New Font("Arial", 12) Dim letterkleur As Brush letterkleur = Brushes.Black

Daarna stel je het afdrukbare gedeelte van je pagina in.

Je dimensioneert eerst integer variabelen voor de afdrukhoogte, de afdrukbreedte, de linkermarge en de bovenmarge.

Dim afdrukhoogte, afdrukbreedte, linkermarge, bovenmarge As Integer

De afdrukhoogte krijg je door de papierhoogte te verminderen met de bovenmarge en de ondermarge. Hiervoor gebruik je de PrintDocument.Defaultsettings standaardwaarden voor PaperSize.Height, Margins.Top en Margins.Bottom. De afdrukbreedte krijg je door de papierbreedte te verminderen met de linkermarge en de rechtermarge. Om te voorkomen dat je telkens PrintDocument1.Defaultsettings moet intypen gebruik je een With … End With constructie.

Hoofdstuk 7 133

Zo bepaal je de afdrukhoogte:

With PrintDocument1.DefaultPageSettings afdrukhoogte = .PaperSize.Height - .Margins.Top - .Margins.Bottom

En zo de afdrukbreedte:

afdrukbreedte = .PaperSize.Width - .Margins.Left - .Margins.Right

De afdrukhoogte en afdrukbreedte bepalen samen de maten van de rechthoek op het papier waarbinnen afgedrukt gaat worden. Maar je moet ook nog aangeven waar die rechthoek begint. Je geeft de linker- en bovenmarge aan. Deze waarden samen bepalen de linkerbovenhoek van je afdrukrechthoek.

linkermarge = .Margins.Left bovenmarge = .Margins.Top End With

En tenslotte bepaal je de rechthoek met de linkerbovenhoek, de bovenmarge, de afdrukbreedte en de afdrukhoogte. Dim rechthoek As New RectangleF(linkermarge, bovenmarge, afdrukbreedte, afdrukhoogte)

Wanneer dat klaar is, kun je afdrukken. Je bepaalt de tekst, het lettertype, de letterkleur en de rechthoek.

e.Graphics.DrawString(RichTextBox1.Text, lettertype, letterkleur, rechthoek)

1. Dubbelklik op het object PrintDocument1 en pas de subroutine als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim lettertype As New Font("Arial", 12) Dim letterkleur As Brush letterkleur = Brushes.Black Dim afdrukhoogte, afdrukbreedte, linkermarge, bovenmarge As Integer With PrintDocument1.DefaultPageSettings afdrukhoogte = .PaperSize.Height - .Margins.Top - .Margins.Bottom afdrukbreedte = .PaperSize.Width - .Margins.Left - .Margins.Right linkermarge = .Margins.Left bovenmarge = .Margins.Top End With Dim rechthoek As New RectangleF(linkermarge, bovenmarge, afdrukbreedte, afdrukhoogte) e.Graphics.DrawString(RichTextBox1.Text, lettertype, letterkleur, rechthoek) End Sub

2. Genereer een Click subroutine voor de knop Afdrukvoorbeeld tonen.

Hoofdstuk 7 134

3. Pas de subroutine als volgt aan:


4. Start je project.5. Klik op de knop Afdrukvoorbeeld tonen.

Je ziet nu de lange tekst verschijnen in het gedeelte van de pagina dat je als rechthoek hebt ingesteld. Omdat de tekst te lang is, zie je niet alles. Je ziet alleen de tekst die op de eerste pagina past. Ook zie je de laatste regel slechts gedeeltelijk. Dat los je verderop in dit hoofdstuk op.


Je hebt nu de lay-out van je printdocument in de code ingesteld. Hier kan je gebruiker niets aan wijzigen. Maar dat kan ook anders. En wel met een PageSetupDialog object.

PageSetupDialog objectMet een PageSetupDialog kan je gebruiker de instellingen van het PrintDocument aanpassen. Je maakt dan bij de instellingen niet langer gebruik van de standaardwaarden van PrintDocument.DefaultPageSettings, maar van de instellingen die je gebruiker heeft gekozen in het PageSetupDialog venster. Je gebruiker kan ook zelf de printer kiezen.

1. Plaats nog een knop op het formulier en stel de tekst van de knop in op Lay-out instellen

2. Genereer een Click subroutine voor de knop Lay-out instellen.

Als de gebruiker van je programma op deze knop klik moet het PageSetupDialog venster verschijnen. Je gebruiker kan dan de printer kiezen en de lay-out aanpassen. De code hiervoor is: PageSetupDialog1.ShowDialog()

Wanneer je gebruiker klaar is, en het PageSetupDialog venster sluit, overschrijf je de standaardwaarden PrintDocument1.PrinterSettings en PrintDocument.DefaultPageSettings met de keuzes van je gebruiker. Deze zijn opgeslagen in het PageSetupDialog object. Dit gaat als volgt:

PrintDocument1.PrinterSettings = PageSetupDialog1.PrinterSettings PrintDocument1.DefaultPageSettings = PageSetupDialog1.PageSettings

3. Pas de Button2_Click subroutine als volgt aan:

Hoofdstuk 7 135

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click PageSetupDialog1.ShowDialog() PrintDocument1.PrinterSettings = PageSetupDialog1.PrinterSettings PrintDocument1.DefaultPageSettings = PageSetupDialog1.PageSettings End Sub

4. Start je programma.5. Klik op de knop Lay-out instellen.6. Verander de instellingen en klik op OK.7. Klik op de knop Afdrukvoorbeeld tonen en bekijk het resultaat.8. Sluit je programma.

Portrait en LandscapeWanneer je gebruiker geen printer op zijn of haar computer heeft aangesloten, zal hij of zij merken dat in de PageSetUpDialog de afdrukstand ‘liggend’ niet kan worden ingesteld. Wanneer er wel een printer is aangesloten op de computer kan in de PageSetUpDialog deze afdrukstand wel worden gekozen. Als je gebruiker voor liggend kiest, worden afdrukhoogte en afdrukbreedte helaas niet automatisch aangepast.

1. Start je project.2. Klik op de knop Lay-out instellen.3. Kies Afdrukstand Liggend.4. Klik op de knop OK.5. Klik op de knop Afdrukvoorbeeld tonen.

Je ziet dat er wel liggend wordt afgedrukt, maar dat de afdrukrechthoek niet klopt.Afdrukhoogte en afdrukbreedte moeten worden aangepast. Dit gebeurt in de Printdocument1_PrintPage subroutine. En wel als volgt.

If PrintDocument1.DefaultPageSettings.Landscape = True Then Dim hulp As Integer hulp = afdrukhoogte afdrukhoogte = afdrukbreedte afdrukbreedte = hulp End If

Je ziet dat in de code afdrukhoogte en afdrukbreedte zijn verwisseld en dat is nu net wat het verschil is tussen Portrait (staand) en Landscape (liggend).

6. Pas de subroutine PrintDocument1_PrintPage als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim lettertype As New Font("Arial", 12) Dim letterkleur As Brush letterkleur = Brushes.Black Dim afdrukhoogte, afdrukbreedte, linkermarge, bovenmarge As Integer With PrintDocument1.DefaultPageSettings afdrukhoogte = .PaperSize.Height - .Margins.Top - .Margins.Bottom afdrukbreedte = .PaperSize.Width - .Margins.Left - .Margins.Right

Hoofdstuk 7 136

linkermarge = .Margins.Left bovenmarge = .Margins.Top If PrintDocument1.DefaultPageSettings.Landscape = True Then Dim hulp As Integer hulp = afdrukhoogte afdrukhoogte = afdrukbreedte afdrukbreedte = hulp End If End With Dim rechthoek As New RectangleF(linkermarge, bovenmarge, afdrukbreedte, afdrukhoogte) e.Graphics.DrawString(RichTextBox1.Text, lettertype, letterkleur, rechthoek) End Sub

1. Start je project.2. Klik op de knop Lay-out instellen.3. Kies Afdrukstand Liggend.4. Klik op de knop OK.5. Klik op de knop Afdrukvoorbeeld tonen.

Je ziet dat het document nu in de afdrukstand liggend wordt getoond met de juiste afdrukrechthoek.

Afdrukken over meerdere pagina’sWanneer je afdruk zich over meerdere pagina’s uitspreidt, moet je daar in de subroutine PrintDocument_PrintPage rekening mee houden. Je gebruikt hiervoor e. HasMorePages. Deze eigenschap heeft een waarde van het type Boolean. Dus waar of onwaar. Om met behulp van PrintDocument_PrintPage meerdere pagina’s te laten afdrukken zet je e.HasMorePages op True. Dit doe je vlak voordat je de subroutine PrintDocument1_Printpage verlaat. Dan is er inmiddels een pagina afgedrukt en e.HasMorePages = True zorgt ervoor dat de subroutine PrintDocument1_Printpage opnieuw begint. Dit proces herhaalt zich totdat de laatste pagina is afgedrukt. Dan zet je de eigenschap e.HasMorePages op False. Je moet dus bijhouden waar je met het afdrukken bent gebleven en een paginanummer bijhouden om te weten wanneer je moet stoppen. Je moet je goed realiseren dat zolang HasMorePages de waarde True heeft de hele PrintDocument1_PrintPage subroutine telkens opnieuw wordt doorlopen. Wanneer je variabelen om bij te houden hoever je bent met het afdrukken in de PrintDocument1_PrintPage subroutine zelf dimensioneert, worden deze bij elke nieuwe start van de subroutine weer op nul gezet! Wil je waarden in variabelen behouden over meerdere pagina’s, dan moet je die dus buiten de PrintDocument1_PrintPage subroutine dimensioneren. Dit doe je door bovenaan de code van het project deze variabelen als Private te dimensioneren.

In de volgende twee projecten ga je afdrukken over meerdere pagina’s.

Afdrukken van gegevens uit een dataset over meerdere pagina’s met 1 afbeelding en set gegevens per paginaIn het volgende project druk je gegevens af uit een dataset met op elke bladzijde 1 foto met een aantal bijbehorende gegevens.

1. Maak een nieuw Windows Forms Application project genaamd afdrukken4.

Hoofdstuk 7 137


3. Plaats twee knoppen, een datagridview, een PrintPreviewDialog object en een PrintDocument object op het formulier.


5. Voeg de 3 foto-bestanden in C:\Users\...\Documents\vbmetdatabases2015community en de database fotodatabase.accdb als resources toe aan je project.

6. Zet van deze bestanden de properties Build action op Content en Copy to Output Directory op Copy always.

7. Zet helemaal bovenaan de code de volgende code:


8. Voeg onder Public Class Form1 de volgende code toe:

Private aantalleerlingen As Integer Private dataset1 As New DataSet

9. Genereer een PrintDocument1_PrintPage subroutine.10. Pas de subroutine als volgt aan:

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Static paginanr As Integer paginanr = paginanr + 1 aantalleerlingen = dataset1.Tables(0).Rows.Count e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(0), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50) e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(1), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 50) e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(2), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 250, 50) e.Graphics.DrawImage(Image.FromFile(".\resources\" & dataset1.Tables(0).Rows(paginanr - 1).Item(3)), 400, 50, 150, 200) If paginanr < aantalleerlingen Then e.HasMorePages = True Else e.HasMorePages = False End If End Sub

Om te bepalen of er nog een nieuwe pagina moet worden aangemaakt gebruik je het paginanummer. Dit is een variabele waarvan je de waarde ook buiten de subroutine wilt bewaren. Je hebt dit al eerder gedaan door de variabele dataset1 aan het begin van de code te dimensioneren met Private. Maar het kan ook anders. Je dimensioneert dan een variabele paginanr van het type Static.

Static paginanr As Integer

Hoofdstuk 7 138

Variabelen van dit type blijven bestaan wanneer de subroutine eindigt. Zelfs wanneer de variabele opnieuw wordt gedimensioneerd, blijf de oude waarde bestaan. Wanneer de variabele paginanr gedimensioneerd wordt is de waarde ervan 0. In de volgende regel wordt de waarde met 1 opgehoogd en dus is de waarde van paginanr nu 1.

paginanr = paginanr + 1

Daarna vul je de variabele aantalleerlingen met het aantal records in dataset1.

aantalleerlingen = dataset1.Tables(0).Rows.Count

De gegevens van de eerste pagina worden nu op PrintDocument1 geplaatst met de methoden DrawString voor de teksten en DrawImage voor de afbeeldingen.

e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(0), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 50, 50) e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(1), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 150, 50) e.Graphics.DrawString(dataset1.Tables(0).Rows(paginanr - 1).Item(2), New Font("Arial", 10, FontStyle.Regular), Brushes.Black, 250, 50) e.Graphics.DrawImage(Image.FromFile(".\resources\" & dataset1.Tables(0).Rows(paginanr - 1).Item(3)), 400, 50, 150, 200)

Wanneer dit gedaan is, wordt gecontroleerd of het paginanummer nog steeds kleiner is dan het aantal records in de dataset.

If paginanr < aantalleerlingen Then e.HasMorePages = True Else e.HasMorePages = False End If

Dit aantal is opgeslagen in de variabele aantalleerlingen. Omdat de gegevens van elke leerling in de dataset op een aparte pagina worden afgedrukt, is het aantal pagina’s dat je nodig hebt gelijk aan het aantal leerlingen. Als het paginanummer nog kleiner is dan de waarde van aantalleerlingen, moet er nog een pagina worden aangemaakt. Dus e.HasMorePages = True. Daarna wordt alle code vanaf het begin van PrintDocument1_PrintPage weer uitgevoerd. Wanneer het paginanummer niet meer kleiner is dan de waarde van de variabele aantalleerlingen, zijn de gegevens van alle leerlingen afgedrukt en hoeft er geen nieuwe pagina meer te worden aangemaakt. Dus e.hasMorePages=False.

1. Verander de tekst van de eerste knop in Toon Gegevens.2. Genereer een Click subroutine voor deze knop.3. Pas de subroutine als volgt aan:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim verbindingsstring As String

Hoofdstuk 7 139

verbindingsstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;" Dim verbinding As New OleDbConnection(verbindingsstring) Dim da As New OleDbDataAdapter("Select * FROM leerlingen", verbinding) verbinding.Open() Dim adapter As New OleDbDataAdapter("SELECT * from leerlingen", verbinding) adapter.Fill(dataset1) DataGridView1.DataSource = dataset1.Tables(0)

Verbinding.Close End Sub

4. Verander de tekst van de tweede knop in Afdrukvoorbeeld.5. Genereer een Click subroutine voor deze knop.6. Pas de subroutine als volgt aan:

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click PrintPreviewDialog1.WindowState = FormWindowState.Maximized PrintPreviewDialog1.PrintPreviewControl.Zoom = 1.0 If PrintPreviewDialog1.ShowDialog = DialogResult.OK Then PrintDocument1.Print() End If End Sub

7. Start je project.8. Klik op de knop Toon gegevens.9. Klik op de knop Afdrukvoorbeeld.

Het scherm Afdrukvoorbeeld verschijnt en je ziet de gegevens van het eerste record.

10. Blader door de pagina’s. Gebruik hiervoor de omhoog/omlaag pijltjes rechtsboven aan het scherm.

Je ziet de andere pagina’s, telkens met de gegevens van 1 persoon.

11.Sluit je programma.

Afdrukken van gegevens uit een dataset over meerdere pagina’sIn dit project druk je gegevens af uit een dataset met zoveel rijen gegevens dat deze meerdere pagina’s nodig hebben.

1. Maak een nieuw Windows Forms Application project genaamd AfdrukkenUitGroteDatabase.


3. Plaats twee knoppen, een RichtTextBox, een datagridview, een PrintPreviewDialog object en een PrintDocument object op het formulier.


5. Voeg de database keuzepakketGROOT.accdb (in de map C:\Users\...\Documents\vbmetdatabases2015community) toe aan je project.

Hoofdstuk 7 140

6. Zet van dit bestand de properties Build action op Content en Copy to Output Directory op Copy always.

7. Zet helemaal bovenaan de code de volgende code:


8. Voeg onder Public Class Form1 de volgende code toe:

Private dataset1 As New DataSet Private paginanr = 1, recordnr As Integer

Net als in het vorige project gebruik je in dit project de PrintDocument1_PrintPage subroutine een aantal keren achtereen. Om waarden van een aantal variabelen langer dan één subroutine te bewaren gebruik je de bovenstaande variabelen.

12. Verander de tekst van de eerste knop in Laad gegevens.13. Genereer een Click subroutine voor deze knop.14. Pas de subroutine als volgt aan:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim verbindingsstring As String verbindingsstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source= .\resources\keuzepakketGROOT.accdb;" Dim verbinding1 As New OleDb.OleDbConnection(verbindingsString) verbinding1.Open() Dim adapter1 As New OleDbDataAdapter("SELECT * FROM leerlingen", verbinding1) dataset1.Clear() adapter1.Fill(dataset1) DataGridView1.DataSource = dataset1.Tables(0) Dim tekst, tekstbegin As String tekst="" Dim command As New OleDbCommand command.CommandText = "SELECT * FROM leerlingen" command.CommandType = CommandType.Text command.Connection = verbinding1 Dim lezer As OleDbDataReader lezer = command.ExecuteReader While lezer.Read() tekstbegin = lezer.GetValue(0) & " " & vbTab & Mid(lezer.GetString(1) & " ", 1, 10) & _ " " & vbTab & Mid(lezer.GetString(2) & " ", 1, 10) & vbCrLf tekst = tekst + tekstbegin End While RichTextBox1.Text = tekst verbinding1.Close() End Sub

Het grootste deel van de code hierboven bevat niets dat je niet eerder hebt gezien. Alleen een stukje code in het deel over de lezer heeft wat uitleg nodig.

Hoofdstuk 7 141

While lezer.Read() tekstbegin = lezer.GetValue(0) & " " & vbTab & Mid(lezer.GetString(1) & " ", 1, 10) & _ " " & vbTab & Mid(lezer.GetString(2) & " ", 1, 10) & vbCrLf tekst = tekst + tekstbegin End While RichTextBox1.Text = tekst

De lezer bevat de gegevens uit de database. Per record (regel) zijn dat 3 velden. Deze zijn genummerd 0 tot en met 2. In de stringvariabele tekstbegin plaats je de inhoud van alle 3 velden van 1 record, telkens gescheiden door een Tab, plus een code om naar de volgende regel te gaan. Dat geheel plak je aan de al ingelezen tekstregels in de variabele tekst. Dit doe je net zolang als er regels in de lezer zitten. Tenslotte plaats je de inhoud van de variabele tekst in de tekst van RichtTextBox1.

De functie Mid(String, startpos, lengte) wordt hier gebruikt om de tekst netjes in de RichTextBox te krijgen. Je wilt dat de inhoud van de tweede en derde velden altijd 10 karakters lang is. Dat ziet er in de RichTextBox mooi uit.

lezer.GetString(1) & " "

Dit stukje code telt bij de string uit veld 1 in de lezer 10 spaties op. Zo heb je altijd, ook bij een lege string, tenminste 10 karakters. Dan neemt de functie Mid vervolgens 10 karakters gerekend vanaf de linkerkant van de ontstane string. Staan er langere strings in de database, dan moet je de ruimte voor de string iets groter maken.

Mid(lezer.GetString(1) & " ", 1, 10)

De strings worden gescheiden door een Tab. Deze wordt er met twee ampersand tekens tussen geplakt.

& vbTab &

En aan het eind van de regel wordt er met het ampersand teken nog een CarriageLinFeed aangaplakt.

& vbCrLf

Dan wordt de string tekstbegin toegevoegd aan de stringvariabele tekst die al alle vorige regels bevat.

tekst = tekst + tekstbegin

En tenslotte wordt de string tekst in de RichTextBox geplaatst.

RichTextBox1.Text = tekst2 & tekst

Dan moet het PrintDocument1_PrintPage gedeelte nog gemaakt worden.

1. Dubbelklik op PrintDocument1 om een PrintPage subroutine te genereren.2. Pas de subroutine als volgt aan:

Hoofdstuk 7 142

Private Sub PrintDocument1_PrintPage(ByVal sender As System.Object, ByVal e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage Dim bovenmarge As Integer bovenmarge = PrintDocument1.DefaultPageSettings.Margins.Top Dim ondermarge As Integer ondermarge = PrintDocument1.DefaultPageSettings.Margins.Bottom Dim afdrukhoogte As Integer afdrukhoogte = PrintDocument1.DefaultPageSettings.PaperSize.Height - ondermarge - bovenmarge 'Dim regel As String 'regel = Nothing Dim lettertype As New Font("Arial", 14) Dim letterkleur As Brush letterkleur = Brushes.Black Dim aantalRecords As Integer aantalRecords = dataset1.Tables(0).Rows.Count Dim aantalRegelsPerPagina As Integer aantalRegelsPerPagina = afdrukhoogte / lettertype.Height Dim maxpaginas As Double maxpaginas = Math.Ceiling(aantalRecords / aantalRegelsPerPagina) Dim regelnr As Integer regelnr = 0 While (recordnr < aantalRegelsPerPagina * paginanr) And (recordnr < aantalRecords) e.Graphics.DrawString(paginanr.ToString, lettertype, letterkleur, 400, 20) e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(0), lettertype, letterkleur, 50, bovenmarge + ((lettertype.Height)) * regelnr) e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(1), lettertype, letterkleur, 250, bovenmarge + ((lettertype.Height)) * regelnr) e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(2), lettertype, letterkleur, 450, bovenmarge + ((lettertype.Height)) * regelnr) recordnr = recordnr + 1 regelnr = regelnr + 1 End While If paginanr < maxpaginas Then paginanr = paginanr + 1 e.HasMorePages = True Else e.HasMorePages = False End If End Sub

De variabelen die telkens dezelfde waarde mogen hebben worden hier in de subroutine gedimensioneerd. Een aantal gegevens die je voor het vaststellen van de afdrukrechthoek nodig hebt worden gelijk berekend.

Dim bovenmarge As Integer bovenmarge = PrintDocument1.DefaultPageSettings.Margins.Top Dim ondermarge As Integer ondermarge = PrintDocument1.DefaultPageSettings.Margins.Bottom Dim afdrukhoogte As Integer afdrukhoogte = PrintDocument1.DefaultPageSettings.PaperSize.Height - ondermarge - bovenmarge

Hoofdstuk 7 143

Lettertype en letterkleur worden gedimensioneerd en ingesteld. In dit voorbeeld wordt lettertype Arial met size 14 gebruikt. Size kun je als je wilt zelfs overnemen van de fonthoogte die RichTextBox1 gebruikt. De code daarvoor zou zijn: Font("Arial", RichTextBox1.Font.Height). Ook de letterkleur kun je zelf kiezen.

Dim lettertype As New Font("Arial", 14) Dim letterkleur As Brush letterkleur = Brushes.Black

Dan ga je het aantal af te drukken records bepalen. Dit is natuurlijk het aantal records in de dataset.

Dim aantalRecords As Integer aantalRecords = dataset1.Tables(0).Rows.Count

Het aantal regels dat per pagina kan worden afgedrukt hangt af van de hoogte van het lettertype en de afdrukhoogte. De hoogte van je lettertype is de size, dus de hoogte in pixels van je lettertype plus een aantal lege pixels om de regels met letters uit elkaar te houden. De afdrukhoogte is de hoogte van het papier minus onderen bovenmarge.

Dim aantalRegelsPerPagina As Integer aantalRegelsPerPagina = afdrukhoogte / lettertype.Height

Je kunt nu ook bepalen wat het maximaal aantal af te drukken pagina’s is. Dit is het aantalrecords gedeeld door het aantal regels per pagina, afgerond op een geheel getal. aantalRecords en aantalRegelsPerPagina zijn beide van het type integer. De breuk van deze twee levert een getal van het type double op. Math.Ceiling(aantalRecords / aantalRegelsPerPagina) zorgt er voor dat het resultaat van de deling naar boven (het plafond = ceiling) wordt afgerond.

Dim maxpaginas As Double maxpaginas = Math.Ceiling(aantalRecords / aantalRegelsPerPagina)

Een alternatieve berekening zou zijn geweest:

maxpaginas = aantalRecords / AantalRegelsPerPagina maxpaginas = Math.Round((maxpaginas + 0.5), 0)

Je rekent eerst de deling uit en zet het resultaat in de double maxpaginas. Door een half bij het resultaat van de deling op te tellen en af te ronden wordt het gebroken getal altijd naar boven afgerond. Dit moet, want als je 2 pagina’s en een beetje wilt afdrukken heb je wel 3 hele pagina’s nodig. Bijvoorbeeld 45/22=2,045, en 2,045 + 0,5 = 2,545. Afgerond is dat 3, met andere woorden om 45 records of regels af te drukken op papier dat 22 regels kan hebben heb je 3 pagina’s nodig.

Dan moet je nog bijhouden welke regel (record) op de bladzijde je afdrukt. Dit gebruik je om te bepalen waar de y-waarde, ofwel de verticale positie van het startpunt van het afdrukken is. Je zet het regelnummer elke keer dat je de subroutine PrintDocument1.PrintPage runt weer op 0. Je begint immers telkens weer bovenaan de bladzijde af te drukken.

Hoofdstuk 7 144

Dim regelnr As Integer regelnr = 0

Na elke regel hoog je de variabele regelnr met 1. Het regelnummer wordt zo gebruikt om steeds een regel verder naar beneden af te drukken. Hoe dat precies werkt zie je zodadelijk.

While (recordnr < aantalRegelsPerPagina * paginanr) And (recordnr < aantalRecords)

De While figuur bestaat uit twee voorwaarden. In de eerste voorwaarde wordt bepaald dat er slechts een maximaal aantal regels(records) op een pagina mogen worden afgedrukt. De tweede voorwaarde bepaalt dat het nummer van het af te drukken record nooit groter mag zijn dan het totaal aantal records uit de database.Als beide voorwaarden juist zijn wordt er record voor record uitgelezen en afgedrukt. Is aan een van de voorwaarden niet voldaan dan wordt of een nieuwe pagina gecreëerd en begint de printdocument_Printpage routine van af het begin weer opnieuw waarbij wel private variabelen worden onthouden.

Voorwaarde 1: (recordnr < aantalRegelsPerPagina * paginanr)In de integer variabele recordnr houdt je bij welk record er afgedrukt gaat worden. Per pagina passen er een bepaald aantal op. Dat aantal staat in de variabele aantalRegelsPerPagina. Als je het aantal regels per pagina vermenigvuldigd met het paginanummer krijg je het nummer van het laatste record dat op die pagina mag worden afgedrukt. Het recordnr is bovenaan de code gedimensioneerd en telt dus door, terwijl het regelnr steeds bij elke pagina weer op 0 wordt gezet. Bij elke pagina geldt dat het nummer van het laatste af te drukken record hetzelfde is als het aantalregels per pagina * het paginanr. Bij pagina 1 is dat bij voorbeeld 1. Dus waneer er 44 regels op een pagina passen is dat 44*1 = 44. De variabele recordnr is buiten de subroutine PrintDocument1_PrintPage gedimensioneerd en is dus na afloop van deze subroutine gewoon blijven bestaan. De waarde staat inmiddels op 44. Dit is het nummer van het 45e record. Bij pagina 2 is het nummer van het laatste af te drukken record 88. 2 keer zo hoog omdat het aantalrecords doorloopt, dus bijv van 45 t/m 88; aantalRegelsPerPagina * paginanr = 44*2 = 88.

Zoals gezegd wordt de variabele regelnr telkens opnieuw gedimensioneerd en dus telkens op 0 gezet. Bij het afdrukken van der regels verhoog je het verticale startpunt, de y-waarde. Elke keer komt er de hoogte van een regel bij, namelijk regelnr maal de hoogte van het lettertype.

In de eerste regel van elk document wordt het paginanr afgedrukt

e.Graphics.DrawString(paginanr.ToString, lettertype, letterkleur, 400, 20)

In de volgende regels worden de records uit de dataset uitgelezen. Het regelnummer wordt voortdurend opgehoogd. Daardoor wordt de regel steeds verder van de bovenkant afgedrukt.

e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(0), lettertype, letterkleur, 50, bovenmarge + ((lettertype.Height)) * regelnr)

Hoofdstuk 7 145

e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(1), lettertype, letterkleur, 250, bovenmarge + ((lettertype.Height)) * regelnr) e.Graphics.DrawString(dataset1.Tables(0).Rows(recordnr).Item(2), lettertype, letterkleur, 450, bovenmarge + ((lettertype.Height)) * regelnr) recordnr = recordnr + 1 regelnr = regelnr + 1 End While

Dit loopt door totdat er een record aan de beurt is met een nummer hoger dan aantalRegelsPerPagina * paginanr. Zolang het maximaal aantal af te drukken pagina's nog niet is bereikt wordt het paginanummer met 1 verhoogd en er wordt een nieuwe pagina gemaakt. Wanneer het maximale aantal pagina’s wel is bereikt worden geen nieuwe pagina' s meer aangemaakt.

If paginanr < maxpaginas Then paginanr = paginanr + 1 e.HasMorePages = True Else e.HasMorePages = False End If

Kort samengevat:Wanneer je een tekst op papier gaat afdrukken representeert het printdocument het blaadje in de printer waarop je wilt afdrukken. Je maakt je in dit project niet druk over de breedte van de regels die je gaat afdrukken. Wel wil je bepalen hoeveel regels er uiteindelijk op het papier worden afgedrukt. Omdat je het aantal gegevens dat je wilt afdrukken uit de dataset kunt bepalen, kun je ook direct uitrekenen hoeveel pagina’s je uiteindelijk gaat afdrukken.Als eerste bepaal je aan de hand van de boven- en ondermarge hoe groot het gebied is dat voor het afdrukken per pagina beschikbaar is. Dit heet in dit voorbeeld de afdrukhoogte.Vervolgens ga je aan de hand van de grootte van het lettertype bepalen hoeveel regels er in dat afdrukgebied per pagina passen. Dan kun je ook het maximaal af te drukken pagina’s uitrekenen. Zolang het maximale aantal pagina’s niet is bereikt wordt er een nieuwe pagina aangemaakt. Om op een pagina af te drukken gelden er twee voorwaarden.Voorwaarde 1 zegt dat het nummer van het record dat je afdrukt niet hoger is dan het totaal aantal regels per pagina maal het paginanummer. Voorwaarde 2 is dat het nummer van het record dat je wilt afdrukken niet hoger is dan het totaal aantal records in de dataset.

Wanneer e.hasMorePages true is gaat de computer alles weer bij langs vanaf de code aan het begin van de printdocument_PrintPage subroutine. Een tweetal variabelen moet nu gewoon doortellen. Dit zijn recordnr en paginanr . Deze variabelen worden dan ook boven in het project private gedefinieerd. Het regelnr moet echter steeds opnieuw bij 0 beginnen.

1. Verander de tekst van de tweede knop in Afdrukvoorbeeld.2. Genereer een Click subroutine voor deze knop.3. Pas de subroutine als volgt aan:

Hoofdstuk 7 146


1. Start je project.2. Klik op de knop Laad gegevens.3. Klik op de knop Afdrukvoorbeeld.

Het scherm Afdrukvoorbeeld verschijnt en je ziet de gegevens van de records die op de pagina passen.

4. Blader door de pagina’s. Gebruik hiervoor de omhoog/omlaag pijltjes rechtsboven aan het scherm.

Je ziet de andere pagina’s met de resterende records.


Afdrukken via het scherm ‘Afdrukken’Tot nu toe ben je voor het afdrukken steeds via het scherm afdrukvoorbeeld gegaan. In dit scherm kon je instellingen van de lay-out instellen. Maar je kon niet bepalen welk gedeelte van het document afgedrukt moest worden, of het aantal pagina’s. Dat kan wel in het scherm Afdrukken. Dit scherm roep je op met:

PrintDialog1.ShowDialog

Nadat de gebruiker de instellingen heeft aangepast, klikt hij/zij op OK en wordt het daadwerkelijke afdrukken gestart met:

PrintDocument1.Print()

Je gaat het project nog iets uitbreiden:

1. Plaats een PrintDialog object op het formulier.2. Stel de eigenschap Document in op PrintDocument1.3. Plaats nog een knop op het formulier.4. Verander de tekst van de knop in Afdrukken.5. Genereer een Click subroutine voor de knop Afdrukken.6. Pas de code van deze subroutine als volgt aan:

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click If PrintDialog1.ShowDialog = DialogResult.OK Then PrintDocument1.Print() End If End Sub

7. Start je project.8. Klik op de knop Afdrukken.

Hoofdstuk 7 147

Het scherm Afdrukken verschijnt.

9. Verander het Aantal exemplaren op 2.10. Klik op de knop OK.

Er worden twee identieke afdrukken van PrintDocument1 afgedrukt.


Je kunt de standaardinstellingen van het scherm Afdrukken in code aanpassen met de methode PrinterSettings van het object PrintDialog1.

1. Type in de Button3_Click subroutine de volgende code.

PrintDialog1.PrinterSettings

2. Type een punt aan het eind van de code.

Je ziet dan de eigenschappen en methodes van het object PrintDialog1. Printersettings.

PrintTofile Zet de vinkt de checkbox voor “Naar bestand” aan.PrinterName Vermeld de naam van de printer.Copies Stelt het aantal exemplaren wat je wilt afdrukken in.

Hoofdstuk 7 148


Dim Printdialog1 As New PrintDialog Printdialog1.Document = PrintDocument1 Printdialog1.PrinterSettings.Copies() = 2 If Printdialog1.ShowDialog = DialogResult.OK Then PrintDocument1.Print() End If

4. Start je project.5. Klik op de knop Afdrukken.

Het scherm Afdrukken verschijnt en het aantal exemplaren staat op 2.

Afdrukken naar schijfJe kunt in plaats van af te drukken op papier ook afdrukken naar schijf. Ja, inderdaad. Afdrukken naar schijf. Er wordt dan een bestand weggeschreven dat later afgedrukt kan worden.


Printdialog1.PrintToFile = True If Printdialog1.ShowDialog = DialogResult.OK Then PrintDocument1.Print() End If

Dan zie je dat op het afdrukformulier de checkbox voor naar bestand is aangevinktEn wordt het document niet op papier maar naar een file afgedrukt. Je gebruiker krijgt via een klein schermpje de gelegenheid om het bestand een naam te geven, en daarna wordt het opgeslagen in de application folder; de actieve/huidige map.

Zo kun je alle eigenschappen van de printdialoog ook softwarematig instellen. Maar dat moet je zelf maar eens uittesten.

Hoofdstuk 7 149

Hoofdstuk 8 Websites met databasesInleidingIn dit hoofdstuk ga je een paar zogenaamde websites/webapplicaties maken. En net als de Windows programma’s uit de vorige hoofdstukken kunnen objecten de forms gekoppeld worden aan een database.

In het verleden ging het maken van zo’n databound website heel anders dan het maken van een Windows programma. Je gebruikte een mix van HTML-code en een scripttaal zoals PHP of ASP.NET. Je moest meerdere talen kennen en ook het in elkaar passen van de verschillende stukken code was behoorlijk lastig. En om die code dan te testen moest je een aantal programma’s op je computer installeren en allerlei zaken instellen. Al met al een heel gedoe. Nu, met Visual Studio, gaat het een stuk eenvoudiger. Je maakt alle code binnen Visual Studio. Dus zowel het HTML-gedeelte als de scripttaal ASPX. En om je code te testen hoef je geen extra software te installeren. Visual Studio heeft namelijk een ingebouwde webserver waarmee je je web apps kunt testen.

Wil je websites beschikbaar maken voor de rest van de wereld, met andere woorden op een webserver draaien, dan heb je wel extra software nodig, namelijk webserver software. Nogmaals, deze software heb je alleen nodig als je je machine als webserver wilt gaan gebruiken. In een ander hoofdstuk in dit boek vind je meer informatie over het beschikbaar maken van je website op het internet.

Webpagina’s opvragen en verzendenWebsites bestaan uit webpagina’s en deze staan op een zogenaamde webserver computer. Deze webserver is benaderbaar vanuit het internet. Wanneer iemand ergens in de wereld op een hyperlink naar een webpagina klikt, stuurt de browser op de computer van die persoon (de client) een verzoek naar de webserver waar die pagina op staat om de gevraagde webpagina op te sturen. De webserver reageert door de gevraagde pagina naar de computer van die persoon te sturen. Tenslotte maakt de browser van de ontvangende computer de webpagina zichtbaar.

Op zo’n webserver draait speciale webserver software die aanvragen ontvangt en de pagina’s verstuurt. Wanneer er een eenvoudige HTML-pagina wordt opgevraagd, stuurt de webserver de gevraagde HTML-pagina direct terug naar de client. Maar wanneer je in je webpagina’s PHP of ASP.NET functionaliteit inbouwt, wordt deze code eerst op de webserver uitgevoerd door een speciaal programma. En wanneer een webpagina gebruik maakt van gegevens uit een database, worden die gegevens uit de database gehaald en aan het PHP of ASP.NET programma doorgegeven. Het resultaat van deze extra functionaliteit wordt ingebouwd in een HTML-pagina, en deze wordt naar de client gestuurd.

Hoofdstuk 8 150

Een eerste vingeroefening

1. Start Visual Studio.2. Kies File - New Project – (Visual Basic – Web - ) ASP.NET Web

Application.3. Vul bij Name in: zwartrood.4. Vul bij indien nodig bij Location in: C:\Users\...\Documents\Visual Studio

2015\Projects\.(in plaats van de 3 puntjes vul je je gebruikersnaam in.)

5. Klik op de knop OK.

Er verschijnt een nieuw scherm.

6. Kies Empty – OK.7. Cancel een eventueel scherm over Microsoft Azure.

Je computer denkt even heel diep na en maakt een nieuwe solution aan. In deze solution zit een project, ook genaamd zwartrood. De bestanden van het project staan net als bij Windows projecten in de map Projects. Maar er is een extra map gemaakt; de map WebSites. Hierin staan de webpagina’s die je binnen je project maakt en nog een paar andere bestanden. Verander vooral niets aan de locaties van bestanden!Wanneer je website straks helemaal klaar is, en je hem via het internet aan de wereld beschikbaar wilt maken, moet je een aantal handelingen doen. Daarover lees je in het hoofdstuk over het publiceren van websites meer.

Er is nog geen webpagina. In je website zit alleen nog maar een paar standaardbestanden, waaronder een config bestand waarin je instellingen en globale variabelen voor je website kunt zetten. Je ziet Web.config in de Solution Explorer.

We gaan nu eerst een webpagina maken.

1. Kies Project – Add new item – Web Form.

Je zou er ook voor kunnen kiezen om een HTML-pagina toe te voegen, maar een web form biedt veel meer mogelijkheden. Je kunt aan je website zowel HTML-pagina’s als web forms toevoegen.

De eerste pagina van een website heet altijd index of default.

2. Verander de naam van de pagina in default.aspx.3. Klik op Add.

Je ziet de nieuwe pagina default.aspx.

Wanneer je een HTML-pagina toevoegt aan je project toont Visual Studio standaard alleen de code van de pagina. Maar je wilt ook gelijk zien hoe de pagina er uit ziet. Dus moet je de manier waarop html pagina’s worden getoond aanpassen. Als je een HTML-pagina genaamd default hebt, gaat dit als volgt:

1. Rechtsklik in het Solution Explorer scherm op default.aspx.

Hoofdstuk 8 151

2. Kies Open With.3. Kies HTML (Web Forms) Editor.4. Klik op Set as Default.

Je scherm ziet er nu als volgt uit:

5. Klik op OK.

Je scherm is nu gesplitst. (Klik eventueel onderin op het tabblad Split)

Bovenaan zie je de code in het code scherm en daaronder in het designscherm hoe de pagina eruitziet. Omdat je nog geen objecten op de pagina hebt geplaatst zie je in het designscherm alleen een rechthoekig vak met het woord div erboven. Dat is het vak waarin je alle objecten van het web form plaatst.

Je gaat eerst een klein testproject maken. Je kunt werken in het code scherm of in het designscherm. Kies zelf wat je makkelijker vindt.

1. Plaats je cursor in het div gedeelte.2. Kies Toolbox - Textbox.

Het tekstvak verschijnt linksboven in het div vak.

3. Zet je cursor achter het tekstvak en druk 2 keer op de Enter toets.

Je ziet dat er 2 lege alinea’s zijn ontstaan. In de code staan deze aangegeven met de HTML tag voor break <br />. Je ziet dat Visual Studio de benodigde HTML-code voor het heeft gegenereerd.

Hoofdstuk 8 152

4. Voeg een button toe.

In de het codescherm is de html code voor een button verschenen. Maar je ziet hem misschien nog niet in het designscherm.

5. Klik op de tekst tussen de beide schermen om het designscherm te synchroniseren met het codescherm.

De knop is nu zichtbaar in het designscherm. Druk vanaf nu telkens op de synchroniseer tekst wanneer je iets aan de code hebt veranderd en de wijziging nog niet zichtbaar is in het designscherm.

6. Zorg dat de cursor achter de eerste knop staat.7. Plaats een tweede knop.

In het properties vak kun je achter (ID) de naam van een object veranderen.

8. Noem de eerste knop btnRood. 9. Verander de tekst van de knop in Rood.10.Verander de ForeColor van btnRood in een rode kleur.11.Noem de tweede knop btnZwart en verander de tekst in Zwart.12.Geef het tekstvak de tekst: “Deze tekst kan van kleur wisselen.”13.Maak het tekstvak iets groter zodat alle tekst zichtbaar is.

Je pagina ziet er dan ongeveer als volgt uit:

14.Dubbelklik op btnRood om een subroutine voor de klikgebeurtenis te genereren.

Je ziet dat je net als bij Windows forms eventhandlers kunt maken bij objecten.

15.Doe hetzelfde bij btnZwart.16.Pas de twee subroutines aan zoals volgt:

Hoofdstuk 8 153

Protected Sub btnRood_Click(sender As Object, e As EventArgs) Handles btnRood.Click TextBox1.ForeColor = System.Drawing.Color.Red End Sub

Protected Sub btnZwart_Click(sender As Object, e As EventArgs) Handles btnZwart.Click TextBox1.ForeColor = System.Drawing.Color.Black End Sub

Naast het groene debug driehoekje boven in je scherm is de mogelijkheid om te kiezen met in welke browser je je project wilt zien. Natuurlijk alleen als je meerdere browsers op je computer hebt geïnstalleerd.

17.Start je project.

Er verschijnt een waarschuwingsscherm. Het vertelt je dat op dit moment Debugging niet mogelijk is en vraagt of de instellingen in het Web.Config bestand zo aangepast moeten worden dat debuggging wel mogelijk is.

18.Klik op OK.

Je gekozen browser wordt gestart en de pagina default.aspx verschijnt.

19.Klik afwisselend op de 2 knoppen om het resultaat te zien.

In de het adresvak boven in je browserscherm staat http://localhost: gevolgd door een getal en dan WebForm1.aspx. Dat wil zeggen dat deze pagina afkomstig is van een lokale webserver; de webserver die op je eigen machine draait. Dit is de ingebouwde test webserver van Visual Studio. Het getal geeft aan welke poort wordt gebruikt. Dit is voor elk project een ander getal.

1. Sluit de site door de webbrowser te sluiten.

Je webapplicatie met ASP.NET functionaliteit werkt!

Hoofdstuk 8 154

En hoe werkt dit nou allemaal?Zoals gezegd stuurt de webserver een aangevraagde webpagina naar de computer van de gebruiker. Daar toont de browser deze pagina op het scherm. Wanneer de gebruiker op een van de knoppen drukt, vindt er een event plaats. De browser merkt dat en geeft aan de webserver door welk event heeft plaatsgevonden op welke ASPX-pagina. De webserver stuurt de pagina door naar het ASPX-programma. Die verwerkt de code van het klikevent en genereert HTML-code van het resultaat en geeft die door aan de webserver. Deze stuurt dan de bijgewerkte versie van de webpagina weer naar de computer van de gebruiker. De browser toont dan de nieuwe versie van de webpagina.

Het echte werkGoed, je bent er klaar voor. Een echte interactieve website gekoppeld aan een database. En wat voor een website dan wel? Een website voor een relatiebemiddelingsbureau. Stel je de volgende situatie voor: Je hebt van relatiebemiddelingsbureau Snelkoppeling de opdracht gekregen een interactieve website te ontwikkelen. De website moet aansluiten op de Microsoft Access database die ze al hebben. Deze database bevat onder andere de gegevens van hun klanten. De website moet voldoen aan de volgende eisen:

Een klant moet kunnen inloggen met zijn of haar unieke gebruikersnaam en zijn of haar wachtwoord. Als deze combinatie juist is, wordt de klant doorgeschakeld naar de volgende pagina.

Op deze volgende pagina kan een klant zijn of haar hun wensen voor een partner aangeven.

Deze wensen worden ingelezen uit de database, kunnen worden aangepast en de aanpassingen kunnen worden opgeslagen.

Wanneer de klant op een knop drukt toont een scherm een aantal gegevens van alle klanten die aan de wensen voldoen.

Relatiebemiddelingsbureau Snelkoppeling heeft nog een extra eis. Zij hebben als specialiteit het bemiddelen tussen mensen die vrij dicht bij elkaar wonen. Er wordt alleen bemiddeld tussen mensen die in dezelfde provincie of in buurprovincies wonen.

De databaseOm te beginnen heb je een database nodig. Je moet weten welke gegevens er in zitten en hoe de database is georganiseerd. Dus welke tabellen er in de database zitten, welke velden er in die tabellen zitten en hoe de relaties in de database zijn. Je gebruikt hiervoor de database snelkoppeling.accdb. Deze database vind je in de map waarin je aan het begin van dit boek de downloads die bij dit boek horen hebt geplaatst. Waarschijnlijk is dit C:\Users\...\Documents\vb2015communitymetdatabases.

1. Zoek met behulp van de verkenner het bestand snelkoppeling.accdb op.2. Dubbelklik op het bestand snelkoppeling.accdb om de database te openen

in Access.3. Dubbelklik op de tabel Personen.

Hoofdstuk 8 155

Je ziet nu de inhoud van de tabel Personen. Deze tabel bevat de gegevens van de klanten van het relatiebemiddelingsbureau. Maar het is interessanter om het ontwerp van de tabel te zien.

4. Klik linksboven in de werkbalk Weergave – Ontwerpweergave.

Je ziet nu het ontwerpscherm met de velden van de tabel Personen.

Je ziet dat het eerste veld Gebruikersnaam het sleutelveld is. Dat wil zeggen dat elke waarde van dat veld uniek moet zijn. Iedere klant heeft immers zijn eigen gebruikersnaam. De klant krijgt deze toegewezen bij inschrijving. Zo kunnen nooit 2 klanten dezelfde gebruikersnaam krijgen. Een klant moet een gebruikersnaam hebben. Daarom is de eigenschap Vereist ingesteld op Ja. Het veld moet ook echt tekens bevatten. Daarom staat Lengte nul toegestaan op Nee.

2. Klik op het veld Wachtwoord.

Het veld Wachtwoord moet per se zijn ingevuld; Vereist = Ja. Er moet echt iets staan; Lengte nul toegestaan = Nee, en Geïndexeerd = Nee omdat hetzelfde wachtwoord best vaker mag voorkomen.

Hoofdstuk 8 156

De meeste andere velden zijn ook tekstvelden. Daar kan dus tekst in staan. De velden Uitgaan, Muziek e.d. zijn van het gegevenstype Ja/Nee. Dat zijn zogenaamde boolean velden. Een boolean veld kan maar een van twee mogelijke waarden bevatten. Soms zijn dat de waarden Waar en Onwaar, of 0 en 1, maar in Access kunnen dat ook de waarden Ja en Nee zijn. In het hoofdstuk over gegevensvalidatie wordt uitgebreider ingegaan op alle eigenschappen die velden in een database kunnen hebben. Je kunt, als je dat wilt, de andere eigenschappen van de velden bekijken door een veld te selecteren. Links onderaan je scherm zie je dan hoe de eigenschappen van dat veld zijn. Zorg ervoor dat je niets verandert!!!

5. Sluit het scherm met de tabel Personen.

Dan de tabel Provincies. Deze tabel is nodig om te kunnen bepalen welke klanten voldoen aan de wensen. Een passende klant moet immers in dezelfde provincie als de zoekende klant, of in een buurprovincie van die zoekende klant wonen. De tabel Provincies bevat een overzicht van alle provincies met alle buurprovincies.

1. Dubbelklik op de tabel Provincies.

Je ziet het gegevensscherm van de provincie. Elke provincie komt er een aantal keren in voor. Telkens met een van zijn buurprovincies. Ook staat elke provincie er nog een keer in als zijn eigen buurprovincie. Hoewel dat natuurlijk niet waar is, helpt het wel om de query die je straks nodig hebt om geschikte partners te vinden simpel te houden.

Tenslotte de tabel Wensen. De gegevens in deze tabel vormen de wensen die een klant van Snelkoppeling heeft met betrekking tot zijn gezochte partner. Deze gegevens hadden ook in de tabel Personen opgenomen kunnen zijn, maar staan in deze database in een aparte tabel.

1. Bekijk welke velden er in de tabel Wensen staan.

Dan moet je ook nog weten welke relaties er bestaan tussen de velden in de twee tabellen.

1. Selecteer in de menubalk in het tabblad Hulpmiddelen voor databases het icoon Relaties.

Je ziet nu het scherm Relaties met daarin de tabellen met hun velden.

Hoofdstuk 8 157

2. Maak eventueel de tabellen iets groter om alle informatie te kunnen zien.

Je ziet dat er een lijntje loopt van het veld Provincie in de tabel Personen naar het veld Provincie in de tabel Provincies. Het is een veel-op-veel relatie. Dat wil zeggen dat de inhoud van het veld Provincie in de tabel Personen (bij voorbeeld Drenthe) vaker mag voorkomen in het veld Provincie van de tabel Provincies. Maar inhoud van het veld Provincie in de tabel Provincies mag ook vaker voorkomen in het veld Provincie van de tabel Personen.

Ook is er een relatie tussen de velden Gebruikersnaam in de tabellen Personen en Wensen. Er is een 1 op 1 relatie tussen de twee genoemde velden. Met andere woorden dat elke inhoud van het veld Gebruikersnaam in de tabel Personen slechts 1 keer mag voorkomen in het veld Gebruikersnaam van de tabel Wensen. Zoals eerder gezegd is het ook mogelijk de informatie van beide tabellen op te nemen in de tabel Personen, maar om het geheel overzichtelijk te houden is er in deze database voor gekozen om er twee tabellen voor te gebruiken.

3. Sluit het scherm Relaties.4. Sluit de database.

Zo, je weet nu wat er in de database zit. Die kennis heb je later nodig om de juiste query’s te kunnen maken.

De solution SnelkoppelingOm te beginnen heb je een nieuw project nodig.

1. Start Visual Studio.2. Kies File - New Project – (Visual Basic – Web -) ASP.NET Web

Application.3. Vul bij Name in: snelkoppeling.

Hoofdstuk 8 158

4. Vul bij indien nodig bij Location in: C:\Users\...\Documents\Visual Studio 2015\Projects\.(in plaats van de 3 puntjes vul je je gebruikersnaam in.)

5. Klik op de knop OK.

Er verschijnt een nieuw scherm.

6. Kies Empty – OK.7. Cancel een eventueel scherm over Microsoft Azure.

De interfaceJe hebt voor je website 2 schermen nodig: één voor het inloggen, één voor het aangeven van de wensen en om de passende klanten te tonen.

Het scherm inloggenHet scherm inloggen heeft nodig: een tekstvak voor de gebruikersnaam (txtGebruikersnaam) met bijbehorende label (lblGebruikersnaam), een tekstvak (txtWachtwoord) voor het wachtwoord met een bijbehorend label (lblWachtwoord) en een knop (btnLogIn).

1. Maak een pagina (Project – Add New Item – Web Form) genaamd inlog.aspx.

Om op een webpagina de objecten op de juiste plek te krijgen selecteer je het object dat je wilt verplaatsen en kies dan in het Format menu Set Position - Relative. Je kunt het object daarna naar een andere plek op het scherm trekken.

2. Plaats de objecten en geef ze de juiste ID’s en teksten.3. Zorg dat de pagina er ongeveer als volgt uitziet.

4. Run je project.5. Controleer of alles klopt.6. Sluit de site.7. Maak eventueel wijzigingen en test totdat alles goed is.

Op zich voldoende, maar voor een bedrijf moet het scherm er nog iets mooier uitzien.

Bovenaan zet je het logo van het bedrijf en daaronder de naam van het bedrijf. Het bestand met het logo voeg je eerst toe aan de website.

1. Voeg het bestand snelkoppelinglog.jpg als resource toet aan je project.

Hoofdstuk 8 159

2. Sleep uit de Solution Explorer het bestand snelkoppelinglogo.jpg naar links boven de vakjes in het designscherm. Dit is in het codescherm net onder het <div class=”auto-style6”> stukje.

3. Vul in het scherm dat verschijnt bij Alternate Text in snelkoppelinglogo.jpg.4. Voeg aan het eind van de regel code de breaktag <br /> toe.5. Klik op OK.

Het logo verschijnt als een image object. Omdat er een break tag achter staat schuiven de objecten eronder een regel omlaag.

1. Maak het imageobject iets groter.2. Plaats onder het image object een label genaamd lblBedrijfsNaam en een

break tag.3. Geef lblBedrijfsNaam de tekst Snelkoppeling.

Je wilt het uiterlijk ofwel de style van dit label wat aanpassen. Dat kan binnen de pagina, maar beter is het om dit binnen een CSS, ofwel Cascading Style Sheet te doen.

Je gaat een nieuwe style aanmaken en de eigenschappen van deze style worden opgeslagen in een nieuw stylesheet dat aan je project wordt toegevoegd.

1. Selecteer indien nodig lblBedrijfsNaam.2. Kies bij Target Rule – Apply New Style.

Of kies bovenin voor Format en New Style.Het New Style scherm opent.

3. Kies bij Define in: New Style Sheet.4. Kies bij font-family een leuk lettertype, bij voorbeeld Comic Sans MS en stel

de font - size van het label op XX-Large.

Je ziet onderin het scherm de eigenschappen van de nieuwe style.

5. Klik op Apply.Of vink Apply new style to document aan en klik op OK.

6. Kies Ja als antwoord op de vraag of het nieuwe stylesheet aan het project moet worden toegevoegd.

7. Klik op OK.

Deze vraag verschijnt vanaf nu niet meer omdat je vanaf nu style eigenschappen kunt toevoegen aan het stylesheet dat je net hebt gemaakt en toegevoegd aan je project. Dit kun je ook zien in je code. De volgende regel is toegevoegd:

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

De code rond je label is ook aangepast:

<asp:Label ID="lblBedrijfsNaam" runat="server" Text="Snelkoppeling" CssClass="newStyle1" ></asp:Label><br />

Hoofdstuk 8 160

Je ziet dat je label nu een CssClass klasse kenmerk heeft gekregen. De naam van deze klasse is newStyle1. En in het css dat nu aan je project is toegevoegd vindt je deze klasse en haar eigenschappen terug.

1. Open in het StyleSheet1.css bestand in de Solution Explorer door erop te dubbelklikken.

Je ziet de klasse en haar eigenschappen.

2. Sluit het bestand.3. Start je project en bekijk het resultaat van je werk.

Je interface ziet er ongeveer als volgt uit:

4. Sluit de site.

Het zichtbare deel van je pagina is klaar. Maar daarmee zijn we er natuurlijk nog niet.

De database plaatsenJe moet nu de database snelkoppeling.accdb die bij het project hoort, en die nu in de map C:\Users\...\Documents\vb2015communitymetdatabases zit, ergens plaatsen. Bij Windows programma’s is de map van het project, dus de map waarin alle bestanden van het project zitten, of anders de map BIN een prima plek voor de database. Bij webapplicaties is dat niet zo. De gebruikers van je website moeten soms veranderingen kunnen aanbrengen in de database die daar aan vastzit. Dus moet de map waarin de database staat dat toestaan. De gebruikers van je website moeten dus schrijfrechten hebben voor die map. Maar je wilt natuurlijk niet dat de gebruikers schrijfrechten hebben voor alle andere bestanden van je website. Uit veiligheidsoverwegingen plaats je dus de database niet in dezelfde map als de andere bestanden, maar in een aparte map. Om overzicht te houden op alle databases die je voor al je websites gebruikt is het handig om ze allemaal in 1 map te zetten. Vindt je dat niet handig, dan kun je de database ook op een willekeurige andere plaats op je computer zetten.

Hoofdstuk 8 161

1. Maak met de verkenner op de c: schijf een nieuwe map aan genaamd databases.

2. Kopieer met de verkenner het bestand snelkoppeling.accdb van C:\Users\...\Documents\vb2015communitymetdatabases naar de map c:\databases.

Een verbinding met de database makenIn de inlogprocedure heb je gegevens uit de database nodig om te controleren of de inloggegevens kloppen. En dus heb je een verbinding met de database en een datasource nodig. Die twee objecten maak je in 1 keer met een wizard.

1. Open in de Toolbox de Tab Data.

Je ziet een aantal datasources, waaronder een AccesDataSource. Je zou verwachten dat dit de datasource is waarmee je een Microsoft Access database aan de pagina’s kunt koppelen. Maar pas op! Deze datasource is alleen bedoeld voor Access databases met een extensie mdb. Als je met een nieuwer Access bestand, dus met de extensie accdb werkt, gebruik je niet de AccessDataSource, maar de SqlDataSource.

2. Sleep de SqlDataSource op de pagina default.ASP.NET.3. Klik rechts naast de SqlDataSource op Configure Data Source.4. Kies New Connection.5. Kies bij Data source Microsoft Access Database File.6. Kies bij Data Provider .Net Framework Data Provider for OLEDB.

7. Klik op Continue.

Je ziet nu het Add Connection scherm.

Hoofdstuk 8 162

8. Klik op Browse en kies c:\databases\snelkoppeling.accdb.

9. Klik op Openen.10.Test de connection.11.Klik op OK.

In het volgende scherm zie je (als je op het plus teken klikt) de aangemaakte connection string: Provider=Microsoft.ACE.OLEDB.12.0;Data Source= C:\databases\snelkoppeling.accdb.

12.Klik op Next.

Je ziet dan net als in een Windows forms project de vraag of de connection string moet worden opgeslagen in een config bestand. In het geval van een website is dit het bestand Web.config. Het is erg belangrijk om dit wel te doen. Je kunt dan naderhand wanneer je de website op een andere webserver gaat draaien, of wanneer je de locatie van de database verandert, de connection string op 1 plek aanpassen, en hoeft dit niet op elke pagina te doen. Hierover lees je meer in het hoofdstuk over het publiceren van een website.

13.Zorg ervoor dat het vinkje voor Yes, save this connection as aangevinkt is.14.Pas de naam van de connectionstring aan naar:

snelkoppelingConnectionString.15.Klik op Next.

De connectionstring is klaar. Nu moet de data source worden ingesteld.

Hoofdstuk 8 163

Een DataSource instellenWanneer je gebruiker op de knop Login drukt, moet er het een en ander gebeuren. De ingetypte gebruikersnaam en het ingetypte wachtwoord moeten worden vergeleken met de gegevens in de database. Als de ingetypte combinatie gebruikersnaam/wachtwoord in de database voorkomt, moet er worden doorgeschakeld naar de volgende pagina, anders niet.

In het volgende scherm stel je de datasource SqlDataSource1 in. Je bepaalt welke gegevens je nodig hebt. Je gebruikt in dit voorbeeld uit de tabel Personen gegevens uit de velden Gebruikersnaam en Wachtwoord.

1. Kies Specify columns from a table or view.2. Kies bij Name de tabel Personen.3. Plaats vinkjes voor de velden Gebruikersnaam en Wachtwoord.

Onder in het scherm zie je de query.

4. Klik op Next.

In het volgende scherm kun je het resultaat van je query zien.

5. Klik op Test Query.

Hoofdstuk 8 164

Je ziet in het raster het resultaat van de query, en daaronder de query zelf. Je ziet de gebruikersnamen en wachtwoorden van alle records in de tabel Personen. Maar wanneer een gebruiker straks inlogt wil je alleen maar weten of de combinatie van de ingevoerde gebruikersnaam en het ingevoerde wachtwoord in de tabel Personen voorkomen. Dus je query moet worden: SELECT [Gebruikersnaam], [Wachtwoord] FROM [Personen] WHERE (([Gebruikersnaam] = ?) AND ([Wachtwoord] = ?)). De vraagtekens zijn parameters die je later invult met de door de gebruiker opgegeven inloggegevens. Dus moet je de query aanpassen. Dit kan op de vorige pagina van de wizard.

6. Klik op Previous.7. Klik op WHERE.

Je kunt nu criteria toevoegen aan de query.

8. Selecteer in Column Gebruikersnaam.9. Selecteer bij Operator =.10.Selecteer bij Source Control.11.Selecteer bij Control Id txtGebruikersnaam.

Je criterium is dus dat de inhoud van het veld Gebruikersnaam in de database moet overeenkomen met de text van het tekstvak txtGebruikersnaam op de interface.

In het vakje onder SQL Expression verschijnt de toevoeging aan de query: [Gebruikersnaam] = ?.

Hoofdstuk 8 165

12.Klik op Add.

De expressie is toegevoegd aan de query. Maar je moet ook nog een parameter maken voor het wachtwoord.

13.Selecteer bij Column Wachtwoord, bij Operator = en bij Source Control.14.Selecteer bij Control Id txtWachtwoord.15.Klik op Add.

Ook het tweede criterium is toegevoegd aan de query.

16.Klik op OK.

In het volgende scherm zie je de complete query staan.

17.Klik op Next.18.Klik op Test Query.

Er verschijnt een scherm waarop je de waarden van de parameters moet invullen.

19.Vul bij Gebruikersnaam de Value Anneke in.20.Vul bij Wachtwoord de Value kan het in.21.Klik op OK.

Je ziet het resultaat van de query met de ingevulde parameters. De gevraagde gegevens verschijnen.

22.Klik op Finish.

SqlDataSource1 is ingesteld.

23.Run je webpagina om te controleren of er foutmeldingen komen.

In de code van je pagina zie je, vlak voor de sluit tag van form de code van SqlDataSource1 met de connectionstring en de parameters.

Als er een foutmelding komt, stel dan SqlDataSource1 opnieuw in door op het object te rechtsklikken en Configure DataSource te kiezen. Als er geen foutmelding komt, gebeurt er verder niets op het scherm. Er zit immers nog geen enkel object aan de datasource vast.

Het controleren van de login gegevensWat moet er nu precies gebeuren wanneer de gebruiker op de knop Login drukt? Met behulp van de query moet in de database moet worden gecontroleerd of de unieke combinatie van gebruikersnaam/wachtwoord die door de gebruiker is ingevuld bestaat. Bestaat die, dan wordt de gebruiker doorgestuurd naar de volgende pagina. Bestaat de combinatie niet, dan volgt er een melding.

Hoofdstuk 8 166

Dat controleren kun je zoals gezegd doen met een select query op basis van de inloggegevens. Het maakt niet uit welke gegevens je van het gevonden record ophaalt. Het belangrijkste is dat er iets opgehaald wordt als de opgegeven combinatie gebruikersnaam/wachtwoord in de database bestaat. Bestaat die combinatie, dan wordt er 1 record met gegevens opgehaald. Immers, de gebruikersnaam is uniek, dus er kan nooit meer dan 1 record met de opgegeven gebruikersnaam in de database zitten. Dus als er 1 record wordt opgehaald, is de ingevulde combinatie gebruikersnaam/wachtwoord geldig.

Wanneer je je website start en de inlog pagina door de browser wordt geladen en getoond, wordt de select query uitgevoerd. Maar dat levert nog niets op. In de twee tekstvakken staat na het laden van de pagina immers nog niets. De gebruiker heeft nog niet de gelegenheid gehad om iets in te vullen. De select query moet dus opnieuw worden uitgevoerd nadat de inloggegevens zijn ingevoerd en de gebruiker op de knop Login heeft geklikt.

En dan wordt, precies zoals je dat wilt, de inhoud van de velden Gebruikersnaam en Wachtwoord van alle records die in de velden Gebruikersnaam en Wachtwoord respectievelijk dezelfde inhoud hebben als txtGebruikersnaam.Text en txtWachtwoord.Text, opgehaald door SqlDataSource1. Hoe dit precies werkt wordt iets verderop in dit hoofdstuk uitgelegd. Om het resultaat te kunnen zien plaatsen we een gridview op de pagina. Dit gridview koppelen we dan aan SqlDataSource1 zodat het de inhoud van deze datasource toont.

Je gebruikt het gridview alleen om tijdens het ontwikkelen van je webpagina’s te zien wat er gebeurt. Zo kun je fouten in de gegevens snel opsporen. In GridView1 kun je zien wat er in SqlDataSource1 zit. Je verwijdert het gridview wanneer je klaar bent met het ontwikkelen van je pagina. Je vindt het gridview in de Toolbox onder de Tab Data.

1. Plaats een gridview onderaan op het form.2. Stel de eigenschap DataSource van het gridview in op SqlDataSource1.

De kolomtitels van het gridview worden direct aangepast aan de query van SqlDataSource1.

1. Voeg aan de btnLogIn_Click subroutine de volgende regel toe:

SqlDataSource1.Databind()Gridview1.DataBind()

Dit zorgt ervoor dat de select query van SqlDataSource1opnieuw wordt uitgevoerd.

Om te testen of er een record is opgehaald zou je de rows van het gridview kunnen tellen. Maar dat kan in bepaalde situaties tot fouten leiden. Daarom is het beter om te tellen hoeveel records de data source heeft opgehaald.

Vervolgens zoek je uit hoeveel records er zijn opgehaald. Dit aantal sla je op in een variabele genaamd aantal, die vanuit verschillende subroutines benaderbaar moet zijn. Daarom moet deze variabele wordt gedimensioneerd boven aan de code:

Hoofdstuk 8 167

2. Dimensioneer de integer variabele aantal boven aan de code.

Deze ziet er dan als volgt uit:

Partial Class inlog Inherits System.Web.UI.Page Dim aantal As Integer

In de variabele aantal bewaar je dus het aantal records dat door de select query is opgehaald. Dat doe je in de eventhandler van het event selected van SqlDataSource1. Dit event vindt plaats direct nadat de select query van SqlDataSource1 is uitgevoerd, dus direct na SqlSource1.DataBind().

1. Maak een SqlDataSource1_Selected eventhandler.2. Voeg de volgende code toe aan deze eventhandler.

aantal = e.AffectedRows.ToString()

3. Plaats een TextBox onder het gridview.4. Voeg de volgende code toe aan de SqlDataSource1_Selected eventhandler.

TextBox1.Text = aantal.ToString

Dit zorgt ervoor dat het aantal opgehaalde records als string wordt ingesteld in de eigenschap Text van TextBox1. Zo kun je zien hoeveel records er zijn opgehaald.

5. Start je site.

Je ziet GridView1 niet omdat het leeg is. Je ziet wel de lege Textbox1.

6. Type in het tekstvak voor de gebruikersnaam in: Anneke.7. Type in het tekstvak voor het wachtwoord in: kan het.8. Klik op de knop Log in.

Je ziet in GridView1 de opgehaalde gegevens van Anneke. En in TextBox1 zie je het aantal records in Gridview1. Dit zijn de records die in SqlDataSource1 zitten. Je kunt dit controleren door een combinatie gebruikersnaam/wachtwoord in te voeren die niet in de database snelkoppeling.accdb voorkomt, bij voorbeeld Simon/12345.

9. Voer een ongeldige combinatie van inloggegevens in en klik op de knop Log in.

Je ziet GridView1 niet meer. Het is leeg en onzichtbaar. En in TextBox1 staat het aantal records dat GridView1 bevat: 0.

10.Sluit de pagina.

Postback en viewstateDe volgende uitleg is erg belangrijk. Lees deze goed door!

Hoofdstuk 8 168

Wanneer er op de knop Log in wordt geklikt gebeurt er een heleboel. De browser van de gebruiker merkt dat er op de knop wordt geklikt en dat een eventhandler wordt aangeroepen, namelijk btnLogin_Click. Deze eventhandler moet worden afgehandeld door het ASP.NET programma en de database engine op de webserver. De browser stuurt daarom een bericht naar de webserver dat de eventhandler btnLogin_Click moet worden afgehandeld en dat de aangepaste pagina naar de browser moet worden gestuurd. Zo’n aanvraag om vernieuwing van een pagina heet een postback. Maar het doorgeven van welke eventhandler moet worden uitgevoerd is niet het enige dat de browser doet. In de tijd dat de pagina in de browser van de gebruiker zichtbaar is geweest is er ook iets veranderd aan de pagina. De gebruiker heeft iets ingevuld in de twee tekstvakken. Als deze informatie niet zou worden doorgegeven aan het ASP.NET programma, zouden alle wijzigingen die de gebruiker heeft gemaakt sinds de pagina in de webbrowser werd geladen verloren gaan. En in dit geval zou de select query van SqlDataProvider1 worden uitgevoerd met lege parameters. Dus moet de webserver op de hoogte worden gebracht van alle wijzigingen die de gebruiker op de pagina in de webbrowser heeft aangebracht. Dit kan als de webbrowser aan de webserver doorgeeft hoe de pagina er nu na de wijzigingen uitziet. En dit is ook precies wat er gebeurt. De webbrowser houdt de huidige staat van alle veranderbare objecten van de hele pagina, de zogenaamde viewstate, bij in een onzichtbare variabele. Telkens wanneer de webbrowser aan ASP.NET op de webserver vraagt om een eventhandler uit te voeren, geeft de webbrowser deze variabele mee naar ASP.NET zodat deze weet hoe de staat van de pagina is voordat de eventhandler moet worden uitgevoerd. De webserver leest de pagina van schijf in en past deze eerst aan zodat deze overeenkomt met de staat van de pagina in de webbrowser. Pas daarna wordt de code van de eventhandler uitgevoerd. Wanneer dit klaar is, genereert ASP.NET de HTML-code voor de pagina en stuurt deze door naar de webserver, die deze vervolgens weer doorstuurt naar de webbrowser.

Als het aantal opgehaalde records 1 is, is de combinatie goed en moet er doorgeschakeld worden naar de volgende pagina. Als het aantal rijen 0 is, moet er een melding komen.

1. Plaats een label (Label1) onderaan op de pagina.2. Verwijder bij Label1 de tekst.

Voeg het volgende stukje code toe aan de SqlDataSource1_Selected eventhandler in Inlog.aspx.vb.

If aantal = 1 Then Response.Redirect("wensen.aspx") Else Label1.Text = "Combinatie gebruikersnaam/wachtwoord is onjuist." End If

Je gebruikt in de eventhandler hiervoor een If – Then constructie om te testen of er 1 record zit in DataSource1. Als dat zo is schakel je door naar de volgende pagina. Hiervoor gebruik je Response.Redirect, gevolgd door, tussen haakjes en aanhalingstekens, het URL van de webpagina die je de gebruiker wilt tonen. Je kunt een compleet URL gebruiken, bij voorbeeld http://www.mijnwebsite.nl. Maar als de

Hoofdstuk 8 169

volgende pagina een onderdeel van je eigen website is, en in dezelfde map staat als de huidige pagina, is het voldoende alleen de naam van de pagina in te typen. Dus in dit geval wensen.aspx.

In het Else gedeelte zet je een passende boodschap in de text eigenschap van het Label dat je al leeg klaar had staan op de pagina.

Je hebt nu een pagina nodig om naar door te schakelen.

1. Maak een nieuw web form genaamd wensen.aspx aan via Project – Add New Item – Web Form – Add.

Je ziet de nieuwe (nog lege) pagina wensen.aspx. Je project start standaard op met de pagina die actief is. Dat is nu wensen.aspx. Maar je wilt natuurlijk opstarten met de inlog pagina.

1. Klik op de inlog.aspx tab en start je project.2. Vul een ongeldige combinatie gebruikersnaam/wachtwoord in, zoals ik/jij en

klik op de Login knop.

Je ziet dat er een foutmelding verschijnt in label1.

1. Sluit je site en start je project weer op.2. Vul de geldige combinatie Anneke/kan het in en klik op de Login knop.

Je wordt nu doorgeschakeld naar de (nog lege) pagina wensen.aspx. Alles werkt dus naar behoren.

3. Sluit je site.

Tijd om op te ruimen. In de ontwikkelfase van je pagina heb je een raster en een textbox gebruikt om gegevens zichtbaar te maken. Nu je pagina af en getest is moeten die, en de bijbehorende code, worden opgeruimd. Je wilt immers niet dat ze op de definitieve versie van de pagina zichtbaar zijn. Het GridView heb je nog nodig om het databind event van SqlDataSource1 te kunnen aanroepen. Als er geen object meer aan het SqlDataSource1 object vastzit kan het databind niet uitvoeren. Textbox1 kan helemaal weg.

1. Verwijder TextBox1 van inlog.aspx.2. Stel de eigenschap visible van GridView1 op false.

In de SqlDataSource1_Selected eventhandler zie je een blauw golflijntje onder de verwijzingen naar Textbox1. Dat betekent dat die code fout is. Terecht, want TextBox1 bestaat niet meer.

3. Verwijder de volgende regel uit de SqlDataSource1_Selected eventhandler.

TextBox1.Text = aantal.ToString

Als je wilt dat de tekst in het tekstvak txtWachtwoord onleesbaar is, moet je de textmode van het tekstvak aanpassen.

Hoofdstuk 8 170

5. Stel de eigenschap TextMode van txtWachtwoord in op Password. 6. Test je project.

Het doorgeven van waarden tussen webpagina’sHet doorschakelen van de login pagina naar de volgende pagina van je website werkt. Toch is de login pagina nog niet klaar. Want niets belet iemand die het URL van de tweede pagina weet, om direct naar de tweede pagina te surfen zonder eerst langs je inlogpagina te gaan. Een webpagina is “stateless”. Dat wil zeggen dat de tweede pagina niet weet wat er gebeurd is voordat je die pagina aanroept. Toch wil je per se dat iedereen eerst inlogt. Er zijn verschillende manieren om het “stateless” probleem op te lossen.

Client-Side en Server-Side opslag van gegevensJe kunt informatie die je van de ene pagina naar de andere wilt bewaren, opslaan in de computer van de gebruiker. Dit heet client-side state management. Deze manier gebruik je als de informatie die je opslaat niet fraudegevoelig is. Een bekend voorbeeld hiervan is het cookie. Wanneer je echt niet wilt dat de gebruiker van je website bij de opgeslagen informatie kan komen gebruik je server-side state management. Hierbij worden de gegevens opgeslagen op je webserver. Daar kunnen gebruikers niet bij, en deze manier is dus veiliger. Maar let op! Zelfs server-side state management is niet echt veilig. Wil je een echt veilige site maken, dan zul je nog wat extra stappen moeten inbouwen. Dit gaat te ver voor dit boek. Op de MSDN-site van Microsoft vindt je meer informatie over het onderwerp state management.

Cookies en sessiesJe hebt waarschijnlijk al weleens gehoord van cookies. Een cookie is een klein bestand op de computer van de websurfende gebruiker waarin een website, meestal tijdelijk, bepaalde gegevens opslaat. Zo zou je inlogpagina in een cookie een variabele “ingelogd” kunnen opslaan. Je controleert dan als de tweede pagina wordt opgevraagd eerst of die variabele op de computer van de gebruiker bestaat, en als dat zo is, laat je die tweede pagina openen. Maar omdat een cookie een vorm van client-side state management is, en dus op de computer van de gebruiker staat, is een slimme gebruiker zonder al te veel problemen in staat om met die cookie te rommelen, en zo toch oningelogd op de tweede pagina terecht te komen. Daarom kun je beter sessies gebruiken. Via een sessie kun je ook gegevens opslaan, maar dan op de webserver. En daar kan de gebruiker van je webpagina niet makkelijk bij. Je geeft dan in de inlogpagina, nadat gecontroleerd is dat de combinatie gebruikersnaam/wachtwoord juist is, en vlak voordat je doorschakelt naar de tweede pagina, de opdracht om iets, bijvoorbeeld de gebruikersnaam van de ingelogde gebruiker in een sessie op te slaan. Op de tweede pagina controleer je dan of er sessiegegevens met gebruikersnaam bestaan, en als dat zo is laat je die pagina laden. Als de gegevens niet bestaan, dus wanneer de gebruiker niet langs je inlogpagina is geweest, dan loods je de gebruiker naar de inlogpagina.Zodra je gebruiker zijn browser sluit, worden de gegevens in de sessie gewist. De volgende keer moet hij/zij dus weer opnieuw inloggen. Voor elke gebruiker die actief is op jouw site maakt de webserver software een uniek id-nummer aan, zodat de sessiegegevens van verschillende gebruikers niet door elkaar komen.

Hoofdstuk 8 171

Opslaan van gegevens in een sessieHet opslaan van de gegevens in de sessie moet natuurlijk gebeuren voor je doorschakelt naar de volgende pagina. Zet de volgende regels code vlak voor de regel met het Response.Redirect commando in de SqlDataSource1_Selected eventhandler van je eerste pagina.

Session("Gebruikersnaam") = txtGebruikersnaam.Text

De text van txtGebruikersnaam, de ingevoerde gebruikersnaam, wordt in een variabele “Gebruikersnaam” in een sessie op de webserver bewaard.

De hele subroutine ziet er dan als volgt uit:(In het programma loopt de tekst van de regels die hier afgebroken zijn door.)

Private Sub SqlDataSource1_Selected(sender As Object, e As SqlDataSourceStatusEventArgs) Handles SqlDataSource1.Selected aantal = e.AffectedRows If aantal = 1 Then Session("Gebruikersnaam") = txtGebruikersnaam.Text Response.Redirect("wensen.aspx") Else Label1.Text = "Inloggegevens onjuist." End If End Sub

4. Start je project.5. Login met gebruikersnaam Anneke en wachtwoord kan het.

Er lijkt niets anders te gebeuren dan vóór je de nieuwste twee regels had toegevoegd. Toch is de gebruikersnaam opgeslagen. Dat kun je controleren door deze op de wensen pagina weer zichtbaar te maken.

Maar voordat we dat doen, eerst nog even een puntje op de i op de inlogpagina. Wanneer gebruikers gegevens hebben ingevuld verwachten ze dat ze door op de Enter knop te klikken verder kunnen. Om dit te kunnen realiseren moeten we de Inlog knop de Default knop van de pagina maken.

1. Kies het form en zet de eigenschap Defaultbutton op btnLogin.2. Test of het werkt.

Uitlezen van gegevens in een sessieHet uitlezen van gegevens in een sessie gaat heel eenvoudig.

1. Plaats op wensen.aspx, een tekstvak en een knop.2. Dubbelklik op de knop.3. Plaats in de Button1_Click subroutine de volgende code:

TextBox1.Text = CType(Session.Item("Gebruikersnaam"), String)

De tekst van de tekstbox krijgt zo de waarde van de variabele Gebruikersnaam van de sessie. Om het helemaal volgens de regels te doen, wordt de inhoud van de variabele eerst nog gecast, oftewel omgezet, naar een string met behulp van CType.

Hoofdstuk 8 172

Wanneer je op het Debug driehoekje klikt om je website te debuggen (starten) toont Visual Studio in de browser de pagina die op dat moment de focus heeft. Om met een bepaalde pagina te starten moet je dus telkens eerst deze pagina de focus geven. Een alternatief is de pagina die je als eerste wilt zien te selecteren in de Solution Explorer, te rechtsklikken, en Set as Start Page te selecteren.

1. Selecteer inlog.aspx.2. Start je project en log in met gebruikersnaam Anneke en wachtwoord kan

het.3. Klik op de wensen pagina op de knop.

Je ziet dat de gebruikersnaam verschijnt in het tekstvak. Dat betekent dat de variabele is doorgegeven via de sessie.

Om ervoor te zorgen dat iemand niet anders dan via de inlogpagina op de tweede pagina terecht kan komen, controleer je direct aan het begin van de pagina of de variabele gebruikersnaam in de huidige sessie wel gevuld is. Zo ja, OK, zo niet, dan probeert iemand direct de tweede pagina direct op te roepen en moet dat worden geweigerd. De beste plaats voor zo’n controle is de subroutine Page_Load. Deze wordt namelijk uitgevoerd wanneer de pagina wordt geladen in de webserver. Dus helemaal aan het begin en vóór de pagina naar de gebruiker wordt gestuurd.

1. Maak indien nodig op wensen.aspx.vb een Page_Load eventhandler.2. Plaats de volgende code in deze eventhandler.

If CType(Session.Item("Gebruikersnaam"), String) = "" Then Response.Redirect("inlog.aspx")

3. Start je project (zonder eerst de focus op inlog.aspx te zetten).

Je merkt dat je direct wordt doorgestuurd naar de inlogpagina. Precies wat je wilt.

De wensen paginaJe tweede pagina wordt de pagina waarop de gebruiker zijn of haar wensen kan invullen. Die wensen zijn al opgeslagen in de tabel wensen van de database en worden daaruit gelezen wanneer de pagina wordt geladen. Er moeten objecten zijn om de inhoud van alle ‘wens’velden te tonen. De gebruiker kan de wensen ook aanpassen en de wijzigingen opslaan in de database. Maar je moet deze keuzemogelijkheden wel wat sturen. Zo wil je bij enkele velden alleen laten kiezen uit de mogelijkheden die in de database voorkomen. Als er alleen blonde en zwartharige klanten zijn, heeft het geen zin om te laten zoeken naar bruinharige mensen. Zo moet je bij elk object goed nadenken wat de beste oplossing is.

Maar eerst moet form wensen.aspx even worden aangepast. De knop en de bijbehorende code zijn niet meer nodig en moeten dus worden verwijderd.

1. Verwijder van het form de knop en de bijbehorende Click eventhandler.

TextBox1 laat je staan, maar hernoem je.

Hoofdstuk 8 173

11.Verander het ID van Textbox1 in txtGebruikersnaam.12.Voeg een tweede regel code in het Page_Load event toe:

txtGebruikersnaam.Text = CType(Session.Item("Gebruikersnaam"), String)

Objecten afsluiten voor wijzigingen door de gebruikerDe gebruiker mag de informatie in txtGebruikersnaam niet kunnen veranderen. Dat is nu nog niet zo belangrijk, maar straks geef je de gebruiker de gelegenheid om zijn wensen op te slaan en eventueel aan te passen. En dan mag een gebruiker natuurlijk niet bij de gegevens van een andere gebruiker kunnen komen. Daarom moet de eigenschap Enabled van dit tekstvak op False worden gezet.

1. Zet de eigenschap Enabled van het tekstvak txtGebruikersnaam op False.2. Start je project en log in.3. Probeer de inhoud van txtGebruikersnaam te veranderen.

Je merkt dat je de inhoud van txtGebruikersnaam niet meer kunt veranderen.

4. Sluit je site.

Ontwerpen van de pagina wensenDe volgende stap is het ontwerpen van de wensen pagina. Je moet nu bepalen welke informatie je op het scherm wilt tonen en in welke vorm.

Helemaal bovenaan komen het logo en de naam van het bedrijf. Daaronder een tekstvak met de gebruikersnaam. Zo is altijd zichtbaar welke gebruiker is ingelogd. Een wezenlijk deel van de opdracht is dat er alleen mensen geselecteerd mogen worden die in dezelfde provincie of een buurprovincie wonen. Dus moet van de gebruiker bekend zijn in welke provincie hij/zij woont. Deze informatie heb je later nodig omdat er immers alleen geschikte partners worden gezocht in dezelfde provincie of een buurprovincie. Die informatie komt onder de gebruikersnaam. Verder heb je objecten nodig om de verschillende wensen van de gebruiker te kunnen weergeven. Dit zijn zoals gezegd de velden van de tabel Wensen. De velden die strings bevatten, zoals Haarkleur e.d., en de velden die numerieke waarden bevatten zoals GeborenTussen toon je in labels. De velden die boolean waarden bevatten, zoals Roker en Dansen worden weergegeven in checkboxen.

1. Plaats op wensen.aspx links bovenaan, onder de div tag, maar nog boven txtGebruikersnaam het logo en de naam van Snelkoppeling. Je kunt dit doen door de code van de twee objecten Image en Label uit inlog.aspx te kopiëren en te plakken.

2. Kopieer ook de verwijzing naar het stylesheet van de inlog pagina naar de wensen pagina.

Objecten op een web form koppelen aan een databaseOm de gegevens uit de tabel wensen te kunnen tonen heb je een data source nodig.

1. Voeg een SqlDataSource aan je pagina toe. (Toolbox – Data tab – dubbelklik SqlDataSource)

2. Configureer de data source. (pijltje – Configure Data Source)

Hoofdstuk 8 174

3. Kies als Connection snelkoppelingConnectionString - Next.4. Maak de onderstaande query met als bron voor de parameter het control

txtGebruikersnaam.

Om straks ook wijzigingen in de gegevens te kunnen aanbrengen heb je naast een select query ook een update query nodig. Die kun je ook door deze wizard laten genereren.

5. Klik op de knop Advanced.6. Vink beide hokjes aan.7. Klik op OK - Next.8. Test de query met parameterwaarde Anneke en sluit de wizard af met Finish.

Er zijn verschillende objecten die gegevens uit een database kunnen tonen. Erg populair is het GridView. Dit lijkt sterk op het DataGridView dat in Windows Forms projecten wordt gebruikt en je hebt het al op de vorige pagina gebruikt. Het toont meerdere records tegelijk. Omdat we hier maar 1 record tegelijk willen tonen, is het GridView hier niet de ideale keus.

Een DetailsView object toont wel slechts 1 record tegelijk, maar biedt weinig mogelijkheden om de lay-out aan te passen aan je wensen.

Hoofdstuk 8 175

Beter geschikt is een FormView. Dit object toont ook de gegevens van 1 record tegelijk, maar de lay-out ervan kan helemaal aangepast worden aan je wensen. Prima geschikt voor deze situatie. Dus dit ga je gebruiken.Ook stel je gelijk het bijbehorende data source object in.

1. Sleep uit Toolbox, uit de tab Data een FormView object naar precies onder het tekstvak op wensen.aspx. Dus nog vóór de regel met de SqlDataSource.

2. Selecteer FormView1 en klik op het pijltje rechtsboven naast het object.3. Selecteer Choose Data Source – SqlDataSource1.4. Selecteer Refresh Schema.5. Vul als value voor de parameter Anneke in.Als dat niet wil kies voor Configure Data Source ...Dan Next en WhereColumn GebruikersnaamOperator =Source ControlControl ID txtGebruikersnaam6. Klik op OK.

FormView1 zit nu vast aan SqlDataSource1 en haalt daar zijn gegevens uit. Je ziet de namen van de velden van de tabel Wensen al in labels in FormView1. Je ziet dat de waarden van de string en integer velden worden getoond in labels, en de boolean waarden in checkboxen.

1. Start je site en log in met “Anneke” en “kan het”.

Je pagina toont nu onder de afbeelding het volgende:

De tekst in het tekstvak txtGebruikersnaam is lichtgrijs omdat ze door de gebruiker niet te veranderen is. Je hebt immer de eigenschap Enabled van dit tekstvak op False gezet. Eronder, in het formview staat nog een keer de gebruikersnaam. Laat die maar zo staan. Dan kun je zien dat de gegevens van Anneke zijn.

Hoofdstuk 8 176

Maar ook alle andere waarden zijn niet te veranderen. Dat klopt. Wil de gebruiker namelijk de waarden veranderen, dan moet hij/zij eerst op het woord Edit onder het formview klikken. De pagina wordt dan ververst en je ziet de pagina in edit modus. De waarden van de velden staan nu in tekstvakken en checkboxen waarvan je de inhoud wel kunt aanpassen.

2. Klik op Edit.

Het scherm wordt ververst.

3. Pas een waarde aan en klik op Update.

De veranderingen worden doorgegeven aan de onderliggende database en het scherm wordt ververst. Je ziet dat de oude waarde is vervangen door de nieuwe.

4. Sluit je site.

Als je in plaats van een bijgewerkt scherm de volgende foutmelding krijgt, is er iets misgegaan in de wizard die de update query heeft gemaakt.

Serverfout in toepassing /snelkoppeling. Waarden voor een of meer vereiste parameters ontbreken.

De oplossing is als volgt.

1. Rechtsklik op SQLDataSource1.2. Klik op Configure Data Source - Next.3. Selecteer de optie Specify a custom …4. Klik op Next.5. Klik in het volgende scherm op de tab Update.6. Klik op de knop Query Builder.7. Maak het Query Builder scherm groter zodat je de kolom Filter kunt zien.8. Verwijder in de kolom Filter bij alle velden behalve bij het veld Gebruikersnaam

de tekst.

Het scherm ziet er dan uit zoals hieronder.

Hoofdstuk 8 177

9. Klik op OK –Next – Next – Finish.

Je hebt de Update query nu aangepast.

10.Test het updaten van de gegevens opnieuw.

Een dropdownlistbox aan gegevens uit meerdere data sources bindenJe hebt gezien dat het aanpassen van wensen erg eenvoudig gaat. Maar je wilt soms de mogelijkheden van aanpassen wat beperken. Je wilt immers niet laten zoeken op haar- en oogkleuren die helemaal niet voorkomen in de database. Dan zou een lijstje van alle opties die in de database voorkomen handig zijn. Dat kan bij voorbeeld door in de edit modus van de pagina de haarkleur niet te tonen in een tekstvak, maar in een dropdownlistbox. Zo’n listbox bestaat uit twee delen: een tekstvak dat de huidige waarde aangeeft, en een lijstje met de andere opties. Je kunt de dropdownlistbox zo instellen dat hij bij voorbeeld in het tekstvak de waarde van het veld Haarkleur van de tabel wensen van de huidige gebruiker toont, en in het lijstje alle andere haarkleuren die in de tabel personen in de database voorkomen. Wanneer de gebruiker dan (in edit modus) een andere haarkleur selecteert en daarna op Update klikt, wordt de nieuwe gekozen gewenste haarkleur opgeslagen.

Je hebt dus een lijstje nodig met alle haarkleuren die in de tabel Personen voorkomen. Je wilt elke haarkleur maar 1 keer zien. Dus als er bij voorbeeld in de database een aantal blonde, bruine en zwartharige personen zitten, dan moet de dropdownlist elk van die opties één keer tonen. Die plaats je in een aparte data source. Dat gaat met een distinct query. Daarover heb je in hoofdstuk 3 gelezen. Zo’n query ziet er dan als volgt uit: select distinct Haarkleur from Personen.

1. Sleep een sqldatasource op het form en stel de connection in op snelkoppelingConnectionString – OK.

2. Kies Specify a custom SQL statement … - Next.3. Vul in de Select tab onder SQL statement in: select distinct Haarkleur from

Personen.4. Klik op Next – Test Query.

Hoofdstuk 8 178

Je ziet het lijstje met alle haarkleuren 1 keer genoemd.

5. Klik op Finish.

Let op! De query bevat geen sleutelvelden en is een distinct query. De data source wizard kan daarom geen insert, delete of update commando’s maken. Die heb je ook niet nodig omdat je de haarkleuren alleen toont. Je wilt er verder niets aan veranderen.

Je hebt nu twee data sources; 1 met 1 record uit de tabel wensen, namelijk het record van de ingelogde persoon. En 1 met een lijstje met alle haarkleuren die voorkomen in de tabel Personen.

Nu moeten de beide data sources nog een dropdownlist worden gebonden. Je plaatst eerst een dropdownlist in het Edit scherm van FormView1.

1. Maak FormView1 iets breder.2. Rechtsklik op FormView1 en kies Edit Template – EditItemTemplate.3. Plaats een dropdownlist precies rechts naast TextBox#HaarKleur. Als dit

lastig gaat kun je de Toolbox even vastzetten door op het pinnetje icoon bovenin de Toolbox te klikken. Het designscherm wordt dan beter zichtbaar.

Het lijst gedeelte van de dropdownlist moet worden gebonden aan SqlDataSource2.

4. Klik op het kleine pijltje rechts naast DropDownList1.5. Selecteer Choose Data Source.6. Kies SqlDataSource2 – Haarkleur – Haarkleur – OK.

En het tekstvak dat de geselecteerde waarde, de selected value, weergeeft, moet worden gekoppeld aan SqlDataSource1. Omdat het formview waarvan de dropdownlist een onderdeel is als geheel aan SqlDataSource1 is gebonden hoef je die niet meer als data source in te stellen. Je hoeft alleen nog maar aan te geven welk veld uit SqlDataSource1 aan het (selected value) tekstvak in de dropdownlist moet worden gebonden.

7. Klik op het kleine pijltje rechts naast DropDownList1.8. Selecteer Edit Data Bindings.9. Selecteer zonodig bij Bindable properties Selected Value.10.Vink zonodig Field Binding aan en open de dropdownlist naast Bound to:

Je ziet alle velden van SqlDataSource1.

11.Selecteer Haarkleur.12.Zorg ervoor dat Two-way databinding aangevinkt is.

Dit is nodig om wijzigingen te kunnen doorvoeren.

13.Klik op OK.

Hoofdstuk 8 179

Tijd om te testen.

1. Start je project en test het aanpassen van de gewenste haarkleur met behulp van de dropdownlist.

Let op! Je ziet de wijziging pas nadat je op Update hebt geklikt.

Hetzelfde moet ook gebeuren voor de velden Geslacht, Oogkleur, Beroep en Muzieksoort.

1. Plaats in het EditItem template van FormView1 dropdownlist objecten naast de tekstvakken voor de velden Geslacht, Oogkleur, Beroep en Muzieksoort.

2. Maak voor elke dropdownlist een aparte SqlDataSource met een toepasselijke query.

Het is zeer aan te raden om, direct nadat je een datasource hebt gemaakt, maar vóór je hem ergens aan bindt, in het properties scherm de naam van de datasource te wijzigen. In dit project doe je dat niet, omdat er maar een paar datasources per form zijn, maar wanneer je op een form veel data sources hebt, is het wel zo handig om ze een herkenbare naam te geven.

Je zou er voor de dropdownlist naast txtGeslacht voor kunnen kiezen om deze niet aan de database te koppelen. Wanneer je van tevoren precies en zeker weet welke waarden er in een dropdownlist kunnen komen, kun je die waarden ook direct in de eigenschap Items van de dropdownlist invoeren. In dit geval zouden dat m en v zijn; dezelfde waarden als in de tabellen wensen en personen. In het Edit Custom Bindings vul je dan bij Custom Binding Bind("Geslacht") in. In dit geval doe je dat niet. Je weet immers niet of er naast “m” voor man en “v” voor vrouw nog andere categorieën mogen voorkomen in de database.

3. Koppel de dropdownlist objecten aan de data sources zoals hiervoor beschreven.

4. Test de objecten en maakt eventuele verbeteringen.

Als alle dropdownlist objecten goed werken kun je de naastgelegen tekstvakken verwijderen. Die heb je niet meer nodig.

5. Verwijder in het EditItem template van FormView1de tekstvakken Geslacht, Haarkleur, Oogkleur, Beroep en Muzieksoort.

6. Test je project.

Als je wilt kun je de lay-out van de objecten binnen FormView1 nog aanpassen. Daarna sluit je de het editten af.

7. Rechtsklik in FormView1 en kies End Template Editing.

Je mist nog 1 item; een object dat de provincie van de ingelogde persoon toont. Dat object is ook weer gebonden aan een data source.

Hoofdstuk 8 180

1. Maak een SqlDataSource met de volgende select query: select provincie from personen where (gebruikersnaam = ?).

2. Klik op Next.

In deze query moet de waarde van de parameter Gebruikersnaam ingelezen worden uit de control txtGebruikersnaam.

3. Kies in het scherm Define Parameters bij Parameter source Control en selecteer bij ControlID txtGebruikersnaam.

4. Klik op Next.5. Test de query met als waarde Anneke.6. Klik op Finish.

Het label dat aan deze data source is gebonden kan niet los op de pagina staan, maar moet een onderdeel zijn van een data object. Een data object dat geschikt voor zoiets eenvoudigs als het tonen van 1 veld van 1 record is het detailsview object.

7. Plaats een DetailsView object direct onder het tekstvak txtGebruikersnaam en bindt het aan de bijbehorende SqlDataSource.

8. Vul in het propertiesscherm bij de eigenschap DataKeyNames de waarde Provincie in.

Dit is nodig om straks de SelectedValue waarde van het veld Provincie uit het detailsview te kunnen lezen.

9. Start je project.10.Je ziet dat de provincie van de ingelogde persoon zichtbaar is.11.Sluit je site.

Je pagina kan nu de wensen tonen en de gebruiker kan deze aanpassen. Ook zie je de provincie van de gebruiker.

Maar het eigenlijke doel van deze pagina is natuurlijk het zoeken naar geschikte partners. Je hebt een zoekknop nodig, een select query die de gegevens van de geschikte personen opzoekt en een object dat de gegevens van de geschikte personen toont.

1. Plaats een knop op het form en noem deze btnZoek.2. Verander de tekst van deze knop in Zoek!

Om een overzicht van alle geschikte personen te kunnen tonen heb je een passende select query nodig. Je zou dit zoals je al eerder hebt gedaan met een wizard kunnen doen, maar wizards zijn maar beperkt in hun mogelijkheden. En je hebt dit keer een heel speciale select query nodig. Dus maak je de select query dit keer in code. Je wilt een query maken waarbij je als parameters meegeeft wat de gebruiker als wensen heeft opgegeven. Maar de gebruiker hoeft niet per se bij alle wensen iets in te vullen. Het kan best zijn dat het niet uitmaakt welke haarkleur de gewenste partner heeft. In dat geval moet het criterium haarkleur dus niet in de query worden meegenomen. De gebruiker moet dus de gelegenheid krijgen om bepaalde wensen niet te laten meetellen. Daarom plaats je in het Item template links naast de tekst van

Hoofdstuk 8 181

elk ‘wens’label een checkbox. Als deze wordt aangevinkt, wordt de naastliggende wens meegenomen in de select query, anders niet.

We passen het formview aan. We zetten boven deze checkboxen de tekst Meetellen? en de twee jaartellen met de gewenste geboortedata zetten we op 1 regel.

1. Rechtsklik op FormView1 – Edit Template – Header Template.2. Type in het tekstvak de tekst “Meetellen?”.3. Rechtsklik in het tekstvak – End Template Editing.4. Rechtsklik op FormView1.5. Kies Edit Template - ItemTemplate (niet EditItemTemplate).6. Maak het formview iets breder.7. Plaats de cursor achter het return symbool achter het label

GeborenTussenLabel.

Controleer in de code dat de cursor achter <br /> staat.

8. Druk op Delete.

Plaats in Formview1 voor alle items een checkbox. Dit gaat als volgt:

9. Zet de cursor vóór de tekst Geslacht:10.Dubbelklik in de Toolbox op checkbox.11.Plaats 4 spaties tussen de checkbox en de tekst.12.Zet de eigenschap checked van de checkbox op true.13.Zet op bovenstaande manier aan het begin van elke regel een checkbox.14.Zet bij al die checkboxen de eigenschap checked op true.

Je ItemTemplate ziet er dan ongeveer als volgt uit.

15.Rechtsklik in het FormView - End Template Editing.

Hoofdstuk 8 182

Het is erg belangrijk het Template Editing hier te beëindigen, anders krijg je verderop een foutmelding. De volgende stap is het maken van een select query. Je zet deze query in een SqlDataSource, die je koppelt aan een gridview. Deze voorlopige query bevat nog niet de wensen van je gebruiker. Toch maak je vast een data source die je aan een gridview koppelt omdat deze datasource een aantal zaken zoals het laden van de juiste records voor je regelt. De voorlopige select query van deze data source kun je later aanpassen om de gewenste criteria toe te voegen.

Je begint met aan te geven welke velden je wilt zien:

SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren

Dan geef je aan uit welke tabellen de informatie moet komen. Je hebt twee tabellen nodig. Je wilt immers alleen die personen laten selecteren die in dezelfde provincie of een naastgelegen provincie wonen. Om dat te bereiken moet er een relatie worden gelegd tussen Personen.Provincie (waarin staat in welke provincie de klant woont) en Provincies.Provincie (waarin opgezocht wordt welke de buurprovincies daarvan zijn). Er wordt straks eerst gekeken in welke provincie de ingelogde persoon woont. Daarna worden in de tabel Provincies alle records opgezocht waar onder Provincie de naam van die provincie staat. En daarna wordt gekeken welke buurprovincies daar staan. Dus:

FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) Dan de criteria. Als je die in de wizard al toevoegd, moet er voor elke parameter altijd iets ingevuld worden. Dat wil je niet, want je gebruiker geeft zelf aan welke wensen meegenomen moeten worden. Deze criteria voeg je dus pas later toe. Maar 1 criterium geldt wel altijd; namelijk dat de gezochte persoon uit een buurprovincie van de provincie van de gebruiker moet komen. Dat geef je in de query weer met:

WHERE (Provincies.Buurprovincie = ?)

Het vraagteken staat hier voor de naam van de provincie van de gebruiker. En die parameter haal je uit DetailsView1.

Tenslotte wil je de gevonden partners ordenen per provincie. Je voegt dus het volgende aan de query toe:

ORDER BY Personen.Provincie

De gehele query wordt dan:

SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren

Hoofdstuk 8 183

FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) WHERE (Provincies.Buurprovincie = ?)ORDER BY Personen.Provincie

1. Plaats een SqlDataSource helemaal onder SqlDataSource7. Dus in de code vlak boven </div>

2. Kies connectionstring snelkoppelingConnectionString. – Next.3. Kies Specify a custom SQL statement ... – Next.4. Kies eventueel de Select tab – Query Builder.5. Kies in het scherm Add Table de tabel Personen – Add.6. Kies de tabel Provincies – Add - Close.7. Maak het Query Builder scherm veel groter.8. Maak de onderstaande query:

Let op! Klik de velden in de goede volgorde aan.

9. Klik op OK – Next.10.Kies als bron voor de waarde van de parameter het control DetailsView1.

11.Klik op Next.12.Test de Query met als parameterwaarde Flevoland.13.Klik op Finish.

Hoofdstuk 8 184

14.Plaats een gridview tussen btnZoek en SqlDataSource1. 15.Kies als datasource voor het gridview SqlDataSource8.16.Start je project.

Als alles goed gegaan is, zie je een lijst met de gegevens van alle personen uit de tabel Personen die uit Flevoland en haar buurprovincies komen in GridView1. Mooi, maar je wilt natuurlijk alleen de gegevens zien van degenen die aan de wensen voldoen.

Een select query in code opbouwen

In de btnZoek_Click eventhandler moet je de select query van SqlDataSource8 opnieuw opbouwen zodat de aangevinkte criteria worden meegenomen. Dit aanpassen van de query gaat in stapjes. Het begin van de query is bekend:

SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) WHERE (Provincies.Buurprovincie = ?)

De parameter ? van het criterium moet vervangen worden door een waarde. Deze waarde haal je uit DetailsView1en plaats je in een variabele genaamd provincie. De code hiervoor is:

Dim provincie As Stringprovincie = DetailsView1.SelectedValue.ToString

Dan de rest van de query. Deze past niet op 1 regel, dus je bouwt de string op uit deelstrings. Je plakt de deelstrings dan aan elkaar met & _. Zo wordt de query ook overzichtelijk.

Het volgende regel van de code is dan als volgt:

selectquery = "SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren " & _

Dus deze hele regel achter elkaar. Dan volgt de rest, de FROM en WHERE stukjes, ook weer verdeeld in deelstrings en aan elkaar geplakt met & _.

Het begin van de code is dus:

Hoofdstuk 8 185

Dim selectquery As String selectquery = "SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren " & _"FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) " & _"WHERE (Provincies.Buurprovincie = '" & provincie & "')"

Die laatste regel heeft misschien wat uitleg nodig. Na het = teken komt eerst het enkele aanhalingsteken dat aan het begin van de string met de naam van de provincie moet staan. Omdat provincie een variabele is, en geen echte string wordt dan de WHERE-string afgesloten met een dubbel aanhalingsteken. Dan volgt een ampersand om de variabele provincie aan de string te plakken. En dan komen de variabele provincie en weer een ampersand om het laatste stukje string weer aan het voorafgaande geheel te plakken. Dit laatste stukje string bestaat uit het afsluitende enkele aanhalingsteken en het afsluitende haakje.

Als de variabele provincie vanuit DetailsView1wordt ingevuld met bij voorbeeld de waarde Flevoland, dan wordt het WHERE gedeelte dus:

"WHERE (Provincies.Buurprovincie = 'Flevoland')"

Daarmee is de basis van de select query klaar en moet deze worden toegewezen aan SqlDataSource8. Als laatste moet GridView1 dan opnieuw aan SqlDataSource8 gebonden worden om de select query van SqlDataSource8 opnieuw uit te voeren.De code hiervoor is:

SqlDataSource8.SelectCommand = selectquery GridView1.DataBind()

1. Plaats de onderstaande code in de btnZoek_Click eventhandler.

Dim provincie As String provincie = DetailsView1.SelectedValue.ToString Dim selectquery As String selectquery = "SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren " & _"FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) " & _"WHERE (Provincies.Buurprovincie = '" & provincie & "')" 'lees records opnieuw in op basis van de criteria. SqlDataSource8.SelectCommand = selectquery GridView1.DataBind()

2. Start je site en klik op de Zoek! Knop om te kijken of alles werkt.

Als het goed werkt verandert de volgorde van de gevonden records omdat in de oorspronkelijke select query die je met de wizard had gemaakt de records geordend zijn op provincie, en in de select query die je zojuist onder de Zoek! Knop hebt geplaatst de records niet geordend zijn.

Hoofdstuk 8 186

De volgende stap is het toevoegen van de wensen. Als een bijbehorende checkbox is aangevinkt voeg je het criterium toe, anders niet. De code is als volgt:

Dim checkboxgeslacht As CheckBox checkboxgeslacht = CType(FormView1.FindControl("checkbox1"), CheckBox) If checkboxgeslacht.Checked = True Then 'als checkboxgeslacht is aangevinkt.

'lees de geslacht in. Dim labelgeslacht As Label labelgeslacht = CType(FormView1.FindControl("GeslachtLabel"), Label) Dim geslacht As String geslacht = labelgeslacht.Text

'maak criterium voor geslacht. Dim selectgeslacht As String selectgeslacht = " AND Personen.Geslacht = '" & geslacht & "'"

'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectgeslacht

End If

De uitleg. Je maakt (in code) eerst een nieuw checkbox object, genaamd checkboxgeslacht. Je kopieert dan het object checkbox1, dat in het formview zit naast het label Geslacht, naar checkboxgeslacht. Dat is nodig om waarden van checkbox1 te kunnen uitlezen. Alleen als de checkbox op checked staat, dan wordt het volgende stuk code uitgevoerd. Je leest daarin de waarde uit het label GeslachtLabel en plaatst dit in de variabele geslacht. Vervolgens maak je een extra stukje query met daarin het criterium voor het geslacht. Tenslotte voeg je dit extra stukje query toe aan de basisquery. Dit stukje code komt tussen de basisquery en het stukje code waarin de records opnieuw worden ingelezen. De hele code van de btnZoek_Click eventhandler, inclusief wat commentaar, is als volgt:

Protected Sub btnZoek_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnZoek.Click Dim provincie As String provincie = DetailsView1.SelectedValue.ToString Dim selectquery As String selectquery = "SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren " & _"FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) " & _"WHERE (Provincies.Buurprovincie = '" & provincie & "')"

'test of criterium geslacht moet worden meegenomen. Dim checkboxgeslacht As CheckBox checkboxgeslacht = CType(FormView1.FindControl("checkbox1"), CheckBox) If checkboxgeslacht.Checked = True Then 'als checkboxgeslacht is aangevinkt.

'lees de geslacht in. Dim labelgeslacht As Label

Hoofdstuk 8 187

labelgeslacht = CType(FormView1.FindControl("GeslachtLabel"), Label) Dim geslacht As String geslacht = labelgeslacht.Text

'maak criterium voor geslacht. Dim selectgeslacht As String selectgeslacht = " AND Personen.Geslacht = '" & geslacht & "'"

'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectgeslacht

End If

'lees records opnieuw in op basis van de criteria. SqlDataSource8.SelectCommand = selectquery GridView1.DataBind()

End Sub

1. Voeg het nieuwe stukje code toe aan de btnZoek_Click eventhandler.2. Test de site door de checkbox voor het label geslacht een keer wel, en een

keer niet aan te vinken voor je op de Zoek knop klikt, en naar de verschillende resultaten te kijken.

Dan moet voor de resterende wensen hetzelfde gebeuren. De code voor de verschillende wensen lijkt sterk op elkaar. Je vindt de totale code hieronder.

Protected Sub btnZoek_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnZoek.Click 'lees de provincie van de ingelogde gebruiker in. Dim provincie As String provincie = DetailsView1.SelectedValue.ToString

'maak de basisquery. Dim selectquery As String selectquery = "SELECT Personen.Id, Personen.Woonplaats, Personen.Provincie, Personen.Geslacht, Personen.Haarkleur, Personen.Beroep, Personen.Hobby, Personen.Uitgaan, Personen.Dansen, Personen.Muzieksoort, Personen.Roker, Personen.Oogkleur, Personen.Geboren " & _"FROM (Personen INNER JOIN Provincies ON Personen.Provincie = Provincies.Provincie) " & _"WHERE (Provincies.Buurprovincie = '" & provincie & "')" 'test of criterium geslacht moet worden meegenomen. Dim checkboxgeslacht As CheckBox checkboxgeslacht = CType(FormView1.FindControl("checkbox1"), CheckBox) If checkboxgeslacht.Checked = True Then 'als checkboxgeslacht is aangevinkt. 'lees het geslacht in. Dim labelgeslacht As Label labelgeslacht = CType(FormView1.FindControl("GeslachtLabel"), Label) Dim geslacht As String geslacht = labelgeslacht.Text 'maak criterium voor geslacht. Dim selectgeslacht As String selectgeslacht = " AND Personen.Geslacht = '" & geslacht & "'"

Hoofdstuk 8 188

'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectgeslacht End If

'test of criterium geborentussen ... en ... moet worden meegenomen. Dim checkboxgeboortejaar As CheckBox checkboxgeboortejaar = CType(FormView1.FindControl("checkbox2"), CheckBox) If checkboxgeboortejaar.Checked = True Then 'als checkboxgeboortejaar is aangevinkt. 'lees aanvangsjaar in. Dim labelgeborentussen As Label labelgeborentussen = CType(FormView1.FindControl("GeborenTussenLabel"), Label) Dim aanvangsjaar As String aanvangsjaar = labelgeborentussen.Text 'lees eindjaar in. Dim labelen As Label labelen = CType(FormView1.FindControl("EnLabel"), Label) Dim eindjaar As String eindjaar = labelen.Text 'maak criterium voor geboortejaar. Dim selectgeboortejaar As String selectgeboortejaar = " AND Personen.Geboren BETWEEN " & aanvangsjaar & " AND " & eindjaar 'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectgeboortejaar End If

'test of criterium haarkleur moet worden meegenomen. Dim checkboxhaarkleur As CheckBox checkboxhaarkleur = CType(FormView1.FindControl("checkbox3"), CheckBox) If checkboxhaarkleur.Checked = True Then 'als checkboxhaarkleur is aangevinkt. 'lees de haarkleur in. Dim labelhaarkleur As Label labelhaarkleur = CType(FormView1.FindControl("HaarkleurLabel"), Label) Dim haarkleur As String haarkleur = labelhaarkleur.Text 'maak criterium voor haarkleur. Dim selecthaarkleur As String selecthaarkleur = " AND Personen.Haarkleur = '" & haarkleur & "'" 'voeg criterium haarkleur toe aan basis query. selectquery = selectquery & selecthaarkleur End If

'test of criterium oogkleur moet worden meegenomen. Dim checkboxoogkleur As CheckBox checkboxoogkleur = CType(FormView1.FindControl("checkbox4"), CheckBox) If checkboxoogkleur.Checked = True Then 'als checkboxoogkleur is aangevinkt. 'lees de oogkleur in. Dim labeloogkleur As Label labeloogkleur = CType(FormView1.FindControl("OogkleurLabel"), Label) Dim oogkleur As String oogkleur = labeloogkleur.Text

Hoofdstuk 8 189

'maak criterium voor oogkleur. Dim selectoogkleur As String selectoogkleur = " AND Personen.Oogkleur = '" & oogkleur & "'" 'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectoogkleur End If

'test of criterium roker moet worden meegenomen. Dim checkboxroker As CheckBox checkboxroker = CType(FormView1.FindControl("checkbox5"), CheckBox) If checkboxroker.Checked = True Then 'als checkboxroker is aangevinkt. 'lees roker in. Dim checkboxroker2 As CheckBox checkboxroker2 = CType(FormView1.FindControl("RokerCheckBox"), CheckBox) Dim roker As String roker = checkboxroker2.Checked 'maak criterium voor roker. Dim selectroker As String selectroker = " AND Personen.Roker = " & roker 'voeg criterium roker toe aan basis query. selectquery = selectquery & selectroker End If

'test of criterium beroep moet worden meegenomen. Dim checkboxberoep As CheckBox checkboxberoep = CType(FormView1.FindControl("checkbox6"), CheckBox) If checkboxberoep.Checked = True Then 'als checkboxberoep is aangevinkt. 'lees het beroep in. Dim labelberoep As Label labelberoep = CType(FormView1.FindControl("BeroepLabel"), Label) Dim beroep As String beroep = labelberoep.Text 'maak criterium voor beroep. Dim selectberoep As String selectberoep = " AND Personen.Beroep = '" & beroep & "'" 'voeg criterium beroep toe aan basis query. selectquery = selectquery & selectberoep End If

'test of criterium hobby moet worden meegenomen. Dim checkboxhobby As CheckBox checkboxhobby = CType(FormView1.FindControl("checkbox7"), CheckBox) If checkboxhobby.Checked = True Then 'als checkboxhobby is aangevinkt. 'lees de hobby in. Dim labelhobby As Label labelhobby = CType(FormView1.FindControl("HobbyLabel"), Label) Dim hobby As String hobby = labelhobby.Text 'maak criterium voor hobby. Dim selecthobby As String selecthobby = " AND Personen.Hobby = '" & hobby & "'" 'voeg criterium hobby toe aan basis query. selectquery = selectquery & selecthobby End If

Hoofdstuk 8 190

'test of criterium uitgaan moet worden meegenomen. Dim checkboxuitgaan As CheckBox checkboxuitgaan = CType(FormView1.FindControl("checkbox8"), CheckBox) If checkboxuitgaan.Checked = True Then 'als checkboxuitgaan is aangevinkt. 'leesuitgaan in. Dim checkboxuitgaan2 As CheckBox checkboxuitgaan2 = CType(FormView1.FindControl("UitgaanCheckBox"), CheckBox) Dim uitgaan As String uitgaan = checkboxuitgaan2.Checked 'maak criterium voor uitgaan. Dim selectuitgaan As String selectuitgaan = " AND Personen.Uitgaan = " & uitgaan 'voeg criterium uitgaan toe aan basis query. selectquery = selectquery & selectuitgaan End If

'test of criterium dansen moet worden meegenomen. Dim checkboxdansen As CheckBox checkboxdansen = CType(FormView1.FindControl("checkbox9"), CheckBox) If checkboxdansen.Checked = True Then 'als checkboxdansen is aangevinkt. 'lees dansen in. Dim checkboxdansen2 As CheckBox checkboxdansen2 = CType(FormView1.FindControl("DansenCheckBox"), CheckBox) Dim dansen As String dansen = checkboxdansen2.Checked 'maak criterium voor dansen. Dim selectdansen As String selectdansen = " AND Personen.Dansen = " & dansen 'voeg criterium dansen toe aan basis query. selectquery = selectquery & selectdansen End If

'test of criterium muzieksoort moet worden meegenomen. Dim checkboxmuzieksoort As CheckBox checkboxmuzieksoort = CType(FormView1.FindControl("checkbox10"), CheckBox) If checkboxmuzieksoort.Checked = True Then 'als checkboxmuzieksoort is aangevinkt. 'lees de muzieksoort in. Dim labelmuzieksoort As Label labelmuzieksoort = CType(FormView1.FindControl("MuzieksoortLabel"), Label) Dim muzieksoort As String muzieksoort = labelmuzieksoort.Text 'maak criterium voor muzieksoort. Dim selectmuzieksoort As String selectmuzieksoort = " AND Personen.Muzieksoort = '" & muzieksoort & "'" 'voeg criterium muzieksoort toe aan basis query. selectquery = selectquery & selectmuzieksoort End If 'lees records opnieuw in op basis van de criteria. SqlDataSource8.SelectCommand = selectquery GridView1.DataBind()

Hoofdstuk 8 191

End Sub

Deze code staat in tekstbestand selectquery.txt dat bij dit boek hoort. Je kunt deze tekst in de eventhandler invoegen in plaats van de tekst helemaal over te typen.

1. Verwijder alle code uit de btnZoek_Click eventhandler.2. Kopieer de inhoud van het bestand selectquery.txt naar de eventhandler.3. Start je site en test de het samenstellen van de select query met behulp van

de criteria uitvoerig. Let op: In het begin staan alle chequeboxen aangevinkt, er wordt dan met alle wensen rekening gehouden! Het is verstandig om (bijna) alle checkboxen in het begin eerst uit te vinken, omdat anders het gevaar bestaat dat je niets in het grid te zien krijgt of nog erger dat je het hele grid niet ziet en denkt dat het programma niet werkt.

Enkele stukjes zijn anders dan de rest. Daarom hier uitleg over die bijzondere stukjes:

Het criterium geboortejaar heeft twee parameters en maakt gebruik van BETWEEN om te testen of de variabele Personen.Geboren tussen de twee parameters aanvangsjaar en eindjaar ligt. De variabelen aanvangsjaar en eindjaar staan niet tussen enkele aanhalingstekens omdat de waarden ervan integers zijn, en geen strings.

'test of criterium geborentussen ... en ... moet worden meegenomen. Dim checkboxgeboortejaar As CheckBox checkboxgeboortejaar = CType(FormView1.FindControl("checkbox2"), CheckBox) If checkboxgeboortejaar.Checked = True Then 'als checkboxgeboortejaar is aangevinkt. 'lees aanvangsjaar in. Dim labelgeborentussen As Label labelgeborentussen = CType(FormView1.FindControl("GeborenTussenLabel"), Label) Dim aanvangsjaar As String aanvangsjaar = labelgeborentussen.Text 'lees eindjaar in. Dim labelen As Label labelen = CType(FormView1.FindControl("EnLabel"), Label) Dim eindjaar As String eindjaar = labelen.Text 'maak criterium voor geboortejaar. Dim selectgeboortejaar As String selectgeboortejaar = " AND Personen.Geboren BETWEEN " & aanvangsjaar & " AND " & eindjaar 'voeg criterium geslacht toe aan basis query. selectquery = selectquery & selectgeboortejaar End If

En tenslotte:

'test of criterium roker moet worden meegenomen. Dim checkboxroker As CheckBox checkboxroker = CType(FormView1.FindControl("checkbox5"), CheckBox) If checkboxroker.Checked = True Then 'als checkboxroker is aangevinkt.

Hoofdstuk 8 192

'lees roker in. Dim checkboxroker2 As CheckBox checkboxroker2 = CType(FormView1.FindControl("RokerCheckBox"), CheckBox) Dim roker As String roker = checkboxroker2.Checked 'maak criterium voor roker. Dim selectroker As String selectroker = " AND Personen.Roker = " & roker 'voeg criterium roker toe aan basis query. selectquery = selectquery & selectroker End If

Omdat er twee checkboxen zijn waarvan de waarde moet worden ingelezen, gebruik je ook 2 exemplaren van checkboxroker. De eerste gebruik je om te bepalen of de wens meegenomen moet worden. De tweede gebruik je om in te lezen of het control RokerCheckBox aangevinkt is of niet. Bijvoorbeeld: Wanneer de eerste checkboxroker is aangevinkt en de tweede niet dan heeft dat als resultaat dat je alle niet-rokers wilt laten zien.

Hiermee ben je aan het eind van dit hoofdstuk gekomen. Natuurlijk kun je de site nog op veel manieren verbeteren, maar de basis is inmiddels wel duidelijk.

Hoofdstuk 8 193

Hoofdstuk 9 DatavalidatieInleidingBij het invoeren of wijzigen van gegevens in de database kan er van alles misgaan. De gebruikers van je Windows- of web applicatie kunnen typefouten maken, hoofdletters gebruiken waar jij kleine letters wilt zien, letters intypen waar cijfers nodig zijn, of een veld leeglaten waar per se iets ingevuld moet worden. Als er verkeerde gegevens naar je database worden toegestuurd kunnen er twee dingen gebeuren. In het beste geval zal de database een, voor de gebruiker meestal onbegrijpelijke, mededeling terugsturen en de gegevens weigeren, en kan zelfs je applicatie crashen. Maar nog erger is het wanneer de database niet merkt dat de gegevens onjuist zijn, en ze zonder commentaar accepteert. Wanneer dit vaker gebeurt, kan je database uiteindelijk zelfs zo vervuild raken dat ze onbruikbaar wordt. Je wilt data die aan de database wordt aangeboden dus valideren. Dat wil zeggen: testen of die data aan bepaalde voorwaarden voldoet. Datavalidatie vindt plaats op twee plaatsen in je applicatie: in de interface, dus op je webpagina of Windows form, en in de database zelf.

Datavalidatie in de databaseDatavalidatie begint al bij het ontwerpen van de database. Het is verleidelijk om bij het ontwerp van je database alle velden het type tekst te maken. Daar kun je immers alles in kwijt; letters, getallen, getal-combinaties die een datum voorstellen zoals12-11-2015, enzovoorts. Toch is het verstandig om de velden dat type toe te wijzen dat het best past bij de gegevens die er later in komen te staan. Bij het invoeren en wijzigen van gegevens controleert je database engine, de software die de gegevens beheert, of de aangeboden gegevens wel van het juiste type zijn. Wanneer je bijvoorbeeld een veld van het type numeriek hebt, zal de database van je gebruiker niet het woord twee accepteren, maar alleen het getal 2. Ook zal in een veld van het type datum/tijd geen ongeldige datum kunnen worden ingevoerd. Zo helpt het kiezen van het juiste type dus te voorkomen dat verkeerde gegevens in je database terecht komen.

Het juiste gegevenstypeJe hebt bijvoorbeeld in Access een aantal typen ter beschikking. Bij andere databases zijn de typen vaak dezelfde, alleen heten ze soms anders. In Access zijn de volgende typen beschikbaar:Autonummering – dit type gebruik je voor sleutelvelden. Elk nieuwe record krijgt automatisch een uniek nummer toegewezen. Eenmaal toegewezen, maar inmiddels verwijderde nummers worden niet nogmaals uitgedeeld.Tekst – dit type gebruik je wanneer er letters in je invoer voorkomen. Dus allemaal letters of een combinatie van letters en andere symbolen. Je kunt records wel alfabetisch ordenen op de inhoud van een tekstveld, bij voorbeeld in een lijst, maar je kunt niet rekenen met de inhoud van een tekstveld. Er passen maximaal 255 symbolen in een tekstveld, maar je kunt ook instellen dat het veld kleiner is.Memo – dit type lijkt op het type tekst, maar er past veel meer tekst in het veld.Numeriek – in velden van dit type staan numerieke waarden; getallen dus. Je kunt met de inhoud van numerieke velden rekenen en je kunt ze ordenen, aflopend of oplopend. Je kunt de veldlengte van dit type nog nader instellen. De

Hoofdstuk 9 194

standaardinstelling is integer. Als je alleen gehele getallen wilt kies dan voor het gegevenstype integer. Gebruik je ook komma getallen, kies dan voor decimaal. Datum/tijd – in dit type sla je waarden op die data en/of tijd voorstellen. De datum/tijd wordt omgerekend naar een getal. Je kunt hier mee rekenen. Zo kun je bij voorbeeld het aantal dagen tussen twee datum/tijd waarden berekenen. Als je alleen met jaren rekent, kun je ook het type numeriek gebruiken. Reken je preciezer, gebruik dan datum/tijd.Valuta – dit type lijkt op numeriek, maar voegt aan het getal het valutasymbool dat het standaard valutasymbool van je besturingssysteem is toe.Ja/Nee – dit is een boolean type en kan alleen de waarden 0 en 1 bevatten. Dit type is erg geschikt voor velden waarin je bijhoudt of iets wel of niet zo is. Je kunt nog instellen hoe de waarde getoond wordt: als ja/nee, waar/onwaar of aan/uit. Achter de schermen maakt het niets uit; de waarde blijft altijd 0 of 1. OLE-object – dit type kan allerlei zaken bevatten, zoals gegevens die gemaakt zijn in andere programma’s, bij voorbeeld foto’s. Het nadeel van OLE-object velden is wel dat ze veel geheugenruimte in beslag nemen.Hyperlink – hierin kun je hyperlinks opslaan.

ValidatieregelWanneer je de velden in je database het meest passende veldtype geeft helpt dit dus al om een deel van de ongewenste invoer te voorkomen. Maar er kan meer. Stel je voor je wilt de gebruiker zijn of haar leeftijd laten invoeren. Dan is het wel zo handig dat de in toe voeren waarde tussen de nul en de 125 ligt. Ouder zal wel niemand worden. Je kunt dan een zogenaamde validatieregel toevoegen aan het desbetreffende veld in je database.

Je kunt even oefenen met een voorbeeld database.

1. Download als je dat nog niet gedaan hebt de database snelkoppeling-kopie.accdb die bij dit boek hoort en plaats deze in C:\Users\...\Documents\vb2015communitymetdatabases.

2. Open de database snelkoppeling-kopie.accdb door erop te dubbelklikken.3. Klik eventueel op Bewerken inschakelen.4. Dubbelklik op de tabel Personen.5. Klik op de knop Weergave linksboven in het scherm - Ontwerpweergave.6. Selecteer het veld Geboren.7. Klik onder aan het scherm in het vakje validatieregel.8. Klik op de drie puntjes naast het vakje.

Het scherm Opbouwfunctie voor expressies opent. Het bovenste gedeelte is het expressievak. Hierin komt het criterium waaraan alle waarden in het veld moeten voldoen. Eronder staan een aantal knoppen voor operators. Daaronder weer allerlei expressie elementen. Je kunt deze twee onderste onderdelen gebruiken om de expressies op te bouwen.

Hoofdstuk 9 195

1. Type de expressie >1900 And <2050 in.

2. Klik op OK.

Achter validatieregel is nu de expressie verschenen.

3. Klik linksboven in het scherm op de knop weergave. Je kunt dan de gegevens in de tabel personen zien. Kies eventueel bij “U moet deze tabel eerst opslaan” voor Ja en kies ook Ja wanneer er gevraagd wordt om de bestaande gegevens te testen met de nieuwe regels.

4. Verander bij een van de personen de waarde in het veld Geboren in 2060 en druk op de Entertoets.

De database engine merkt dat je probeert een ongeldige waarde in te voeren en komt met een passende mededeling.

5. Klik op de Esc knop op je toetsenbord om de oude waarde te herstellen.

Ook bij de ander typen velden kun je validatieregels gebruiken. Bij het type tekst, bij voorbeeld, kun je een aantal woorden invoeren die toegestaan zijn. Let op! De tekst moet tussen dubbele aanhalingstekens staan.

1. Schakel over naar de ontwerpweergave.2. Voeg bij het veld Oogkleur de validatieregel "Bruin" Or "Blauw" Or "Grijs"

Or "Groen" toe.3. Voeg de validatietekst Kies Bruin, Blauw, Grijs of Groen toe.

Hoofdstuk 9 196

4. Test de validatie uit door in het veld Oogkleur ergens een andere kleur in te voeren dan Bruin, Blauw, Grijs of Groen.

Je ziet dat bij foute invoer de validatietekst wordt getoond.

5. Test ook een met een van de toegestane kleuren, maar dan geschreven met allemaal kleine letters.

Je merkt dat de kleur dus ook met een kleine letter geschreven mag worden. Dat wil je natuurlijk niet. Dit kun je oplossen door een invoermasker toe te passen. Hoe dat werkt staat verderop in dit hoofdstuk.

Validatieoperatoren en jokertekensEr zijn nog andere handige operators:BETWEEN, waarbij je aangeeft tussen welke waarden de waarde van een veld moet liggen. Bij voorbeeld: BETWEEN 2000 AND 3000.LIKE, waarbij je voor een tekst- of memoveld aangeeft welk patroon de invoer moet hebben. Je kunt hierbij ook “jokersymbolen” gebruiken. * staat voor 1 of meer letters of getallen, ? staat voor 1 letter, # staat voor een getal. Bij voorbeeld: LIKE “??99##” staat voor een reeks van 6 symbolen: twee willekeurige letters of getallen, gevolgd door twee keer het cijfer 9, gevolgd door twee willekeurige getallen.

Ook bij datum/tijd velden kun je validatie toepassen. Let op! Datumconstanten, zoals 01-12-2009, moet in de expressie tussen hekjes staan. Dus bij voorbeeld > #01-12-2009#.

ValidatietekstDe validatietekst is de tekst die verschijnt wanneer je gebruiker de validatieregels overtreedt. Je kun, als je dat wilt, de validatietekst aanpassen door de gewenste tekst in de regel validatietekst in te voeren.

1. Voor bij een van de velden met een validatieregel een passende tekst in de regel validatietekst in.

2. Test wat er gebeurt als je opnieuw een ongeldige waarde in het veld invoert.

InvoermaskerEen ander hulpmiddel om ervoor te zorgen dat de juiste gegevens in de database terechtkomen is het invoermasker. Gegevens die aan de database worden aangeboden gaan eerst door een eventueel invoermasker, voordat ze worden getest op validiteit. Een invoermasker controleert niet het type van de aangeboden tekst en kijkt ook niet naar de inhoud. Dus het controleert ook niet of de aangeboden tekst van het juiste type is of de validatieregel overtreedt. Nee, een invoermasker controleert de vorm van de aangeboden gegevens. Dus of op de juiste positie de juiste symbolen staan; letters, getallen en ander symbolen. Met een goed ingesteld invoermasker kun je voorkomen dat gegevens met de verkeerde vorm worden aangeboden.

Je kunt een invoermasker instellen met behulp van onder andere de volgende symbolen:0 – er moet op deze positie één cijfer worden ingevoerd.

Hoofdstuk 9 197

9 – er mag op deze positie één cijfer worden ingevoerd.L – er moet op deze positie één letter worden ingevoerd.? – er mag op deze positie één letter worden ingevoerd.A – er moet op deze positie één letter of cijfer worden ingevoerd.a – er mag op deze positie één letter of cijfer worden ingevoerd.& – er moet op deze positie één teken of spatie worden ingevoerd.. - er moet op deze positie een punt als scheidingsteken van duizendtallen worden ingevoerd. < – alle hiernavolgende tekens moeten kleine letters zijn.> – alle hiernavolgende tekens moeten hoofdletters zijn.

Voorbeelden van invoermaskers:>L<?????????????? Eerste, verplichte letter moet een hoofdletter zijn, alle eventueel daarna volgende letters kleine letters. Goed is dus: Groen. <LL00000-9999 Eerste 2 verplichte letters moeten kleine letters zijn, dan 5 verplichte cijfers, dan een streepje en dan maximaal 4 cijfers. Goed is dus: pp12345-43.

Nog meer uitleg over invoermaskers vindt je op: https://support.office.com/nl-nl/article/Gegevensinvoerindelingen-bepalen-met-invoermaskers-e125997a-7791-49e5-8672-4a47832de8da.

1. Voeg het juiste invoermasker toe aan het veld Postcode en test het.

Gegevens vereistBij het bepalen van de properties van een tabel wordt soms te snel besloten dat er in een bepaald veld in elk record per se iets ingevuld moet worden. Dat kan soms tegen je werken. Het lijkt vanzelfsprekend dat je bij velden waarin voornaam en achternaam ingevuld moeten worden eist dat er iets in komt te staan. Iedereen heeft tenslotte een voor- en achternaam, toch. Niet dus. Er zijn gebieden in de wereld waar mensen maar 1 naam hebben. Verplicht je de gebruiker voor- en achternaam in te vullen, dan levert dat voor zo iemand een probleem op. Denk dus goed na voor je bij een veld bepaald dat er altijd iets ingevuld moet worden.

Tot zover validatie in de database.

Validatie in de interfaceDe tweede plaats waar je validatie kunt laten plaatsvinden is in de interface van je programma of webapplicatie. Als je hier goed valideert, voorkom je dat er verkeerde gegevens naar de database worden gestuurd en beperk je dus het aantal schermen met foutmeldingen.

Validatie in een Windows Forms app(licatie)De beste manier om te voorkomen dat de gebruiker van je programma verkeerde gegevens aanbiedt aan de database is om hem/haar duidelijk te maken welke gegevens precies ingevoerd moeten en mogen worden. Een goed hulpmiddel daarbij is de ToolTip.

Hoofdstuk 9 198

https://support.office.com/nl-nl/article/Gegevensinvoerindelingen-bepalen-met-invoermaskers-e125997a-7791-49e5-8672-4a47832de8da

https://support.office.com/nl-nl/article/Gegevensinvoerindelingen-bepalen-met-invoermaskers-e125997a-7791-49e5-8672-4a47832de8da

ToolTipEen tooltip is een klein stukje tekst dat verschijnt wanneer de gebruiker de cursor even boven een object houdt. Hierin kun je dan een aanwijzing voor de gebruiker tonen, bij voorbeeld “Gebruik alleen hoofdletters” of “Het in te vullen getal moet tussen de 10 en de 100 liggen.” of “Klik op deze knop om alle wijzigingen op te slaan.”

Je kunt voor vrijwel elk object op de interface een tooltiptekst instellen. Maar voor je dat kunt, moet je eerst een ToolTip object op je form zetten. Dit is voor het hele form geldig.

3. Maak een nieuwe Windows Forms Application genaamd validatie.4. Plaats een textbox op het form.5. Sleep een Tooltip object op je form.

Het Tooltip object verdwijnt van je form, maar verschijnt als ToolTip1 onder in beeld. Dit is zo omdat het een niet-zichtbaar object op je form is

6. Selecteer de textbox en stel de property Tooltip on Tooltip1 in op Dit is een tekstvak.

7. Start je project en houd de cursor even boven het tekstvak.

Je ziet dat de tooltip verschijnt.


Ingevoerde waarden controlerenJe kunt in de code bij verschillende events controleren of de invoer van een object wel correct is. Zo kun je bij een textbox controleren of er wel iets ingevuld is, en indien nodig toepasselijke tekst in een label zichtbaar maken. Of je kunt testen of een ingevoerd getal wel aan bepaalde criteria voldoet. De vraag is wanneer je dit test. Een goed moment is wanneer het object de input focus verliest, dus wanneer de gebruiker klaar is met het invoeren en een ander object de focus heeft gegeven. Dit is het LostFocus event. Of telkens wanneer de waarde van de property text van het object verandert. Dit is het event TextChanged.

1. Plaats een tweede textbox op het formulier.2. Plaats een label op het formulier.3. Verwijder in het propertyscherm de tekst van het label.4. Maak voor TextBox1 een LostFocus subroutine aan door in het codescherm

midden boven TextBox1 te kiezen en rechts daarnaast LostFocus.5. Pas de subroutine als volgt aan:

Private Sub TextBox1_LostFocus(sender As Object, e As EventArgs) Handles TextBox1.LostFocus If TextBox1.Text = "" Then Label1.Text = "U heeft nog niets ingevuld in het tekstvak Naam:" TextBox1.Focus() Else : Label1.Text = "" End If End Sub

Hoofdstuk 9 199

Zodra de textbox de focus verliest wordt gecontroleerd of er wel iets ingevuld is. Is dat niet het geval dan toont label1 de passende tekst en krijgt de eerste textbox weer de focus. Dit betekent trouwens wel dat je gebruiker de textbox pas kan verlaten wanneer iets is ingevuld. Dit kan heel irritant zijn, en wees dus voorzichtig met het gebruik van. Focus().

6. Start je project.7. Klik op het tweede tekstvak, zodat het eerste tekstvak de focus verliest.

Je ziet de tekst in het label zichtbaar worden en het eerste tekstvak krijgt weer de focus.

8. Vul iets in in het eerste tekstvak.9. Klik op het tweede tekstvak.

Je ziet dat de invoer nu wel geaccepteerd wordt.


Zo kun je ook de waarde van een ingevoerd getal testen, bij voorbeeld met:

If ((CInt(TextBox1.Text)) < 10) Or ((CInt(TextBox1.Text)) > 100) Then Label1.Text = "De waarde moet tussen de 10 en 100 liggen." TextBox1.Focus()Else : Label1.Text = ""End If

Hier test je of de waarde wel tussen de 10 en de 100 ligt.

Ook kun je de vorm van ingevoerde waarden aanpassen. Zo kun je bij voorbeeld de tekst helemaal naar hoofdletters of kleine letters omzetten. Dat gaat zo:

TextBox1.Text = TextBox1.Text.ToUpper()

Je hebt nu zelf validatieregels geschreven en aan een event gekoppeld, maar het kan ook door gebruik te maken van een MaskedTextBox. Dat is een tekstbox met een invoermasker. Het object werkt net zoals het invoermasker in Access: het laat alleen invoer toe met de juiste vorm.

1. Plaats een MaskedTextbox op het formulier.2. Klik in het Properties venster op de 3 puntjes naast Mask.

Een venster met een aantal (in de USA) veel gebruikte invoermaskers verschijnt. Je kunt er 1 kiezen, dan wordt in het vak naast Mask de bijbehorende code ingevoerd. Maar je kunt ook zelf in het vak naast Mask iets invullen.

3. Maak een invoermasker.

Hiervoor geldt dezelfde code als bij het invoermasker in Access.

4. Start je programma.

Hoofdstuk 9 200

5. Test het invoermasker.

Je merkt dat ongeldige invoer niet wordt geaccepteerd. Ook kan de gebruiker van je programma in het MaskedTextBox control zien welke vorm van invoer acceptabel is. Je doet de gebruiker trouwens vast een groot plezier door elke MaskedTextBox te voorzien van een ToolTip die duidelijk aangeeft welke invoer geldig is.

DateTimePicker en MonthCalenderWanneer je een gebruiker een datum wilt laten invoeren, gebruik dan een DateTimePicker of een MonthCalender object. Deze zorgen er namelijk voor dat de invoer geldig is, zowel wat betreft de vorm, als wat betreft de datum zelf. In een vorig hoofdstuk zijn deze twee objecten uitgebreid besproken.

Validatie in een webapplicatieIn een webapplicatie is het zo mogelijk nog belangrijker om ervoor te zorgen dat de aangeboden gegevens juist zijn. De gegevens worden immers via het internet teruggestuurd naar de webserver en dan gecontroleerd door de database engine. Als er iets mis is moet er weer een pagina naar de browser van de gebruiker worden teruggestuurd om een foutmelding te geven. Dat kost allemaal veel te veel tijd. Dus laat je de webpagina al in de browser van de gebruiker controleren of alles in orde is. VB heeft daarvoor een aantal speciale objecten, zogenaamde validatiebesturingselementen. Voorwaarde voor het gebruik van die objecten is wel dat de browser van de gebruiker JavaScript en DHTML ondersteunt. In principe doen alle moderne browsers dat. Alleen wanneer een gebruiker zijn beveiliging zo streng heeft staan dat JavaScript niet toegestaan is, kun je deze objecten niet gebruiken. In de praktijk zal dat niet zo gauw voorkomen omdat veel pagina’s met JavaScript werken.

ValidatiebesturingselementenEen validatiebesturingselement werkt op dezelfde manier als de LostFocus event controlecode voor een Windows app die je hiervoor hebt gezien. Zodra het object waar iets is ingevoerd of gekozen de focus verliest, controleert het validatiebesturingselement of de invoer wel voldoet aan de criteria die je hebt ingesteld. Als de gegevens niet juist zijn geeft het validatiebesturingselement een foutmelding. Een validatiebesturingselement is een soort label dat onzichtbaar blijft totdat het een foutmelding toont. Wanneer de gegevens verbeterd zijn en het object waar het bij hoort de focus niet meer heeft, verdwijnt de eventuele foutmelding. Er zijn 5 validatiebesturingselementen:RequiredFieldValidator – Controleert of er in een veld wel iets is ingevoerd. Je gebuikt dit object voor velden waarbij invoer verplicht is.CompareValidator – Vergelijkt de ingevoerde waarde met een opgegeven minimale waarde of met de waarde in een ander object. Je gebruikt dit object als je de ingevoerde waarde wilt vergelijken met een woord of getal dat je van tevoren instelt. Ook kun je dit element gebruiken als je de ingevoerde waarden van twee objecten met elkaar wilt vergelijken, bij voorbeeld wanneer je een gebruiker twee keer een nieuw wachtwoord laat invoeren en je wilt vergelijken of deze twee waarden wel gelijk zijn.

Hoofdstuk 9 201

RangeValidator – Controleert of de ingevoerde waarde tussen bepaalde grenzen ligt.RegularExpressionValidator – Vergelijkt net als de validatieregel die je eerder hebt gezien of de ingevoerde waarde overeenkomt met een standaard patroon.CustomValidator – Vergelijkt of de ingevoerde waarde overeenkomt met een door je zelf ingestelde patroon.

Wil je de waarde van een object op meerdere criteria controleren, dan koppel je gewoon meerdere validatiebesturingselementen aan het object.

Van een validatiebesturingselement moet je een aantal dingen instellen. In de eerste plaats bij welk object het hoort. Dit gaat via de property ControlToValidate. Dan de foutmelding. Die stel je in bij ErrorMessage. En dan natuurlijk het criterium. Dit stel je in bij de property ValueToCompare, of als je de controlewaarde niet zelf opgeeft, maar uit een ander object haalt, bij de property ControlToCompare.

1. Maak een nieuwe lege ASP.NET Web Application (New - Project – Visual Basic – Web – ASP.NET Web Application – Empty) genaamd websitevalidatie.

2. Voeg een nieuw web form toe (Project – Add New Item – Web Form - Add).3. Plaats 5 labels en 5 tekstvakken op het scherm, ongeveer zoals hieronder.4. Pas de tekst van de labels aan, zoals hieronder.

Je wilt testen of er in het eerste tekstvak wel iets ingevuld is.

1. Sleep uit de toolbox, uit het gedeelte Validation een RequiredFieldValidator object rechts naast de textbox achter het label naam.

2. Kies bij de property ControlToValidate het object Textbox1.3. Vul bij de property ErrorMessage in Vul uw voornaam in a.u.b.

Met de RequiredFieldValidator is iets bijzonders aan de hand. Anders dan de meeste andere validatiebesturingselementen controleert deze validator niet wanneer de gebruiker naar een ander object gaat, maar pas wanneer de gegevens opgestuurd gaan worden naar de webserver. Je ziet dus nog geen foutmelding wanneer je gebruiker het veld verlaat zonder iets in te vullen. De foutmelding verschijnt pas wanneer de gebruiker op een knop klikt. Om de validator te kunnen testen heb je dus een knop nodig.

4. Plaats een knop op het form.

Je hoeft nog geen subroutine voor het click event voor de knop te maken. Het werkt ook zonder.

Hoofdstuk 9 202


1. Klik op OK.2. Vul niets in in textbox1.3. Klik op de knop.

De foutmelding verschijnt.

4. Sluit de pagina.

Hoofdstuk 9 203

Als je een de foutmelding krijgt dat er iets met JQuery niet in orde is, komt dit doordat vanaf versie 4.5 van .NET iets veranderd is. Hopelijk wordt dit binnenkort door Microsoft aangepast. De eenvoudigste oplossing voor dit probleem is een paar regels code toe te voegen aan het web.config bestand van je project.

1. Voeg de regels

<appSettings> <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" /> </appSettings>

toe onder in het web.config bestand. Het ziet er dan uit als hieronder.

<?xml version="1.0" encoding="utf-8"?><configuration> <system.web> <compilation debug="true" strict="false" explicit="true" targetFramework="4.5.2"/> <httpRuntime targetFramework="4.5.2"/> </system.web> <system.codedom> <compilers> <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/> <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\"Web\" /optionInfer+"/> </compilers> </system.codedom> <appSettings> <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" /> </appSettings>

</configuration>

Je kunt een RequiredFieldValidator combineren met een van de volgende objecten om zowel te controleren óf er iets ingevuld wordt, als dat er een geldige waarde wordt ingevuld.

Hoofdstuk 9 204

Wanneer je invoer wilt vergelijken met een waarde gebruik je de CompareValidator. Deze vergelijkt de invoer van het gekoppelde object met een opgegeven waarde of met de waarde van een ander object. Zo vergelijk je hieronder of het in textbox5 ingevoerde wachtwoord wel hetzelfde is als het in textbox4 ingevoerde wachtwoord.

1. Sleep een CompareValidator object naast textbox5.2. Stel de property ControlToValidate in op textbox5.3. Stel de property ControlToCompare in op textbox4.4. Stel de property ErrorMessage in op De ingevoerde wachtwoorden komen

niet overeen.5. Start je project.6. Vul in tekstvakken 4 en 5 verschillende wachtwoorden in.7. Geef een ander object de focus.

Je ziet de foutmelding verschijnen.

8. Vul twee keer hetzelfde wachtwoord in.9. Geef een ander object de focus.

De foutmelding verdwijnt.

10.Sluit de pagina.

Als je wilt, kun je de Textmode van tekstvakken 4 en 5 nog op Password zetten om de ingevoerde letters niet te tonen.

Wil je de waarde van bij voorbeeld textbox5 niet vergelijken met een waarde in een ander object, maar met een vaste waarde, laat dan de property ControlToCompare leeg, maar gebruik ValueToCompare. Je kunt dan de waarde instellen waarmee vergeleken moet worden opgeven. Je moet per se bij de property Type het type van de te vergelijken waarden goed instellen. Als je twee strings met elkaar vergelijkt, kies dan voor het type string. Vergelijk je twee hele getallen, kies dan voor Integer. Wanneer je getallen gaat behandelen als strings kun je vreemde resultaten krijgen. De string 19 is bij voorbeeld kleiner dan de string 2. Bij Operator stel je in hoe je de waarden wilt vergelijken. En bij ValueToCompare stel je de waarde in waarmee je wilt vergelijken.

1. Pas bij de CompareValidator naast textbox5 de properties als volgt aan:Type – IntegerOperator – EqualValueToCompare – 12Zorg ervoor dat de waarde ControlToCompare leeg is!

2. Geef ook de property ErrorMessage een passende tekst.3. Start je project.4. Vul in textbox5 een andere waarde dan 12 in.5. Geef een ander object de focus.

De foutmelding verschijnt.

6. Vul in textbox5 de waarde 12 in.

Hoofdstuk 9 205

7. Geef een ander object de focus.


8. Sluit de pagina.

Bij de Operator kun je ook kiezen voor DataTypeCheck. Als je hiervoor kiest wordt gecontroleerd of de waarde van het te controleren object wel van hetzelfde type is als je bij Type hebt aangegeven. Zo kun je bijvoorbeeld laten controleren of het wel een geldig datum/tijd gegeven is.

In tekstvak 2 vult je gebruiker zijn of haar leeftijd in. Deze moet tussen de 0 en, laten we zeggen 120 liggen. Om dit te testen gebruik je een RangeValidator.

1. Plaats een RangeValidator naast textbox2.2. Vul bij ErrorMessage in Zo oud of jong is niemand.3. Stel de property ControlToValidate op Textbox2.4. Stel bij MinimumValue de waarde in op 0 en de MaximumValue op 120.5. Stel de property Type in op Integer.6. Start je project.7. Vul een waarde lager dan 0 of hoger dan 120 in.8. Geef een ander object de focus.


9. Vul een geldige waarde in.10.Geef een ander object de focus.


11.Sluit de pagina.

Een RegularExpressionValidator en CustomValidator controleren of het patroon van de ingevoerde waarde overeenkomt met een patroon. Het opgeven van zo’n patroon is vrij ingewikkeld. Daarom heeft de RegularExpressionValidator een aantal veelgebruikte patronen waar je uit kunt kiezen.

1. Sleep een RegularExpressionValidator naast textbox3.2. Vul bij ErrorMessage in Geen geldig emailadres.3. Stel de property ControlToValidate op Textbox3.4. Stel ValidationExpression in op Internet E-mail Address.5. Start je project.6. Vul in textbox3 iets anders in dan een geldig email adres. Dus bij voorbeeld:

janjansen.hotmail.com.7. Geef een ander object de focus.


8. Vul een geldige email adres in. Dus bij voorbeeld: [email protected]. Geef een ander object de focus.

Hoofdstuk 9 206


10.Sluit je pagina.

Validering uitschakelen voor sommige knoppenSoms gebruik je een knop "Annuleren" of "Cancel" op je pagina. Als je op deze knop drukt wordt er normaal gezien ook validering toegepast. Maar dat betekent dat je het formulier eerst correct moet invullen voor je op "Annuleren" kan drukken!Om dit probleem op te lossen heeft elke knop ook een property "CausesValidation", die standaard op "True" ingesteld staat. Als je deze op "False" zet voor de "Cancel"-knop, dan wordt er voor die knop geen validering uitgevoerd.

Dit is het einde van het hoofdstuk over validatie. Het toevoegen van goede validatie aan je project is misschien niet het meest spectaculaire onderdeel van het bouwen van je project, maar denkt eraan: goede validatie van je project bespaart jezelf en je gebruikers veel frustratie.

Hoofdstuk 9 207

Hoofdstuk 10 Visual Studio met andere databasesInleidingTot nu toe heb je in dit boek alleen gewerkt met Microsoft Access .accdb databases en de bijbehorende ACE-database engine. Visual Studio gebruikt zelf standaard een andere database genaamd SQL Server database die veel lijkt op een Access database. SQL spreek je uit als ‘siekwel’. Je kunt SQL Server databases in Visual Studio zowel in Windows programma’s als in webapplicaties gebruiken. Omdat het een heel karwei is om SQL Server op je computer te installeren en te tunen zullen we in dit boek niet op ingaan op dit soort databases. Wel ga je wel werken met een andere bekende database genaamd MySQL. MYSQL-databases zijn erg populair onder programmeurs die webpagina’s maken met HTML en PHP. En we gaan in dit hoofdstuk we ook aan de slag met ODBC; Open DataBase Connectivity.

Visual Studio met MYSQL

WaarschuwingIn een eerder hoofdstuk heb je leren werken met de Internet Information Service (IIS) als webserver voor je webapplicaties. In het volgende deel van dit hoofdstuk gebruik je als webserver het programma APACHE. Deze twee webservers kunnen niet tegelijkertijd draaien.Het onderstaand gedeelte van dit boek is dan ook slechts bedoeld voor mensen die zelf in staat zijn op hun computer webservices aan- en uit te schakelen.

VoorbereidingIn bijlage 1 wordt beschreven hoe je bij dit deel van het boek benodigde software download en installeert. De ontwikkelingen gaan soms dermate snel dat er in de bijlage misschien niet naar de meest recente software wordt verwezen, maar in wezen maakt dat niet veel uit.

Voor je de volgende opdrachten kunt uitvoeren, moet de benodigde software zijn geïnstalleerd en ingeschakeld.

1 Ga naar bijlage 1 achterin dit boek en installeer de benodigde software.

2 Start in de map c:\XAMPP het control panel en start zowel Apache als MySQL.

Je krijgt een foutmelding wanneer je op je computer IIS hebt ingesteld als webserver. IIS gebruikt poort 80 en omdat XAMPP ook gebruik wil maken van poort 80 zal er een conflict ontstaan. De oplossing is dan dat je IIS uitzet. Dat gaat als volgt.

3 Kies configuratiescherm - system - Apps & features.4 Scroll helemaal naar beneden en kies Programs and Features.5 Selecteer Turn Windows features on or off en verwijder de vinkjes voor

Internet Information Services en voor Internet Information Services Hostable Web Core.

Hoofdstuk 10 208

Als alles goed is gegaan ziet het Controlpanel van de XAMPP er als volgt uit:

phpMyAdminAnders dan Microsoft Access databases hebben MYSQL-databases geen ingebouwde editor om de databases mee te bewerken. In plaats daarvan werkt je met phpMyAdmin. Dit is een verzameling webpagina’s gemaakt om MYSQL-databases mee te maken en onderhouden. In de bijlage over het installeren van de software bij dit hoofdstuk vind je uitleg over hoe je phpMyAdmin op je computer installeert.

Je kunt controleren of phpMyAdmin op je machine aanwezig is door de startpagina van de editor via je browser aan te roepen.

1. Type in je browser in: http://localhost/phpmyadmin/index.php.

Hoofdstuk 10 209

Als phpMyAdmin juist is geïnstalleerd verschijn het volgende scherm:

Mogelijk komt het scherm van jouw versie van phpMyAdmin niet helemaal overeen met de afbeelding hierboven. Dit is geen probleem. Andere versies van phpMyAdmin werken evengoed. Ook is het mogelijk dat er in jouw phpMyAdmin een foutmelding staat over de beveiliging. Dit is zo wanneer je nog geen wachtwoord voor phpMyAdmin hebt ingesteld. Ook dit is geen probleem. Wil je de foutmelding per se kwijt, kijk dan in de bijlage over het installeren van de software bij dit hoofdstuk voor verdere informatie over het installeren van phpMyAdmin.

Een MYSQL-database makenJe gaat nu een nieuwe MYSQL-database maken. In die database genaamd keuzepakket zit maar 1 tabel, genaamd leerlingen.

1. Type linksboven Nieuw en vul in het volgende scherm bij databasenaam de naam van de database: keuzepakket.

2. Klik op de knop Aanmaken.

Een tabel in een MYSQL-database maken

1. Je ziet linksboven dat de database keuzepakket is aangemaakt, klik op de database.

2. Type in het volgende scherm in het tekstvak onder Tabel aanmaken in het tekstvak Naam de naam van de tabel: leerlingen.

3. Vul bij Aantal kolommen 3 in.4. Klik op de knop Starten.

Vul de volgende gegevens in:

Hoofdstuk 10 210

Het type INT staat voor integer. VARCHAR is de MYSQL-versie van string.

5. Kies tenslotte bij het veld id onder Index de optie PRIMARY. Klik op de knop Opslaan.

De tabel nawgegevens wordt aangemaakt. Je ziet in het volgende scherm linksonder phpmyadmin staan.

Records in een MYSQL database tabel maken1. Selecteer links op je scherm in de combobox Databases de nieuwe database

keuzepakket.

Onder combobox verschijnt nu de naam van de database; keuzepakket, en de naam van de enige tabel in deze database; nawgegevens.

Hoofdstuk 10 211

2. Klik op leerlingen.3. Klik op de tab Invoegen boven in het scherm.

In het volgende scherm kun je nieuwe records voorzien van waarden.

4. Vul het volgende scherm als volgt in:

5. Druk op Starten en weer op Invoegen voeg nog 2 records met de volgende waarden toe.

id naam profiel3 Klaas NT4 Nelleke NT

6. Kies op Starten om ook deze twee records op te slaan.7. Klik op Verkennen

Je ziet de tabel met de vier records.

Hoofdstuk 10 212

Je database bevat een tabel met 4 records en is klaar voor gebruik.

8. Sluit phpMyAdmin.

Een ODBC-database benaderen met of zonder DSN-bestandJe kunt via ODBC op twee manieren een database benaderen: met of zonder Data Source Name (DSN) bestand. In dit hoofdstuk gebruik je wel een DSN-bestand. Deze manier is weliswaar heel iets langzamer, maar veel veiliger en vooral veel makkelijker wanneer je de database later verplaatst. Om je toch te laten zien hoe een zogenaamde DSN-loze verbinding tot stand komt, staat er als voorbeeld een verbindingsstring voor een DSN-loze verbinding in een voetnoot iets verderop in dit hoofdstuk op de pagina waar de verbindingsstring voor een MYSQL-database wordt uitgelegd.

Een DSN-bestand makenOm een MYSQL-database te kunnen benaderen heb je een zogenaamd Data Source Name, ofwel DSN-bestand nodig. Dit is een bestand dat informatie bevat over de locatie, de naam en het type van een database. Het DSN-bestand bevat ook informatie over de driver, ofwel Provider die bij de database hoort. Voor een MYSQL-database is dat de zogenaamde MySQL ODBC 5.3 Driver. Deze moet op je machine staan geïnstalleerd. In de bijlage over software installatie staat uitgelegd hoe je deze kunt installeren. Het aanmaken van een DSN-bestand voor de MYSQL database keuzepakket gaat als volgt:

1. Kies Start - Configuratiescherm.2. Type rechtsboven bij Find a setting ODBC in.3. Klik op Set up ODBC-datasources (gegevensbronbeheer):

Hoofdstuk 10 213

4. Klik op het tabblad USER DSN op de knop ADD...

5. Klik in het scherm Nieuwe gegevensbron maken op MySQL ODBC 5.3 ANSI Driver.

Zie je die er niet bij staan, dan is deze driver nog niet op je machine geïnstalleerd. Kijk dan in de bijlage over het installeren van de software voor uitleg.

6. Klik op Finish.7. Vul bij Data Source Name in MYSQLKeuzepakket.

Je hoeft bij server niets in te vullen. De standaardwaarde hier is localhost. En dat is nu juist de naam van je lokale webserver. Werkt de verbinding niet goed, vul hier dan localhost in. Heb je je server een andere naam gegeven, vul dan hier die andere naam van de webserver in. Bij problemen kun je ook 127.0.0.1 invullen. Dit is het lokale IP-adres van je server.

8. Vul bij user de gebruikersnaam root in.

Root is de standaard gebruikersnaam voor MYSQL. Als je voor jouw machine de gebruikersnaam voor toegang tot MYSQL hebt veranderd, vul dan de juiste gebruikersnaam in. Heb je helemaal geen gebruikersnaam voor MYSQL ingevuld, laat het vakje user dan leeg. Uitleg over het instellen van gebruikersnaam en wachtwoord vind je in de bijlage over het installeren van de software.

9. Vul bij password niets in.

Standaard is het wachtwoord voor MYSQL leeg. Heb je wel ooit een wachtwoord voor MYSQL ingesteld, vul dan bij Password het juiste wachtwoord in.

Hoofdstuk 10 214

10.Kies bij database de database keuzepakket.

11.Klik op de knop Test.

Als de verbinding goed is ingesteld, verschijnt er een mededeling dat de verbinding is gemaakt. Als dit niet zo is, moet je eerst de instellingen aanpassen zodat het wel werkt. Kijk bij problemen in de bijlage over de installatie van de software.

12.Klik nu op OK.

Op het tabblad gebruikers-DSN staat nu in het rijtje met DSN-bestanden ook MYSQLKeuzepakket met als stuurprogramma MySQL ODBC 5.3 Driver.Deze gebruikersgegevensbron ga je gebruiken.

13.Klik op OK om het scherm te sluiten.

Verbinding maken met een MySQL database en gegevens selecterenNa deze voorbereidingen kun je nu aan de slag met VB.NET.

1. Maak in Visual Studio een nieuw Windows Application Project genaamd MYSQLkeuzepakket.

2. Plaats een knop en een tekstvak op het formulier.3. Noem de knop btnToonGegevens en verander de tekst van de knop in Toon

MYSQL.4. Noem het tekstvak txtToonSQL.5. Zet bij het tekstvak txtToonSQL de eigenschap Text op leeg en Multiline op

True.

Hoofdstuk 10 215

6. Plaats de volgende code helemaal bovenaan in de code:

Imports System.DataImports System.Data.Odbc

7. Genereer de subroutine btnToonGegevens_Click.8. Pas de subroutine als volgt aan:

Private Sub btnToonGegevens_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnToonGegevens.Click Dim verbinding = New OdbcConnection("DSN=MYSQLKeuzepakket") Dim Query As String = "SELECT * FROM leerlingen" Dim myCommand As New OdbcCommand(Query, verbinding) verbinding.Open() Dim lezer As OdbcDataReader = myCommand.ExecuteReader() Dim tekstzin, teksttotaal As String While lezer.Read() tekstzin = (lezer.GetInt32(0).ToString() + ", " + lezer.GetString(1) + ", " + lezer.GetString(2)) & vbCrLf teksttotaal = teksttotaal + tekstzin End While txtToonSQL.Text = teksttotaal lezer.Close() verbinding.Close() End Sub

9. Start je project en klik op de knop Toon MYSQL.

Het resultaat ziet er als volgt uit:


Hoofdstuk 10 216

De code werkt als volgt: Je maakt eerst een object aan van het type OdbcConnection. Tussen haakjes geef je de naam van de Data Name Source (DSN) aan. In dit voorbeeld is dat “DSN=MYSQLKeuzepakket”.4

Dim verbinding = New OdbcConnection("DSN=MYSQLKeuzepakket")

Dan dimensioneer je de query en stel je hem ook gelijk in.

Dim Query As String = "SELECT * FROM leerlingen"

Daarna dimensioneer je een odbc commando genaamd myCommand, en ook dat stel je gelijk in met de naam van de query en de verbinding tussen haakjes.

Dim myCommand As New OdbcCommand(Query, verbinding)

Vervolgens open je de verbinding. verbinding.Open()

Je dimensioneert een OdbcDataReader genaamd lezer voor de gegevens en deze vul je gelijk met gegevens door het commando myCommand uit te voeren.

Dim lezer As OdbcDataReader = myCommand.ExecuteReader()

Nu zitten de gegevens in de odbcDataReader genaamd lezer.

Je gaat vervolgens, zolang er regels in de odbcDataReader zitten, de drie gegevens van elke regel (record) in de odbcDataReader samenvoegen tot een zin volgens het stramien id, komma, naam, komma, profiel, vbCrLf. vbCrLf zorgt ervoor dat de volgende tekst op een nieuwe regel wordt gezet. Voor het ophalen van de inhoud van de odbcDataReader gebruik je GetInt32(). Deze methode van de lezer haalt de inhoud op van de kolom waarvan het nummer tussen haakjes staat. GetInt32(0) haalt dus de inhoud op van de kolom met het nummer 0. Dit is de eerste kolom. Deze inhoud zet je vervolgens met .ToString om naar een string. Dit doe je omdat de gegevens in een stringvariabele geplaatst worden. De samengestelde zin plaats je in een stringvariabele genaamd tekstzin. Deze nieuwe zin voeg je toe aan de al aanwezige zinnen in een stringvariabele genaamd teksttotaal.

Je dimensioneert de stringvariabelen tekstzin en teksttotaal.

Dim tekstzin, teksttotaal As String While lezer.Read() tekstzin = (lezer.GetInt32(0).ToString() + ", " + lezer.GetString(1) + ", " + lezer.GetString(2)) & vbCrLf

4 Een DSN-loze verbinding voor een MYSQL database genaamd keuzepakket met als gebruikersnaam root en wachtwoord beer zou er als volgt kunnen uitzien:Dim verbindingsstring As String = " Driver={MySQL ODBC 5.3 Driver};" & _"SERVER=localhost;" & _"DATABASE=keuzepakket;" & _"UID=root;" & _"PASSWORD=beer;" & _"OPTION=3;"Dim verbinding = New OdbcConnection(verbindingsstring)

Hoofdstuk 10 217

teksttotaal = teksttotaal + tekstzin End While

Dan plaats je de inhoud van teksttotaal in tekstvak txtToonMYSQL.

txtToonMYSQL.Text = teksttotaal

Tenslotte sluit je de lezer en de verbinding.

lezer.Close() verbinding.Close()

Een record toevoegen aan een MYSQL-databaseJe hebt zonet gegevens geselecteerd uit een MYSQL-database. Maar je kunt natuurlijk ook, net als in een Access database, records toevoegen, gegevens wijzigen en records verwijderen. Dat gaat met een MYSQL-database eigenlijk op een vergelijkbare manier als met een Access database. Dit heb je al in een eerder hoofdstuk geleerd. Om je een beetje op weg te helpen toch nog een voorbeeld waarin een record wordt toegevoegd.

1. Plaats een knop genaamd btnVoegToe naar het formulier. 2. Stel de tekst van de knop in op Voeg Toe.3. Genereer een click subroutine en plaats de volgende code onder de knop:

Private Sub btnVoegToe_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVoegToe.Click Dim verbinding = New OdbcConnection("DSN=MYSQLKeuzepakket") Dim Query As String = "INSERT INTO leerlingen VALUES(10,'René','NT')" Dim myCommand As New OdbcCommand(Query, verbinding) verbinding.Open() myCommand.ExecuteNonQuery() verbinding.Close() End Sub

1. Start je project.2. Klik op de knop Toon MYSQL.

Je ziet de records in de database.

3. Klik op Voeg toe.4. Klik weer op de knop Toon MySQL.

Je ziet dat er een record is toegevoegd. Je kunt dit met de gegevens in de code natuurlijk maar 1 keer doen omdat het veld id een sleutelveld. In de praktijk zet je de toe te voegen gegevens natuurlijk ook niet in de code, maar lees je die uit bij voorbeeld tekstvakken. Hoe dat gaat heb je al in een eerder hoofdstuk geleerd.


Een record verwijderen uit een MYSQL-databaseEn als laatste nog een voorbeeld van het verwijderen van een record.

Hoofdstuk 10 218

1. Plaats een knop genaamd btnVerwijder op je formulier. 2. Stel de tekst van de knop in op Verwijder.3. Genereer een click subroutine en plaats de volgende code onder de knop:

Private Sub btnVerwijder_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVerwijder.Click Dim verbinding = New OdbcConnection("DSN=MYSQLKeuzepakket") Dim Query As String = "DELETE FROM leerlingen WHERE id=10" Dim myCommand As New OdbcCommand(Query, verbinding) verbinding.Open() myCommand.ExecuteNonQuery() verbinding.Close() End Sub

Let op! als je twee keer op verwijder druk krijg je een foutmelding, dat gebeurt ook als je tweemaal op voeg toe drukt.

1. Start je programma2. Klik op Toon.3. Klik op Voeg toe.4. Vul de gegevens van een record in.5. Klik weer op Toon.6. Selecteer een record.7. Klik op Verwijder.8. Klik weer op Toon.

Ook hier geldt natuurlijk weer dat je dit verwijderen maar 1 keer kunt doen. Daarna is er immers geen record met id nummer 10 meer.

De code voor het bijwerken van gegevens in een MYSQL-database is met opzet niet toegevoegd. Zoek de code voor het bijwerken van een Access database maar eens op en pas die aan voor een MYSQL-database. Succes.

Hoofdstuk 10 219

Hoofdstuk 11 Een setup voor een Windows programma maken

Wanneer je een Windows programma hebt gemaakt wil je daar natuurlijk ook een setup programma bij hebben. Met zo’n setup programma kun je het programma (laten) installeren op andere computers. In dit boek werk je met Visual Basic 2015 Community. Deze versie is gratis, maar dat betekent wel dat ze minder mogelijkheden heeft dan de professionele versies. In die versies heb je de beschikking over een apart setup programma genaamd InstallShield. Maar in de gratis versies is dit programma niet beschikbaar. Toch heeft de Community versie de mogelijkheid om een setup programma op maat te maken, en die ga je in dit hoofdstuk bekijken.

VoorbereidingOm een setup project te kunnen maken moet je eerst iets toevoegen aan de Community versie, namelijk de Microsoft VS installer projects. Je vindt deze software op: https://visualstudiogallery.msdn.microsoft.com/f1cc3f3e-c300-40a7-8797-c509fb8933b9.

1. Download en installeer de installer projects via bovenstaande link.

In het volgende voorbeeld maak je een setup programma voor een project. Dit project is project4 uit hoofdstuk 6. Als je dit project hebt gemaakt kun je het gebruiken. Maar er zit ook een kopie van dit project bij de bestanden die bij dit boek horen. Je gaat nu eerst dit project klaarzetten in de map C:\Users\...\Documents\Visual Studio 2015\Projects. Dit is de map waarin je standaard je projecten bewaard. Project4 is onderdeel van de solution project4. Immers, elk project zit verpakt in een solution.

2. Als de solution project4 zich niet bevindt in de map C:\Users\...\Documents\Visual Studio 2015\Projects, kopieer dan het dan met de verkenner van de map C:\Users\...\Documents\vb2015communitymetdatabases naar de map C:\Users\...\Documents\Visual Studio 2015\Projects.

Zoals gezegd bevat de solution project4 een map met daarin het project project4. Dit project bevat alle benodigde bestanden, inclusief een database en de fotobestanden die aan de map Resources zijn toegevoegd.

3. Kijk in de map C:\Users\...\Documents\Visual Studio 2015\Projects \setupproject\Resources.

Je ziet daar de bestanden fotodatabase.accdb, fotojan.jpg, fotopiet.jpg en fotoklaas.jpg die bij dit project horen.

De map Resources wordt gekopieerdZodra je het project ‘runt’ (debugt), worden de bestanden in deze map Resources gekopieerd naar de map Resources in de map bin/Debug/Resources. Dit is nodig omdat tijdens het debuggen er een .exe bestand van je project wordt gemaakt. Dit

Hoofdstuk 11 220

https://visualstudiogallery.msdn.microsoft.com/f1cc3f3e-c300-40a7-8797-c509fb8933b9

https://visualstudiogallery.msdn.microsoft.com/f1cc3f3e-c300-40a7-8797-c509fb8933b9

bestand wordt geplaatst in de map bin/Debug. Vanuit deze map wordt het debuggen gestart. Dus wanneer je aan het debuggen bent, is dat de actieve/huidige map. De map Resources hoort 1 niveau lager te staan. Om problemen te voorkomen wordt er in bin/Debug een kopie gemaakt van de map Resources van je project. Later, wanneer de setup voor je project wordt gegenereerd, wordt er opnieuw een kopie van Resources gemaakt. Deze map Resources wordt toegevoegd aan je setup bestanden.Om dit allemaal goed te laten verlopen heb je bij de bestanden die in de map Resources staan de eigenschap Build Action op Content en de eigenschap Copy to Output op Always gezet.

4. Start Visual Basic, laad het project project4 en test of het programma goed werkt.

Als het programma goed werkt kun je beginnen met het maken van de setup.

Je programma klaarmaken voor de setup

De bronbestanden klaarmaken voor de setupOm een programma op een andere computer te laten werken heb je niet alle bestanden van je project nodig. Je hebt het .exe bestand en soms nog enkele andere bestanden nodig. Programma’s hebben soms ook bronbestanden (resources). Dit kunnen databases, afbeeldingen, geluidsbestanden e.d. zijn. In project4 zijn dat de database en de fotobestanden.

Controleer voor je een setup maakt altijd of alle bronbestanden in de map Resources staan en de eigenschappen Build Action en Copy to Output goed staan ingesteld.

1. Selecteer in de Solution Explorer in de map Resources het bestand fotodatabase.accdb.

2. Zorg ervoor dat in het tabblad Properties de eigenschap Build Action ingesteld staat op Content.

3. Zorg ervoor dat de eigenschap Copy to Output ingesteld staat op Copy Always.

4. Zorg ervoor dat eigenschappen ook zo staan ingesteld bij alle andere bestanden in de map Resources.

De connection string(s) aanpassenJe programma draait keurig op je eigen computer. Je programma kan de database en de andere bronbestanden vinden. Deze staan in de map Resources van je project. Om ervoor te zorgen dat het programma straks op de computer van de gebruiker deze map kan vinden moet je ervoor zorgen dat de connection strings goed zijn.

Connectionstrings(s) in app.config aanpassenIn sommige projecten staan er 1 of meer connection strings in het app.config bestand. Je moet ervoor zorgen dat de connection strings allemaal verwijzen naar de Resources map. Controleer dus álle connection strings in je project, ook die in app.config, en pas ze waar nodig aan.

Hoofdstuk 11 221

Soms ziet een connection string die naar de map Resources verwijst er als volgt uit:

connectionString="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\Resources\fotodatabase.accdb;Persist Security Info=True"

Deze verwijst naar de map Resources in de map |DataDirectory|. Dit lijkt correct, maar helaas werkt dit op de computer van de gebruiker soms niet goed. Je moet deze string dan ook iets aanpassen.

De connectionString wordt dan:

connectionString="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;Persist Security Info=True"

De punt staat voor de map van waaruit je programma wordt gestart. En zowel op jouw computer, als straks op de computer van de gebruiker staat de map Resources in die map. In project4 is de connection string al goed. Je hoeft dus niets te doen.

1. Test je project.

Verwijzingen in de code aanpassenIn een project kunnen ook in de code verwijzingen naar een bronbestand staan. Dit kunnen connection strings zijn, of verwijzingen naar een afbeeldingbestand of een geluidsbestand. Ook deze verwijzingen moet je even controleren en indien nodig aanpassen.

1. Kijk in de code van het project.

Je ziet daar een variabele gedeclareerd:

Dim strVerbindingsString2 As String = "Provider = Microsoft.ACE.OLEDB.12.0;Data Source=.\Resources\fotodatabase.accdb;"

Deze code is al goed: de verwijzing naar de map Resources in de huidige map wordt aangegeven met een punt. Je hoeft hier niets te wijzigen.

In de code staat nog een verwijzing naar een bestand:

PictureBox1.Image = Image.FromFile(".\Resources\" & txtNaamFoto.Text)

Ook deze verwijzing is al goed. Loop in alle projecten waarvan je een setup wilt maken ALTIJD ALLE code langs en pas waar nodig de verwijzing aan.

Verwijzingen in het tabblad Properties aanpassenDenk eraan dat er soms ook verwijzingen naar bronbestanden in het tabblad Properties staan, bij voorbeeld wanneer je aan een picturebox een bron hebt toegewezen. Ook zulke verwijzingen moet je altijd controleren voor je een setup maakt. In project4 staat niet zo’n verwijzing naar een bestand.

Hoofdstuk 11 222

Verbindingsstrings met My.Computer.Filesystem.CurrentDirectorySoms zie je een andere verwijzing:

PictureBox1.Image = Image.FromFile(My.Computer.FileSystem.CurrentDirectory.ToString() & "\Resources\" & DataGridView1.SelectedCells.Item(0).Value.ToString() & ".jpg")

Zo’n verwijzing is al goed. Ze verwijst naar de huidige map, de CurrentDirectory, waarin de map Resources staat. Zo’n verwijzing hoef je niet aan te passen.

Een splash screen toevoegenEen splash screen is een scherm dat bij het opstarten van je programma even in beeld komt. Vaak staan er op zo’n splash screen de naam van het programma, de producent, copyright gegevens e.d.

Ga ervan uit dat je softwarebedrijf FriNop heet, met als website www.frinop.nl.

1. Klik in de menubalk op project - Add Windows Form.2. Selecteer Splashscreen en verander de naam in SplashScreenFriNop.vb.3. Klik op Add.

Je ziet nu het volgende scherm:

4. Rechtsklik op de rode ring.

De properties van het MainLayoutPanel verschijnen rechtsonder in de properties tab.

5. Klik in BackgroundImage in System.Drawing.Bitmap op de drie puntjes om een bestand te kunnen kiezen.

6. Klik op Import en surf naar de map C:\Users\...\Documents\vb2015communitymetdatabases en selecteer frinop.png en klik op Openen - OK. (Zet indien nodig rechts onderin de dropdownbox op All Files(*.) om frinop.png te kunnen zien.)

Je hoeft het bestand frinop.png niet in de map Resources te zetten omdat het geen losstaand bestand is, maar wordt opgenomen in het .exe bestand.

Hoofdstuk 11 223

Je ziet:

7. Klik in het splash screen op Application Title.8. Kies in de properties list bij Text Align voor TopRight.9. Klik op Version {0}.{1.00}, zet TextAlign op BottomRight en sleep het

geselecteerde vak naar onderen.10. Selecteer het vakje met Copyright en zet TextAlign op MiddleRight.

Het scherm ziet er nu als volgt uit:

11. Voeg aan het splashscreen een timer object toe.12. Zet in het properties scherm de interval van de timer op 3000.13. Maak een Timer1_Tick eventhandler door op het Timer1 object te

dubbelklikken.14. Voeg de volgende code toe:

Timer1.Stop() Form1.Show() Me.Close()

Dit zorgt ervoor dat, wanneer de timer na 3000 milliseconden afloopt, de timer wordt gestopt, Form1 wordt (geladen en) getoond en het splashscreen wordt gesloten.Standaard wordt een programma afgesloten wanneer het eerst gestarte scherm wordt gesloten. Maar dat wil je niet. Het programma moet pas sluiten wanneer het laatste scherm wordt gesloten.

1. Kies de tab Project - project4 Properties.2. Selecteer in het tabblad Application bij Shutdown mode When last form

closes.

Hoofdstuk 11 224

Deze aanpassing maakt het mogelijk om het splash screen te sluiten wanneer Form1 wordt geladen.

Het starten van de timer gebeurt zodra het splashscreen wordt geladen. Dat moet je nog even instellen.

15. Voeg helemaal aan het einde van de code van het SplashScreenFriNop_Load event de volgende code toe:

Timer1.Start()

Als laatste moet je nog instellen dat het splashscreen de opstartpagina van je project wordt.

16. Kies de tab Project - project4 Properties.17. Selecteer In het tabblad Application bij Startup form SplashScreenFriNop.18. Kies in de dropdownbox bij Icon <Browse> en selecteer in C:\Users\...\

Documents\vb2015communitymetdatabases het bestand fnlogo.ico.

Dit is het icoon dat aan het .exe bestand wordt gekoppeld. Ook dit bestand hoeft niet in de map Resources te worden opgenomen. Het wordt automatisch in de setup meegenomen.


Na 3 seconden verdwijnt het splashscreen en verschijnt Form1.

20. Stop je programma.

Je hebt misschien gezien dat het copyright in versie informatie nog niet goed is.

1. In de Solution Explorer, rechtsklik op project4 en kies Properties.2. Klik in het tabblad Application op Assembly Information.

Je kunt hier allerlei instellingen van je project bekijken en aanpassen. 3. Pas de waarden in de eerste 5 tekstvakken als volgt aan:

Een aantal van deze gegevens zie je straks weer terug op je splashscreen.

Hoofdstuk 11 225

4. Klik tenslotte op OK.5. Test je project.

Je ziet dat het splashscreen nu is aangepast met de gegevens die je net hebt ingevoerd.

Je project is nu helemaal klaar en er kan een setup gemaakt worden. Zoals al eerder gezegd zijn er verschillende manieren op een setup te maken. In dit hoofdstuk gebruik je hiervoor een Installer Project. Zo’n installer project maakt geen deel uit van de standaard installatie van Visual Studio. Als het goed is heb je aan het begin van dit hoofdstuk de installer projects toegevoegd aan Visual Studio. Als je dat nog niet gedaan hebt, doe dat dan nu.

Om een setup voor een project te maken voeg je een installer project toe aan de solution waarin het project zich bevindt. Dus we gaan nu een installer project toevoegen aan de solution project4.

Een installer project toevoegen aan een solution

1. In het Solution Explorer scherm rechtsklik op de naam van de solution.2. Kies Add – New Project.3. Kies Other Project Types - Visual Studio Installer - Setup Wizard.4. Geef het project de naam SetupProject4.

Onder in het scherm bij Location zie je de locatie van je huidige solution staan. Dit is goed zo, want je setup project komt in dezelfde solution te staan als project4 waarvoor je de setup maakt.

5. Klik op OK.

Het welkom scherm van de Setup Project Wizard wordt zichtbaar. De wizard helpt je snel een setup project te maken. Je kunt instellingen die je niet bevallen later handmatig wijzigen.

1. Klik op Next.

In het volgende scherm kun je aangeven welk type setup bestand je wilt maken. De standaardinstelling Create a setup for a Windows Application staat al goed voor een eenvoudig .msi setup bestand.

2. Klik op Next.

In het volgende scherm geeft je aan wat er allemaal in het setup bestand meegenomen moet worden. Je gaat met de setup je project4 en de bijbehorende bronbestanden (source files) die in Resources staan installeren.

3. Vink Primary Output from project4 aan.4. Vink Source Files from project4 aan.5. Vink Content Files from project4 aan

Hoofdstuk 11 226

Dit zorgt ervoor dat je Resource bestanden op de juiste plaats worden geïnstalleerd.

6. Klik op Next.

In het volgende scherm kun je eventueel nog extra bestanden aan je setup toevoegen. Als je alle bronbestanden netjes in de map Resources hebt staan is dit niet nodig.

7. Klik op Next.

De wizard heeft alle benodigde informatie. Je ziet het scherm Create Project.

8. Klik op Finish.

Je project SetupProject4 wordt gegenereerd en verschijnt in de Solution Explorer. Er staan nu in de Solution Explorer twee projecten in de Solution project4. Je ziet nu het scherm File System (SetupProject4). Je ziet links welke mappen er tijdens de installatie worden geplaatst op de machine waarop je programma project4 wordt geïnstalleerd. De Application Folder is de map waarin je programma komt te staan.

1. Klik op Application Folder.

Je ziet nu rechts welke bestanden er in de Application Folder worden geïnstalleerd.

Snelkoppelingen toevoegen aan je setup bestandJe wilt natuurlijk dat er na installatie van je programma ook snelkoppelingen naar je programma worden geplaatst.

1. Rechtsklik op Primary Output from project4 (Active).2. Kies Create Shortcut …

Er is een snelkoppeling naar je programma gemaakt.

3. Pas de tekst van de snelkoppeling eventueel aan.4. Knip en plak deze snelkoppeling naar de mappen User’s Desktop.5. Maak nog een snelkoppeling en knip en plak die naar User’s Programs

Menu.

Setup instellingen aanpassenJe kunt, als je dat wilt, een paar instellingen van de setup aanpassen.

1. Rechtsklik in de Solution Explorer op SetupProject4 – View – User Interface.

Je ziet nu welke stappen er straks getoond worden tijdens het installeren. Als je de gebruiker niet wil laten kiezen waar je programma wordt geïnstalleerd, kun je het onderdeel Installation Folder verwijderen door er op rechtsklikken en dan delete te kiezen. Maar in dit voorbeeld willen we de gebruiker die optie wel bieden en dus veranderen we hier niets.

Hoofdstuk 11 227

De launch condition instellenOm je programma na installatie op een andere computer goed te laten werken is het soms nodig om ervoor te zorgen dat die computer de benodigde software bevat. Zo kan het zijn dat je programma alleen werkt wanneer er een bepaalde versie van de Microsoft .NET software geïnstalleerd is. Je kunt je setup laten controleren of de benodigde software aanwezig is en, indien nodig, die software laten installeren.

1. Rechtsklik in de Solution Explorer op SetupProject4 – View – Launch Conditions.

Je ziet in het Launch Conditions scherm dat het .NET Framework nodig is voor je programma.

2. Klik op .NET Framework.

In het Properties scherm zie je welke versie van .NET is vereist.

Dit betekent dat tijdens de installatie gecontroleerd wordt of deze of een nieuwere versie van het .NET Framework op de computer staat, en zo niet, dan wordt die opgehaald en geïnstalleerd.

In het Properties scherm van je setup project kun je verdere zaken aanpassen, zoals de naam van de maker (author) van het programma project4 en de beschrijving (description) van het programma.Bij Manufacturer geeft je aan door welk bedrijf je programma project4 is gemaakt. Dit is ook de naam van de map die in de map Program Files wordt geplaatst.Bij ProductName kun je de naam van het geïnstalleerde programma aanpassen.Bij Title kun je aangeven welke titel er zichtbaar moet zijn.

Ook kun je bepalen of het je programma na installatie beschikbaar is voor alle gebruikers van de computer, of alleen voor degene die het programma heeft geïnstalleerd. Dit doe je eventueel door de waarde bij InstallAllUsers aan te passen.

3. Rechtsklik in de Solution Explorer op het SetupProject4 project en pas eventueel de properties aan.

Het setupproject genererenIn je solution zitten 2 projecten. Voor je het setupproject genereert, laat je voor de zekerheid je te installeren project, project4 nog 1 keer genereren. Je weet dan zeker dat het helemaal up to date is.

1. Rechtsklik in de Solution Explorer op project42. Klik op Build.

En dan nu het setup bestand genereren.

4. Rechtsklik in de Solution Explorer op SetupProject4.5. Klik op Build.

Hoofdstuk 11 228

Je setup bestand wordt gegenereerd en bevindt zich in de debug map van de map project4/setupProject4.

Hier zie je 2 bestanden een Setup.exe en een SetupProjekt…msi bestand.Msi verwijst naar MicroSoftInstaller.

Test je setup bestanden op een andere computer.

Hoofdstuk 11 229

Hoofdstuk 12 Je webapplicatie beschikbaar maken voor het InternetWanneer je een webapplicatie hebt gemaakt, wil je die meestal ook aan anderen beschikbaar maken via een netwerk zoals het Internet. Dat kan. Je hebt hiervoor een webserver computer en webserver software nodig. Je kunt hiervoor gebruik maken van een hosting provider; een bedrijf dat jouw website op hun computers runt, of je kunt van je eigen computer een webserver maken. Maak je gebruik van een hosting bedrijf, dan bereid je je webapplicatie voor zoals verderop in dit hoofdstuk beschreven, en kopieer je de webapplicatie naar de site van het hosting bedrijf. Op de site van zo’n hosting bedrijf staat uitgelegd hoe dit kopiëren (uploaden) werkt. Gebruik je een eigen computer als webserver, dan zul je webserver software op die computer moeten hebben draaien. Het is overigens aan te raden om voor het runnen van een thuiswebserver een aparte computer te gebruiken. Je hebt dan geen last van crashes op je ontwikkelcomputer, en je kunt de webserver computer altijd laten staan.

Je website klaar maken voor gebruik op een webserverAls je een echte website, dus met alleen HTML en eventueel JavaScript en een CSS hebt gemaakt dan hoef je verder niets te doen om deze website klaar te maken. De bestanden moeten alleen bij de provider of op je eigen webserver computer in de juiste map worden geplaatst. Je hoeft dan aanpassingsstappen 1, 2 en 3 hieronder niet te doen. Ga dan verder bij De webapplicatie op de webserver plaatsen.

Je webapplicatie klaar maken voor gebruik op een webserverWe gebruiken in dit voorbeeld de website snelkoppeling zoals je die in hoofdstuk 8 hebt gemaakt. Als je die hebt gemaakt vindt je die in de map C:\Users\...\Documents\Visual Studio 2015\Projects. Als je de site niet hebt gemaakt staat hij in: C:\Users\...\Documents\vb2015communitymetdatabases.Voor je je webapplicatie op een webserver kunt plaatsen moet je eerst nog een paar zaken aanpassen.

Stap 1 - Debug modus uitschakelenWanneer je een webapplicatie aan het ontwikkelen bent, werk je in debug modus. Dat wil zeggen dat de applicatie telkens wanneer er iets fout gaat zo duidelijk mogelijke foutmeldingen aan de browser doorgeeft. Dat is fijn tijdens het ontwikkelen van je webapplicatie, maar je wilt vast niet dat de onschuldige, of misschien niet zo onschuldige gebruiker van je webapplicatie bij fouten uitgebreide foutinformatie op zijn scherm krijgt. In het gunstigste geval is dit voor hem onbegrijpelijke en verwarrende informatie. In een ongunstig geval geeft dit een kwaadwillende gebruiker te veel informatie over je code. Dus debug modus moet worden uitgeschakeld. Dit gaat als volgt.

1. Open je webapplicatie: File – Open – Project/Solution – snelkoppeling – snelkopeling.sln – Open.

2. Test het project (Anneke – kan het)

In de Solution Explorer rechtsboven in het scherm zie je het bestand web.config van je applicatie.

Hoofdstuk 12 230

3. Rechtsklik op web.config en kies Open.4. Zoek binnen het blok <configuration> in het blok <system.web> de regel

<compilation debug="true" strict="false" explicit="true">5. Verander debug=”true” in debug=”false”

Wanneer je voor de zekerheid vervolgens de site nog een keer runt, verschijnt er een waarschuwing dat de debug is uitgeschakeld, en het voorstel om deze weer in te schakelen. Kies ervoor om zonder debug te runnen. Anders zou de waarde van debug weer teruggezet worden naar true.

Stap 2 - De connectionstring(s) aanpassenHet stukje hieronder is niet van toepassing voor webapplicaties die geen gebruik maken van een database.

In een webapplicatie die verbonden is met een database heb je een of meerdere connectionstrings naar de database gemaakt. Als je dit hebt gedaan zoals in het hoofdstuk over webapplicaties is aanbevolen, heb je die connectionstring(s) als variabele(n) opgeslagen in het web.config bestand van je webapplicatie. Deze connectionstrings verwijzen naar de locatie van de database. Nu je de webapplicatie inclusief database op de webserver gaat plaatsen moet je ervoor zorgen dat de connectionstring(s) inderdaad verwijzen naar de database op de webserver. Uit veiligheidsoverwegingen is het niet verstandig om de database in dezelfde map als de webbestanden te plaatsen. In het hoofdstuk over webapplicaties is er daarom gekozen de database in een aparte map genaamd databases op de c: schijf te zetten. Ook op de webserver zou je voor deze constructie kunnen kiezen. Als je dat doet, moet in het bestand web.config het onderdeel connectionString er als volgt uitzien.

<connectionStrings> <add name="snelkoppelingConnectionString" connectionString="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=c:\databases\snelkoppeling.accdb" providerName="System.Data.OleDb" /> </connectionStrings>

Maak je gebruik van meerdere connectionstrings, dan moet je voor elke connectionstring de locatie goed aangeven. In dit voorbeeld gebruik je voor de webserver al de map c:\databases als locatie voor je database. Je hoeft dan de connectionstring niet aan te passen. Wanneer je op de webserver de database op een andere locatie zet, moet je de connectionstring wel aanpassen.

1. Bepaal waar op de webserver je de database gaat plaatsen.2. Controleer in het bestand web.config de variabele connectionString en pas

deze indien nodig aan.3. Pas ook eventuele andere connection strings in je code aan.

Hoofdstuk 12 231

Stap 3 - De website publicerenDe volgende stap is je webapplicatie klaar te maken voor de webserver. Een webapplicatie wordt dan omgezet van veel losse bestanden naar een .dll bestand. Dit proces heet het publiceren van de webapplicatie.

1. In de Solution Explorer rechtsklik op je project snelkoppeling.2. Kies Publish.3. Kies Profile - Custom.4. Type als Profile name: snelkoppelingprofiel.5. Klik op OK.6. In de tab Connection kies bij Publish Method de optie File System.7. Klik bij Target Location op de drie puntjes.8. Vul bij location in D:\SnelkoppelingSite.

Dit is de map waarin je gepubliceerde site wordt geplaatst.

9. Klik op Open.10.Kies Ja op de vraag of de map gemaakt moet worden.11.Kies Next.

In het volgende scherm zie je dat het met de publish methode niet mogelijk is om een database toe te voegen aan de webapplicatie. Dat zul je bij het plaatsen van de site met de hand moeten doen.

12.Kies bij Configuration de optie Release.13.Kies Publish.

Je website of webapplicatie testen op je eigen computerJe webapplicatie is nu klaar om op een webserver geplaatst te worden. Maar misschien wil je wel zien hoe die dan gaat werken. Dat kun je doen door je webapplicatie met webserver software op je eigen computer te runnen.

Testen of er webserver software actief is op je machineWanneer je Visual Studio community 2015 op je computer hebt geïnstalleerd, staat de webserver software al op je machine. De webserver software heet IIS; Internet Information Server. Je kunt eenvoudig testen of er op jouw computerserver software actief is.

1. Start je browser (b.v. Internet Explorer) en type in de adresregel http://localhost.

2. Druk op Enter.

Als er op jouw machine webserver software actief is verschijnt er een openingspagina. Bij Windows 10 zie je het volgende:

Hoofdstuk 12 232

Zie je de bovenstaande webpagina niet, dan is IIS niet actief op jouw machine. Misschien wel de IIS express versie, maar niet de echte IIS-software. Die heb je wel nodig om een site te hosten. Dat hoeft geen probleem te zijn. Je kunt IIS makkelijk installeren en activeren. Hoe dit gaat ligt buiten het bereik van dit boek, maar je kunt op het Internet hulp vinden op bij voorbeeld: http://www.howtogeek.com/112455/how-to-install-iis-8-on-windows-8/

De webapplicatie op de webserver plaatsenWebapplicaties worden gerund door webserversoftware. In dit geval door IIS. IIS zoekt op een vaste plaats op de computer naar websites en webapplicaties. Je moet IIS laten weten waar de gepubliceerde site staat. Dit doe je met het programma Beheer van Internet Information Services.

1. Type in de zoekbalk van Windows IIS.2. Klik op Beheer van Internet Information Services.3. Klik op het driehoekje linksboven om het overzicht van de computer uit te

klappen.4. Klik op het driehoekje naast Sites om de inhoud van de map Sites te kunnen

zien.

Hoofdstuk 12 233

Je ziet in de map Sites de standaard aanwezige site Default Web Site.

5. Rechtsklik op het icoon Sites.

In het Website toevoegen scherm vul je de gegevens van de site in:

6. Bij Sitenaam vul je de naam van de site in, dus Snelkoppeling.

Bij Hostnaam kun je het URL van je site invullen, dus bij voorbeeld www.snelkoppeling.nl. Dit doe je alleen wanneer je een eigen URL hebt en je met je domainname provider hebt geregeld dat aanvragen naar dit URL vanuit het Internet naar jouw IP-adres worden geleid. Je moet dan ook nog in je router instellen dat zo’n aanvraag door je router wordt doorgeleid naar je webserver. De hostnaam wordt gebruikt wanneer je op je webserver meerdere websites draait. De webserversoftware op je computer kijkt dan naar de hostnaam in de aanvraag en weet dan naar welke site hij moet doorverbinden. Dit gaat buiten het bereik van dit boek. Omdat we nu alleen testen hoe je webapplicatie werkt, laat je dit vakje leeg.

7. Bij Fysiek pad kies je in de hoofdmap van de D: schijf de map met je gepubliceerde webapplicatie genaamd SnelkoppelingSite.

Zoals je ziet kun je de bestanden van je webapplicatie op een willekeurige plaats op je computer zetten. In dit voorbeeld in de map SnelkoppelingSite op de D: schijf. Daar staat immers je gepubliceerde webapplicatie.

Hoofdstuk 12 234

8. Klik op OK.

Waarschijnlijk draait op je webserver de standaardsite Default Web Site op poort 80. Als je nog geen internet URL voor je website hebt, kan de serversoftware niet op basis van het URL een site kiezen. Je snelkoppeling webapplicatie draait ook standaard op poort 80. Dit veroorzaakt problemen. Je kunt tijdelijk de standaard website uitschakelen, maar je kunt ook in plaats daarvan je site aan een andere poort toewijzen.

9. Vul bij poort in 81.10. Klik op OK.

Als je webapplicatie op een aparte webserver draait, zul je ook de database moeten kopiëren naar de juiste map op die webserver. Als je, zoals nu, je ontwikkelmachine als webserver gebruikt, is dat niet nodig, want dan staat de database al op de goede plaats.

Hoofdstuk 12 235

Alles is nu klaar voor gebruik. Tijd om te testen. Je typt in je browser eerst het pad naar de localhost is, dus http://localhost, gevolgd door het poortnummer :81, en dan de naam van de pagina die je wilt oproepen, dus Inlog.aspx.

1. Type in de browser in: http://localhost:81/Inlog.aspx.2. Klik op Enter.

Je webapplicatie wordt zichtbaar in de browser.

3. Log in met gebruikersnaam Anneke en wachtwoord kan het.

Je webapplicatie maakt contact met de database, stelt vast dat je inloggegevens kloppen en stuurt je door naar de volgende pagina. Je web applicatie werkt !!!

Hoofdstuk 12 236

Bijlage 1 Installatie IIS + PHP + MYSQL + PhpMyadmin + ODBC driver

Wanneer je Windows 10, Visual Studio 2015 en Microsoft Access 2016 hebt geïnstalleerd kun je al Windows programma’s met databases maken. Maar wil je ook web applicaties maken, of andere databases dan Microsoft Access gebruiken, dan heb je extra software nodig. In deze bijlage wordt uitgelegd hoe je deze extra software installeert. IIS is een onderdeel is van Windows 10 en is tegelijk met Windows 10 op je computer geïnstalleerd. Deze software hoef je dus niet te installeren, alleen te activeren.

Het installeren van PHP + MySQL + phpMyAdmin + ODBC driver is een nauwkeurig werkje. De informatie hierover staat verspreid op het internet en het verzamelen van de software en de informatie kost veel tijd. Om te voorkomen dat het ook jou veel tijd gaat kun je deze installatie-instructie volgen. Deze is getest op een machine met een Pentium 4 processor, draaiend onder Windows 10 en Microsoft Access 2016.

In hoofdstuk 8 en 9 werk je aan webapplicaties Hiervoor heb je webserver software nodig. Er zijn verschillende webserver pakketten op de markt, maar omdat Internet Information Service (IIS) al een gratis onderdeel van Windows 10 is ligt de keus voor IIS voor de hand. Je kunt natuurlijk ook andere webserver software gebruiken, zolang deze maar met ASPX overweg kan.

In hoofdstuk 10 werk je met een andere database dan Microsoft Access, namelijk een MYSQL database. Databases van dit type worden veel gebruikt door website bouwers die werken met PHP. MYSQL databases hebben hun eigen webserver software genaamd MYSQL. Ze hebben geen eigen interface, maar worden beheerd met een programma genaamd PhpMyadmin. Om MYSQL databases te kunnen benaderen heb je ook nog een extra driver nodig; de ODBC driver. Om de set compleet te maken neem je in de installatie ook gelijk PHP mee, hoewel je dat voor VB.NET 2015 niet nodig hebt.

INTERNET INFORMATION SERVICE (IIS)Bij sommige installaties van Visual Studio is de Internet Information Services server software al automatisch meegeïnstalleerd.

1. Type in je browser http://localhost of http://127.0.0.1 in en druk op de Enter toets.

Als IIS goed werkt verschijnen twee welkomstschermen die je vertellen dat IIS draait.Als dit niet het geval is, en je als besturingssysteem Windows 10 hebt, ga dan als volgt te werk:

1. Klik op de Windows toets in combinatie met de R toets.

De command prompt verschijnt.

2. Type appwiz.cpl.

Bijlage 1 237

3. Klik op OK.

4. Klik op Turn Windows features on or off.

Bijlage 1 238

5. Vink de onderdelen bij IIS aan zoals hierboven.6. Klik op OK om terug te gaan naar het scherm Wizard Windows onderdelen. 7. Doorloop de installatieprocedure.

Start eventueel de computer opnieuw op.8. Selecteer Start – Configuratiescherm – Systeembeheer(Settings)9. Type in het zoekvak (Find a setting) - Services.10. Klik op view local services.11. Controleer of ISS beheer gestart is. Start indien nodig deze service.

Hier kun je de service ISS beheer handmatig starten en afsluiten. De service hoort normaal gesproken automatisch te starten bij het starten van Windows.

12. Sluit de schermen af.13. Test of de server werkt door in je browser http://localhost of http://127.0.0.1 in te

voeren en op de Enter toets te drukken.

Als de server goed werkt verschijnen twee welkomstschermen die je vertellen dat IIS draait.

PHP, MYSQL en phpMyadmin ( XAMPP)Zoals gezegd is PHP eigenlijk niet nodig om vanuit een Visual Basic programma een database te benaderen. Je gebruikt het zodadelijk alleen even om snel te testen of

Bijlage 1 239

MYSQL goed werkt. Maar ook omdat veel webontwikkelaars MYSQL databases ook via PHP willen benaderen, is de installatie van PHP opgenomen in deze instructie. Let er op dat je nooit tegelijkertijd twee verschillende webservers kunt laten draaien. Je gebruikt dus of de XAMPP of ISS. Hoe je dit doet staat in hoofdstuk 10.

De XAMPP is een combinatie van Apache, MySQL, PHP en Perl.In de nieuwste versie is MySQL vervangen door de zogenaamde MariaDatabBase(MariaDB). MariaDB is een relationeel databasemanagementsysteem (RDBMS). Het ontstond als opensource-fork van MySQL. MariaDB is grotendeels compatibel met MySQL.

1. surf je naar http://www.apachefriends.org.

1. Kies voor XAMPP voor Windows.

In dit voorbeeld gebruiken we het volgende bestand: xampp-portable-win32-5.6.24-2-VC11-installer.exe

2. Volg de instructies op je scherm.

Let op! Voordat je installeert moet je de User Account Control uitzetten.

3. Ga naar Settings (in het control panel).4. Type in het zoekvak (Find a setting) UAC.5. Kies voor Change User Account Control settings.6. Zet de schuif op Never notify. Vergeet hem niet na de installatie terug te

zetten!

Bijlage 1 240

https://nl.wikipedia.org/wiki/MySQL

https://nl.wikipedia.org/wiki/Fork_(ontwikkeling)

https://nl.wikipedia.org/wiki/Opensourcesoftware

https://nl.wikipedia.org/wiki/Databasemanagementsysteem

https://nl.wikipedia.org/wiki/Relationele_database

7. Klik op OK.8. Rechtsklik nu op xampp-portable-win32-5.6.24-2-VC11-installer.exe.9. Kies voor Run as administrator.10. Volg de aanwijzingen op het scherm.

Bijlage 1 241

11. Klik op Next>.

Bijlage 1 242

12. Zorg dat MySQL, phpMyAdmin en Apache zijn aangevinkt

13. Installeer de XAMPP in de map C:\xampp.14. Klik op Next >.15. Volg de aanwijzingen op het scherm.16. Surf naar c:\xampp.17. Klap de map open.

Bijlage 1 243

18. Klik op xampp_start.19. Kies een geschikte taal.

Bijlage 1 244

Er ontstaat in dit voorbeeld een foutmelding omdat de IIS server draait en er kan maar 1 server tegelijkertijd draaien. Wanneer je IIS niet had geinstalleerd was er natuurlijk geen foutmelding. Om IIS uit te schakelen ga je als volgt te werk.

20. Klik op de windows toets en tgelijkertijd op de R toets.21. De command prompt verschijnt en daar type je in : appwiz.cpl

22. Klik op OK23. Klik op Turn Windows features on or off

Bijlage 1 245

24. Haal het vinkje voor Internet Information Services weg.25. Start de computer opnieuw op.26. Start in de C:\xampp map het controlpanel27. Klik in het controlpanel achter apache op start.

De computer vraagt of het goed is dat je toegang krijgt

Bijlage 1 246

28. Klik op Allow access29. Klik in het control panel achter MySQL op Start.

De computer vraagt weer om toegang.

30. Klik weer op Allow access.

Apache maakt gebruik van poort 80 en 443 en MySQL van poort 3306.

Je kunt nu testen of een en ander werkt.

1. Start Edge ( de Windows 10 browser).2. Type 127.0.0.1 of localhost

3. Als alles goed is gegaan zie je het volgende welkom scherm:

Bijlage 1 247

4. Type in de browser localhost\phpMyAdmin

Het volgende scherm verschijnt:

5. Zet UAC weer in zijn oorspronkelijke toestand (zie hiervoor).

Nu wordt het tijd om te testen of PHP werkt. OP de CD die bij dit boek hoort staat een map Candy met daarin twee php bestanden.

Wanneer je ISS gebruikt, gebruik je de map c:\Inetpub\wwwroot om je websites in op te slaan.Wanneer je de XAMPP gebruikt zet je php en html bestanden in de map htdocs, deze bevindt zich in de map c:\xampp

Bijlage 1 248

1. Download van http://www.evertkok.nl/frinop/vbmetdatabases2015communityde bestanden candy.txt en candystart.txt.

2. Hernoem deze bestanden candy.php en candystart.php.3. Plaats de bestanden in de map c:xampp\htdocs.4. Voer in de browser http://localhost/candystart.php in en druk op de Enter toets.5. Start het control panel in de map c:\xampp en start Apache.

Als alles goed werkt, moet er na keuze van uw lievelingssnoepje een toepasselijk antwoord komen.

MYSQL

Dan test je of de MYSQL goed werkt.

1. Download van http://www.evertkok.nl/frinop/vbmetdatabases2015community/ het bestand databasetest.txt.

2. Hernoem dit bestand database.php.3. Kopieer het naar de map c:\xampp\htdocs.4. Start het control panel in de map xampp en zorg ervoor dat Apache en MySql

gestart zijn.5. Voer nu in de browser http://localhost/databasetest.php in. 6. Druk op de knop Enter.

Als alles goed werkt, moet er melding komen dat de verbinding gelukt is. Je hebt verbinding gemaakt met de standaard MYSQL database test.

myODBC driver De myODBC driver is nodig voor de communicatie tussen je Visual Basic programma en ODBC databases zoals MYSQL databases. Dit wordt in hoofdstuk 10 verder uitgelegd.

Je kunt via Google met de zoekopdracht download myODBC driver een geschikte driver vinden en gratis downloaden. In dit voorbeeld hebben we de driver gedownload van:https://dev.mysql.com/downloads/connector/odbc/

1. Surf naar https://dev.mysql.com/downloads/connector/odbc/.

Bijlage 1 249

https://dev.mysql.com/downloads/connector/odbc/

http://www.evertkok.nl/frinop/vbmetdatabases2015community/

http://www.evertkok.nl/frinop/vbmetdatabases2015community

Je kunt op deze site kiezen uit verschillende connectoren. In dit voorbeeld wordt de bovenste gebruikt.

1. Download mysql-connector-odbc-5.3.6-win32.msi.2. Selecteer het gedownloade bestand mysql-connector-odbc-5.3.6-win32.msi.3. Klik erop om de installatieprocedure te starten.

4. Klik op next en volg de aanwijzingen op het scherm.

Bijlage 1 250

Controleer na de installatie even of het gelukt is.

1. Klik op Start – Settings.2. Type in het zoekvak(Find a setting) ODBC3. Selecteer Set up ODBC data sources

Je ziet dan in de lijst bij ODBC Data Source Administrator bij het tabblad drivers dat er twee MySQL ODBC 5.3 drivers zijn toegevoegd.

Hiermee is de installatie van alle extra software voltooid. Wanneer je later bij het gebruik van deze software problemen ondervindt, kun je in de bijlage Foutmeldingen en FAQ’s kijken voor eventuele oplossingen.

Bijlage 1 251

Inleiding · Web view2017. 1. 10. · Inleiding. Is dit boek het juiste boek voor jou? Je hebt al...

Documents

Transcript of Inleiding · Web view2017. 1. 10. · Inleiding. Is dit boek het juiste boek voor jou? Je hebt al...