een dAtAbASe koppelen In dreAmweAver cS3 · 2008-02-12 · dreAmweAver cS3 de basis 15.3 een...

15een�dAtAbASe�koppelen�In�

dreAmweAver�cS3de�belangrijkste�punten�van�hoofdstuk�15

Databasetechniekengebruiken.

Deeigenschappenvaneendatabaseinstellen.

Databasetechniekengebruiken.

Deeigenschappenvaneendatabaseinstellen.

DB_DRWCS3_boek.indb 312 10/22/07 16:32:47

15een�dAtAbASe�koppelen�In�

dreAmweAver�cS3

wat�leert�u�in�dit�hoofdstuk?

Watdatabasetechniekenzijn.

Wateendatabaseis.

Hoeeendatabasewordtgekoppeld.

Hoeeendatabasewordtopgebouwd.

EendatabasetoepassingmakeninDreamweaverCS3.


314

dreAmweAver�cS3� de�basis

� 15.1� een�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.1� benodigdheden

Anders dan bij een statische website hebt u voor een dynamische site de volgende za-ken 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 kun-nen 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.1Keuze maken in techniek.


315

15� een�database�koppelen�in�dreamweaver�cS3

Na het maken van een keuze van de databasetechnologie en het opzetten van de web- en databaseomgeving biedt Dreamweaver een groot aantal gratis toepassingen.

� 15.1.2� mogelijke�toepassingen�met�dreamweaver

Met Dreamweaver zijn onder andere de volgende toepassingen te maken: Product- of artikel invoersysteem; Dynamisch overzicht; Mutatiesysteem; Dynamische zoekopties.

Eventuele andere toepassingen kunt u vinden en downloaden op www.dmxzone.com.

� 15.1.3� de�databasekeuze

De keuze voor een database is erg belangrijk. Sommige databases kunt u gratis gebrui-ken, 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 gebruiks-

vriendelijkheid; MySQL, een gratis open-sourcedatabase die gemakkelijk gekoppeld kan worden en

veel op internet wordt gebruikt.

Afbeelding�15.2Een beheersysteem voor boeken.


316


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 data-baseproducent 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.4� de�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 Ac-cess-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.

Afbeelding�15.3Pagina’s toevoegen aan een nieuwssysteem.


317


NET (dot net) kan geavanceerde toepassingen bouwen en diverse soorten databa-ses 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.2� een�databasekoppeling�voorbereiden

Voordat we een database aan een website gaan koppelen, zullen we de nodige voorbe-reidingen 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

Dewebserverisdesoftwarediedescripttaalendedatabasekanpubliceren.Eenwebser-verisonderdeelvaneenhostingserverdiedegehelewebsitekanpubliceren.ZoheefteenwebservereenspecifieketaakombijvoorbeelddescripttaalASPtelatenzienindebrowser.Dewerkingvandewebserveriseenvoudig.DeserverleestbijvoorbeelddeASP-codeuiten‘vertaalt’ditopdewebservernaarHTML.ASPheeftineeneerderstadiumbijvoorbeeldgege-vensuiteenMSAccess-databaseuitgelezen.DeHTMLkanweerwordengepubliceerdindebrowser.


318


� 15.3� een�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) uitpro-beren. MacOS X ondersteunt geen ASP, maar daarentegen wel weer standaard PHP en MySQL.

Voor de oefening in de volgende paragraaf gaan we een met films gevulde MS Ac-cess-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.

Afbeelding�15.4Databasekoppelingen kunnen zeer complex zijn.

een�dAtAbASe

Eendatabaseiseenbestandwaarinweopeenspecialemaniergegevenskunnenopslaan.Eendatabasebevattabellenmetrijendiewerecordsnoemen.Iederrecordbevatopzijnbeurtvelden.Vooriederrecordineentabelisdebetekenisvanelkveldhetzelfde.Eentabelmetadresgegevensbevatbijvoorbeeldallemaalrecordsmetdeveldenadres,postcode,plaatsenzovoort.Eendatabasekanverschillendetabellenbevatten.


