een dAtAbASe koppelen In dreAmweAver cS3

15
Een database
koppelen in
Dreamweaver CS3
De belangrijkste punten van hoofdstuk 15
Databasetechnieken gebruiken.
De eigenschappen van een database instellen.
Databasetechnieken gebruiken.
De eigenschappen van een database instellen.
DB_DRWCS3_boek.indb 312
10/22/07 16:32:47
Wat leert u in dit hoofdstuk?
Wat databasetechnieken zijn.
Wat een database is.
Hoe een database wordt opgebouwd.
Hoe een database wordt gekoppeld.
Een databasetoepassing maken in Dreamweaver CS3.
3
DB_DRWCS3_boek.indb 313
10/22/07 16:32:50
Dreamweaver CS3 de basis
15.1Een dynamische website
Een dynamische website biedt veel voordelen. Bij een dynamische site wordt meestal
de content in een database geplaatst. Zo kunt u met een database:
Een website gemakkelijk onderhouden met behulp van het Content Management
Systeem dat daarvoor is gebouwd;
Gemakkelijk door de website zoeken;
Producten bekijken en in een database plaatsen;
Online bestellingen die in een database zijn ingevoerd bijhouden.
15.1.1Benodigdheden
Anders dan bij een statische website hebt u voor een dynamische site de volgende zaken nodig:
Database, zoals MS Access, MySQL, MS SQL of FileMaker;
Scripttaal die de database kan aanspreken, zoals PHP, ASP, ASP.NET, CFML of JSP;
Eigen webserver of een hostingprovider die de databases en scripttaal aanbiedt. De
(web)server is nodig om de scripttaal en de database samen te brengen en te kunnen laten draaien. De toepassing draait fysiek op een geschikte (web)server;
Kennis van de gebruikte scripttaal om de toepassing in elkaar te zetten;
Een duidelijk ontwerp van hoe de processen lopen op uw website.
Afbeelding 15.1
Keuze maken in techniek.
314
DB_DRWCS3_boek.indb 314
10/22/07 16:32:52
15 Een database koppelen in Dreamweaver CS3
Na het maken van een keuze van de databasetechnologie en het opzetten van de weben databaseomgeving biedt Dreamweaver een groot aantal gratis toepassingen.
15.1.2Mogelijke toepassingen met Dreamweaver
Met Dreamweaver zijn onder andere de volgende toepassingen te maken:
Product- of artikel invoersysteem;
Dynamisch overzicht;
Mutatiesysteem;
Dynamische zoekopties.
Afbeelding 15.2
Een beheersysteem voor boeken.
Eventuele andere toepassingen kunt u vinden en downloaden op www.dmxzone.com.
15.1.3De databasekeuze
De keuze voor een database is erg belangrijk. Sommige databases kunt u gratis gebruiken, andere hebben een licentie nodig. Databases die u eenvoudig kunt gebruiken in
Dreamweaver zijn:
MS Access of MS SQL van Microsoft, die zich vooral kenmerken voor gebruiksvriendelijkheid;
MySQL, een gratis open-sourcedatabase die gemakkelijk gekoppeld kan worden en
veel op internet wordt gebruikt.
315
DB_DRWCS3_boek.indb 315
10/22/07 16:32:52
Dreamweaver CS3 de basis
Afbeelding 15.3
Pagina’s toevoegen aan een nieuwssysteem.
De keuze van de database hangt af van uw budget en de benodigde capaciteit. Met de
genoemde databases kunt u vrij geavanceerde oplossingen maken. De grootste databaseproducent ter wereld is Oracle. Microsoft en IBM zijn twee andere belangrijke
leveranciers van databases. Vrijwel alle databases ondersteunen SQL: Structured Query
Language, de taal om databases aan te sturen en te manipuleren.
15.1.4De scripttaalkeuze
Niet elke scripttaal kan gekoppeld worden aan een willekeurige database. Er bestaat
vaak een zekere ‘chemie’ tussen een scripttaal en een bepaalde database. Zoals gezegd,
is de scripttaal die de database aanstuurt onderdeel van de serversidetechniek. Deze
code ziet u niet in de browser. Dreamweaver ondersteunt de volgende scripttalen:
PHP (Hypertext Preprocessor): een open-sourcescripttaal die erg populair is. In
Europa is dit een van de meest gebruikte scripttalen op het web. In 2005 is versie
PHP5 uitgebracht. Meer over deze ontwikkelingen leest u op www.php.net;
ASP (Active Server Pages): een scripttaal van Microsoft die eenvoudig een MS Access-database op het internet publiceert. ASP is vaak aanwezig in Windows XP Pro
of een soortgelijke professionele Windows-versie. De meest actuele versie van ASP
is versie 3.0. ASP.NET is de opvolger;
ASP.NET, onderdeel van het .NET-framework. Dit is de opvolger van ASP 3.0. ASP.
316
DB_DRWCS3_boek.indb 316
10/22/07 16:32:53
15 Een database koppelen in Dreamweaver CS3
NET (dot net) kan geavanceerde toepassingen bouwen en diverse soorten databases koppelen. Deze scripttaal gebruikt onder andere XML als belangrijke techniek
in het koppelen van databases;
CFML (ColdFusion Markup Language), een product van Allaire en Macromedia.
Deze scripttaal is vooral in de Verenigde Staten erg populair. CFML kan diverse
soorten grote databases eenvoudig koppelen;
JSP (Java Server Pages) wordt vaak in Java-omgevingen gebruikt. JSP is een dure,
maar betrouwbare en stabiele scripttaal van producent SUN. Programmeurs die
met JSP werken, gebruiken meestal een teksteditor als Dreamweaver. Ook vorige
versies van Dreamweaver boden al ondersteuning voor JSP.
Er zijn nog meer scripttalen die feilloos een database kunnen aansturen. Deze worden
echter niet ondersteund door Dreamweaver.
15.2Een databasekoppeling voorbereiden
Voordat we een database aan een website gaan koppelen, zullen we de nodige voorbereidingen moeten treffen. Voor de koppeling hebben we het volgende nodig:
Een gevulde database waarvan we de structuur kennen;
Een Data Source Name die tussen de scripttaal en de database staat;
De scripttaal;
Een webserver die de scripttaal en de database kan draaien;
Een in Dreamweaver ingestelde sitemap gebaseerd op de andere componenten.
In de volgende paragraaf bouwen we in de vorm van een case een databasegestuurde
toepassing met de genoemde onderdelen.
De webserver
De webserver is de software die de scripttaal en de database kan publiceren. Een webserver is onderdeel van een hostingserver die de gehele website kan publiceren. Zo heeft een
webserver een specifieke taak om bijvoorbeeld de scripttaal ASP te laten zien in de browser.
De werking van de webserver is eenvoudig. De server leest bijvoorbeeld de ASP-code uit en
‘vertaalt’ dit op de webserver naar HTML. ASP heeft in een eerder stadium bijvoorbeeld gegevens uit een MS Access-database uitgelezen. De HTML kan weer worden gepubliceerd in de
browser.
317
DB_DRWCS3_boek.indb 317
10/22/07 16:32:54
Dreamweaver CS3 de basis
Afbeelding 15.4
Databasekoppelingen kunnen
zeer complex zijn.
15.3Een dynamisch overzicht maken
In deze paragraaf maken we de fysieke koppeling en toepassing met MS Access, ASP
en Dreamweaver. Helaas kunt u dit alleen onder Windows (98/XP/2000/ Vista) uitproberen. MacOS X ondersteunt geen ASP, maar daarentegen wel weer standaard PHP en
MySQL.
Een database
Een database is een bestand waarin we op een speciale manier gegevens kunnen opslaan.
Een database bevat tabellen met rijen die we records noemen. Ieder record bevat op zijn
beurt velden. Voor ieder record in een tabel is de betekenis van elk veld hetzelfde. Een tabel
met adresgegevens bevat bijvoorbeeld allemaal records met de velden adres, postcode,
plaats enzovoort. Een database kan verschillende tabellen bevatten.
Voor de oefening in de volgende paragraaf gaan we een met films gevulde MS Access-database bekijken. Hiervoor moeten we eerst een Data Source Name (DNS) in
Windows aanmaken. In Dreamweaver zetten we vervolgens de sitemap klaar voor ASP.
Daarna bouwen de interface in Dreamweaver en leggen we de koppeling zodat de de
dynamische content verschijnt.
318
DB_DRWCS3_boek.indb 318
10/22/07 16:32:55
15 Een database koppelen in Dreamweaver CS3
15.3.1De database bekijken
In MS Access staat de met films gevulde database films.mdb klaar (zie afbeelding 15.6).
Afbeelding 15.5
Een filmdatabase aanleggen.
Als we de database bekijken, zien we de volgende velden:
id, het unieke nummer;
filmtitel, gevuld met tekst;
genre, gevuld met tekst;
waardering, gevuld met een getal van 1 tot 10.
De database is gevuld met de volgende records, die
van links naar rechts de velden id,filmtitel, genre en
waardering invullen:
Afbeelding 15.6
Een filmdatabasestructuur in MS
Access.
319
DB_DRWCS3_boek.indb 319
10/22/07 16:32:56
Dreamweaver CS3 de basis
Velden in de filmdatabase
Tabel 15.1
ID
Filmtitel
Genre
Waardering
1
Crash
Thriller
9
2
Hostel
Horror
5
3
Guess Who
Humor
8
4
Fun with Dick and Jane
Humor
7
5
Johan Cruijff: en un Momento Dado
Sport
9
We hebben nu een database met vijf records (zie afbeelding 15.7).
Afbeelding 15.7
Een filmdatabase met rijen of records.
15.3.2De Data Source Name (DSN)
De DSN is als de trekhaak tussen de auto en een caravan. Een DSN staat in ons geval
tussen de scripttaal ASP en de MS Access-database. In de DSN definiëren we:
Naam van de database;
Soort database;
Naam van de DSN zodat we die in Dreamweaver kunnen gebruiken;
Plaats van de database op de harde schijf of server.
Nu gaan we de DSN aanmaken in Windows.
Oefening 15.1
Een DSN aanmaken
1 Open in Windows (XP) het Configuratiescherm via het menu Start.
2 Kies voor de optie Prestaties en onderhoud.
3 Kies nu de optie Beheer.
4 Kies nu voor de optie Gegevensbronnen (ODBC). Het dialoogvenster voor de DSN verschijnt (zie
afbeelding 15.8).
320
DB_DRWCS3_boek.indb 320
10/22/07 16:32:57
15 Een database koppelen in Dreamweaver CS3
5 Klik op Toevoegen om een DSN toe te voegen. Kies voor de Microsoft Access Driver(*.mdb).
6 Geef de DSN de naam dsnfilms. Wijs met de optie Selecteren onze database aan.
7 De omschrijving is niet verplicht. Bevestig met OK.
MS Access is gemakkelijk te koppelen met ASP, de scripttaal die we gaan gebruiken.
Hiervoor hebben we een webserver nodig van Microsoft.
Afbeelding 15.8
De Data Source Name.
15.3.3De webserver
Onder Windows draait een zogeheten IIS-webserver (Internet Information Servicesserver). Deze is werkzaam in de map C:\Inetpub op uw harde schijf. Hiertoe moet u
wel in het bezit zijn van Windows XP Pro of een soortgelijke (professionele) editie. De
Home Editie kent geen ingebouwde webserver. In Windows Vista Home Basic Edition
en Vista Starter Edition is er helaas ook niet in IIS voorzien. We gaan er voor deze oefening vanuit dat u de beschikking hebt over IIS.
In de map Inetpub kunt u onder andere ASP vinden. De map die onze databasetoepassing kan publiceren, is de map wwwroot. Plaats een submap met de naam Dreamweaverfilms in deze map. We gaan nu in Dreamweaver een sitemap aanmaken die verwijst
naar deze map in de webserver.
321
DB_DRWCS3_boek.indb 321
10/22/07 16:32:58
Dreamweaver CS3 de basis
Afbeelding 15.9
Is de Inetpub aanwezig op uw systeem?
Toch een webserver in de Home Edition
De website www.multidesk.be/artikels/artikel/000105/ toont een artikel waarin wordt gesteld
dat u toch een IIS-webserver onder de Home Edition kunt draaien. Het gerucht gaat dat de
webserver wel aanwezig is in deze editie, maar simpelweg niet is geactiveerd.
Andere webservers zijn bijvoorbeeld:
Apache voor het gebruik van PHP, standaard aanwezig in MacOS X;
Jakarta voor het gebruik van Java;
SUNOne voor het gebruik van Java;
ColdFusion Enterprise Server voor CFML.
Afbeelding 15.10
Voor Vista is IIS 7.0 webserver ontwikkeld.
322
DB_DRWCS3_boek.indb 322
10/22/07 16:32:59
15 Een database koppelen in Dreamweaver CS3
Afbeelding 15.11
De IIS 7.0 webserver
15.3.4De sitemap in Dreamweaver
Eerder in dit boek hebt u al een sitemap opgezet, maar deze was nog niet geschikt
voor een databasekoppeling.
Oefening 15.2
De sitemap geschikt maken voor de filmdatabase
1 Open Dreamweaver CS3 en kies Site > Nieuwe Site...
2 Geef als naam Dreamweaverfilms op voor de site, zie afbeelding 15.12.
3 Nu wijzen we de juiste technologie aan: kies voor ASP VBScript.
4 Kies vervolgens de map uit die we zojuist hebben aangemaakt in de webserver: Dreamweaverfilms, zie afbeelding 15.13.
5 Klik nu op Volgende en controleer of de link http://localhost/dreamweaverfilms/ wordt vermeld.
6 Klik door met Volgende totdat u de definitie kunt bevestigen. Klik op OK. De omgeving staat nu
klaar.
15.3.5De interface in Dreamweaver
In Dreamweaver gaan we nu het ontwerp maken voor een dynamisch overzicht van de
films in de database.
323
DB_DRWCS3_boek.indb 323
10/22/07 16:33:00
Dreamweaver CS3 de basis
Afbeelding 15.12
Een Site aanmaken.
Afbeelding 15.13
Is de juiste map aanwezig?
324
DB_DRWCS3_boek.indb 324
10/22/07 16:33:02
15 Een database koppelen in Dreamweaver CS3
Oefening 15.3
Interface ontwerpen voor filmdatabase
1 Sla het document op als overzicht.asp.
2 Plaats het in de projectmap op de webserver. Pas dan de titel aan en voer de gewenste paginaeigenschappen in.
3 Voeg een tabel in van vier kolommen en drie rijen en maak de tabel op met het paneel Eigenschappen.
15.3.6Content plaatsen
De interface staat nu klaar. In de tabel kunnen we straks de dynamische content slepen. Eerst zullen we echter de koppeling in Dreamweaver actief moeten maken.
Oefening 15.4
Databasekoppeling in Dreamweaver actief maken
1 Activeer het paneel Toepassingen en selecteer de tab Databases.
Afbeelding 15.14
De DSN koppelen.
2 Noem de verbinding connfilms en selecteer onze dsnfilms als DSN.
3 Bevestig met OK. De databaseverbinding wordt nu zichtbaar in het paneel, zie afbeelding 15.15.
4 Activeer de tab Bindingen en klik op het zwarte plusteken.
7 Neem de gegevens over van afbeelding 15.16 en bevestig met OK.
8 Sleep nu de dynamische inhoud uit Bindingen in de tabelcellen.
9 Plaats op de bovenste rij van de tabel de velden ID, Titel, Genre en Waardering.
10 Test de koppeling met Voorvertoning in de browser of druk op functietoets F12.
Sluit eventueel Dreamweaver af als u een foutmelding krijgt (File already in use). Het is wat dat
betreft belangrijk dat u alle updates hebt geïnstalleerd voor uw besturingssysteem. U ziet nu nog
325
DB_DRWCS3_boek.indb 325
10/22/07 16:33:02
Dreamweaver CS3 de basis
Afbeelding 15.15
De verbinding is zichtbaar.
Afbeelding 15.16
De recordset om bij Bindingen gegevens op te halen.
Afbeelding 15.17
De tabel voor de dynamische content.
326
DB_DRWCS3_boek.indb 326
10/22/07 16:33:03
15 Een database koppelen in Dreamweaver CS3
maar één record. We zullen de dynamische content moeten herhalen om alle vijf de films te kunnen zien.
Afbeelding 15.18
De tabel met database-inhoud.
Selecteer de rij met de dynamische inhoud en klik op de tab Server gedragingen in het paneel
Toepassing. Klik vervolgens op het zwarte plusteken en kies voor Rijen herhalen. Laat de vijf
records zien en bevestig met OK. Bekijk het dynamische resultaat in de browser.
Paul Vreke, webontwikkelaar, gebruikt dreamweaver
Paul Vreke, webontwikkelaar van CC Internet & Communicatie (CCIC) over het maken van databasetoepassingen met Dreamweaver: “Het is vooral de eenvoud. Met wat basiskennis kom
je een heel eind in Dreamweaver. Je hebt alleen de inloggegevens, de naam van de database
en wat overige gegevens nodig en je kunt een toepassing bouwen. Toepassingen zoals de
automatische navigatie door de database zijn indrukwekkend snel te maken. Het is een hoop
klik-en-sleep (drag and drop), maar zeker stukken sneller dan met de hand coderen. Als je de
kennis hebt om toch handmatig een en ander te programmeren, kun je in de codeweergave
gemakkelijk een en ander opsporen en oplossen en eventueel de toepassing met de hand nog
geavanceerder maken.”
Praktijkvoorbeeld
De keuze van de database en de praktijk
Het kiezen van een database is een lastige klus. Indien u een juiste keuze maakt, kunt
u met uw databasegestuurde website schaalbaar werken. Indien de keuze niet geheel
op de toekomst gericht blijkt, dan zult u een keer vastlopen met de mogelijkheden. De
keuze is van verschillende factoren afhankelijk. We kijken hier vooral naar de toekomst
en de eventueel te verwachten groei van uw website of webtoepassing.
Uzelf eerst vragen stellen
Voordat u bewust een databasekeuze maakt, zijn er een aantal vragen die u in acht
moet nemen:
Wat is het budget dat u hebt voor een database(licentie) of programmering?
Hoe is de schaalbaarheid van de database?
327
DB_DRWCS3_boek.indb 327
10/22/07 16:33:04
Praktijkvoorbeeld
Dreamweaver CS3 de basis
Welke kennis hebt u van de database om bijvoorbeeld in de toekomst uitbreidingen
toe te voegen aan uw applicatie?
Voor het web bestaat er een aantal uitstekende databases. Deze zijn beschikbaar voor
bijvoorbeeld een Microsoft-omgeving of voor het draaien op een Unix- of Linux-machine. Als u op dit moment op een Windows-machine werkt, dan ligt het voor de hand dat
u een database kiest die daaronder draait. Indien u bijvoorbeeld onder MacOS X werkt,
dan wordt dit als een Unix-machine gezien, aangezien de onderlaag van MacOSX het
besturingssysteem Unix is.
Een database van Microsoft: gemakkelijk beschikbaar
Elke database vereist een zogenaamde ‘omgeving’ waarin deze draait. De omgeving
is eigenlijk de server waar de database op kan draaien en functioneren. Indien u kiest
voor een database van Microsoft dan zal de omgeving ook een Microsoft-omgeving
moeten zijn.
Microsoft kent de databases:
MS Access, dat onderdeel is van een professionele versie van MS Office;
MS SQL Server, die als volwassen versie van MS Access wordt gebruikt op de websites van bijvoorbeeld Wehkamp en Free Record Shop.
Voor de koppeling van een Microsoft-database hebt u weinig kennis nodig. Microsoft
maakt het de gebruiker zeer gemakkelijk door het eenvoudige gebruik van de databases
MS Access en MS SQL. Op de website www.asp.net kunt u een gratis versie van ASP.
NET, inclusief een probeerversie van MS SQL Server downloaden.
Een database die op Unix draait: veelal gratis
Op de besturingssystemen Unix of Linux draaien gratis databasesystemen zoals PostgreSQL of MySQL. Indien u werkt op een Mac, dan zult u een van de database moeten
gebruiken die op een Unix- of Linux-systeem draaien. Microsoft-databases zijn ongeschikt voor de MacOS X-omgeving.
Beide genoemde databases zijn gratis. De databases zijn zoals dat heet open-source.
Zo kunt u op www.postgresql.org de database downloaden en eventuele handleidingen
bekijken. Om deze gratis databases aan te maken hebt u speciale adminsoftware nodig.
Deze kunt u bijvoorbeeld – net als de database zelf – downloaden van www.mysql.com.
Een bekend beheerprogramma voor MySQL-databases is bijvoorbeeld PhpMyAdmin(.
net). Naast de genoemde populaire databases zijn er nog veel meer databases zoals
Filemaker Pro, Oracle en diverse varianten van SQL-databases. Voordat u aan de slag
gaat met databasekoppelingen op het internet zou ik u een training willen aanbevelen in
de door u gekozen database en serverside-scripttaal of een van de vele Pearson-boeken te raadplegen die over dit onderwerp zijn uitgekomen.
328
DB_DRWCS3_boek.indb 328
10/22/07 16:33:05