319


� 15.3.1� de�database�bekijken

In MS Access staat de met films gevulde database films.mdb klaar (zie afbeelding 15.6).

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.5Een filmdatabase aanleggen.

Afbeelding�15.6Een filmdatabasestructuur in MS Access.


320


tabel�15.1� Veldenindefilmdatabase

Id Filmtitel genre waardering

1 Crash Thriller 9

2 Hostel Horror 5

3 GuessWho Humor 8

4 FunwithDickandJane Humor 7

5 JohanCruijff:enunMomentoDado Sport 9

We hebben nu een database met vijf records (zie afbeelding 15.7).

� 15.3.2� de�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� EenDSNaanmaken

1 OpeninWindows(XP)hetconfiguratieschermviahetmenuStart.

2 Kiesvoordeoptieprestaties�en�onderhoud.

3 Kiesnudeoptiebeheer.

4 Kiesnuvoordeoptiegegevensbronnen�(odbc).HetdialoogvenstervoordeDSNverschijnt(zieafbeelding15.8).

Afbeelding�15.7Een filmdatabase met rijen of records.


321


5 KlikoptoevoegenomeenDSNtoetevoegen.Kiesvoordemicrosoft�Access�driver(*.mdb).

6 GeefdeDSNdenaamdsnfilms.WijsmetdeoptieSelecterenonzedatabaseaan.

7 Deomschrijvingisnietverplicht.Bevestigmetok.

MS Access is gemakkelijk te koppelen met ASP, de scripttaal die we gaan gebruiken. Hiervoor hebben we een webserver nodig van Microsoft.

� 15.3.3� de�webserver

Onder Windows draait een zogeheten IIS-webserver (Internet Information Services-server). 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 oe-fening vanuit dat u de beschikking hebt over IIS.

In de map Inetpub kunt u onder andere ASP vinden. De map die onze databasetoepas-sing kan publiceren, is de map wwwroot. Plaats een submap met de naam Dreamwea-verfilms in deze map. We gaan nu in Dreamweaver een sitemap aanmaken die verwijst naar deze map in de webserver.

Afbeelding�15.8De Data Source Name.


322


Afbeelding�15.9Is de Inetpub aanwezig op uw systeem?

toch�een�webServer�In�de�home�edItIon

Dewebsitewww.multidesk.be/artikels/artikel/000105/toonteenartikelwaarinwordtgestelddatutocheenIIS-webserveronderdeHomeEditionkuntdraaien.Hetgeruchtgaatdatdewebserverwelaanwezigisindezeeditie,maarsimpelwegnietisgeactiveerd.Anderewebserverszijnbijvoorbeeld:

ApachevoorhetgebruikvanPHP,standaardaanweziginMacOSX; JakartavoorhetgebruikvanJava; SUNOnevoorhetgebruikvanJava; ColdFusionEnterpriseServervoorCFML.

Afbeelding�15.10Voor Vista is IIS 7.0 webserver ontwikkeld.


323


� 15.3.4� de�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� Desitemapgeschiktmakenvoordefilmdatabase

1 OpenDreamweaverCS3enkiesSite>nieuwe�Site...

2 Geefalsnaamdreamweaverfilmsopvoordesite,zieafbeelding15.12.

3 Nuwijzenwedejuistetechnologieaan:kiesvoorASp�vbScript.

4 Kiesvervolgensdemapuitdiewezojuisthebbenaangemaaktindewebserver:dreamweaver-films, zieafbeelding15.13.

5 Kliknuopvolgendeencontroleerofdelinkhttp://localhost/dreamweaverfilms/wordtvermeld.

6 Klikdoormetvolgendetotdatudedefinitiekuntbevestigen.Klikopok.Deomgevingstaatnuklaar.

� 15.3.5� de�interface�in�dreamweaver

In Dreamweaver gaan we nu het ontwerp maken voor een dynamisch overzicht van de films in de database.

Afbeelding�15.11De IIS 7.0 webserver


324


Afbeelding�15.12Een Site aanmaken.

Afbeelding�15.13Is de juiste map aanwezig?


325


oefening�15.3� Interfaceontwerpenvoorfilmdatabase

1 Slahetdocumentopalsoverzicht.asp.

2 Plaatshetindeprojectmapopdewebserver.Pasdandetitelaanenvoerdegewenstepagina-eigenschappenin.

3 VoegeentabelinvanvierkolommenendrierijenenmaakdetabelopmethetpaneelEigen-schappen.

� 15.3.6� content�plaatsen

De interface staat nu klaar. In de tabel kunnen we straks de dynamische content sle-pen. Eerst zullen we echter de koppeling in Dreamweaver actief moeten maken.

oefening�15.4� DatabasekoppelinginDreamweaveractiefmaken

1 Activeerhetpaneeltoepassingenenselecteerdetabdatabases.

2 NoemdeverbindingconnfilmsenselecteeronzedsnfilmsalsDSN.

3 Bevestigmetok.Dedatabaseverbindingwordtnuzichtbaarinhetpaneel,zieafbeelding15.15.

4 Activeerdetabbindingenenklikophetzwarteplusteken.

7 Neemdegegevensovervanafbeelding15.16enbevestigmetok.

8 SleepnudedynamischeinhouduitBindingenindetabelcellen.

9 PlaatsopdebovensterijvandetabeldeveldenId,�titel,�genre�en�waardering.

10 TestdekoppelingmetVoorvertoningindebrowserofdrukopfunctietoetsF12.

SluiteventueelDreamweaverafalsueenfoutmeldingkrijgt(File already in use).Hetiswatdatbetreftbelangrijkdatualleupdateshebtgeïnstalleerdvooruwbesturingssysteem.Uzietnunog

Afbeelding�15.14De DSN koppelen.


326


Afbeelding�15.15De verbinding is zichtbaar.

Afbeelding�15.16De recordset om bij Bindingen gegevens op te halen.

Afbeelding�15.17De tabel voor de dynami-sche content.


327

15� een�database�koppelen�in�dreamweaver�cS3praktijkvoorbeeld

maaréénrecord.Wezullendedynamischecontentmoetenherhalenomallevijfdefilmstekun-nenzien.

SelecteerderijmetdedynamischeinhoudenklikopdetabServer�gedragingeninhetpaneelToepassing.Klikvervolgensophetzwarteplustekenenkiesvoorrijen�herhalen.Laatdevijfrecordszienenbevestigmetok.Bekijkhetdynamischeresultaatindebrowser.

de�keuze�vAn�de�dAtAbASe�en�de�prAktIjk

Hetkiezenvaneendatabaseiseenlastigeklus.Indienueenjuistekeuzemaakt,kuntumetuwdatabasegestuurdewebsiteschaalbaarwerken.Indiendekeuzenietgeheelopdetoekomstgerichtblijkt,danzultueenkeervastlopenmetdemogelijkheden.Dekeuzeisvanverschillendefactorenafhankelijk.Wekijkenhiervooralnaardetoekomstendeeventueelteverwachtengroeivanuwwebsiteofwebtoepassing.

uzelf�eerst�vragen�stellen

Voordatubewusteendatabasekeuzemaakt,zijnereenaantalvragendieuinachtmoetnemen:

Watishetbudgetdatuhebtvooreendatabase(licentie)ofprogrammering? Hoeisdeschaalbaarheidvandedatabase?

Afbeelding�15.18De tabel met database-inhoud.

pAul�vreke,�webontwIkkelAAr,�gebruIkt�dreAmweAver�

PaulVreke,webontwikkelaarvanCCInternet&Communicatie(CCIC)overhetmakenvanda-tabasetoepassingenmetDreamweaver:“Hetisvooraldeeenvoud.MetwatbasiskenniskomjeeenheeleindinDreamweaver.Jehebtalleendeinloggegevens,denaamvandedatabaseenwatoverigegegevensnodigenjekunteentoepassingbouwen.Toepassingenzoalsdeautomatischenavigatiedoordedatabasezijnindrukwekkendsneltemaken.Hetiseenhoopklik-en-sleep(drag and drop),maarzekerstukkensnellerdanmetdehandcoderen.Alsjedekennishebtomtochhandmatigeenenanderteprogrammeren,kunjeindecodeweergavegemakkelijkeenenanderopsporenenoplosseneneventueeldetoepassingmetdehandnoggeavanceerdermaken.”


328

dreAmweAver�cS3� de�basispr

aktij

kvoo

rbee

ld Welkekennishebtuvandedatabaseombijvoorbeeldindetoekomstuitbreidingentoetevoegenaanuwapplicatie?

Voorhetwebbestaatereenaantaluitstekendedatabases.DezezijnbeschikbaarvoorbijvoorbeeldeenMicrosoft-omgevingofvoorhetdraaienopeenUnix-ofLinux-machi-ne.AlsuopditmomentopeenWindows-machinewerkt,danligthetvoordehanddatueendatabasekiestdiedaaronderdraait.IndienubijvoorbeeldonderMacOSXwerkt,danwordtditalseenUnix-machinegezien,aangeziendeonderlaagvanMacOSXhetbesturingssysteemUnixis.

een�database�van�microsoft:�gemakkelijk�beschikbaar

Elkedatabasevereisteenzogenaamde‘omgeving’waarindezedraait.Deomgevingiseigenlijkdeserverwaardedatabaseopkandraaienenfunctioneren.IndienukiestvooreendatabasevanMicrosoftdanzaldeomgevingookeenMicrosoft-omgevingmoetenzijn.

Microsoftkentdedatabases: MSAccess,datonderdeelisvaneenprofessioneleversievanMSOffice; MSSQLServer,diealsvolwassenversievanMSAccesswordtgebruiktopdeweb-

sitesvanbijvoorbeeldWehkampenFreeRecordShop.

VoordekoppelingvaneenMicrosoft-databasehebtuweinigkennisnodig.MicrosoftmaakthetdegebruikerzeergemakkelijkdoorheteenvoudigegebruikvandedatabasesMSAccessenMSSQL.Opdewebsitewww.asp.netkuntueengratisversievanASP.NET,inclusiefeenprobeerversievanMSSQLServerdownloaden.

een�database�die�op�unix�draait:�veelal�gratis

OpdebesturingssystemenUnixofLinuxdraaiengratisdatabasesystemenzoalsPost-greSQLofMySQL.IndienuwerktopeenMac,danzultueenvandedatabasemoetengebruikendieopeenUnix-ofLinux-systeemdraaien.Microsoft-databaseszijnonge-schiktvoordeMacOSX-omgeving.

Beidegenoemdedatabaseszijngratis.Dedatabaseszijnzoalsdatheetopen-source.Zokuntuopwww.postgresql.orgdedatabasedownloadeneneventuelehandleidingenbekijken.Omdezegratisdatabasesaantemakenhebtuspecialeadminsoftwarenodig.Dezekuntubijvoorbeeld–netalsdedatabasezelf–downloadenvanwww.mysql.com.EenbekendbeheerprogrammavoorMySQL-databasesisbijvoorbeeldPhpMyAdmin(.net).NaastdegenoemdepopulairedatabaseszijnernogveelmeerdatabaseszoalsFilemakerPro,OracleendiversevariantenvanSQL-databases.Voordatuaandeslaggaatmetdatabasekoppelingenophetinternetzouikueentrainingwillenaanbevelenindedoorugekozendatabaseenserverside-scripttaalofeenvandevelePearson-boe-kenteraadplegendieoverditonderwerpzijnuitgekomen.


een dAtAbASe koppelen In dreAmweAver cS3 · 2008-02-12 · dreAmweAver cS3 de basis 15.3 een...

Documents

Transcript of een dAtAbASe koppelen In dreAmweAver cS3 · 2008-02-12 · dreAmweAver cS3 de basis 15.3 een...