Klik hier om Silverlight te installeren*
Nederland|Sitemap
Microsoft
Marketing 
|Contact
Marketing - Verhoog uw omzet

Zelf een webwinkel bouwen - deel 2

Veel ondernemers zijn nog altijd op zoek naar een website waarmee geld valt te verdienen. Daarom laten wij u in deze serie artikelen zien hoe u met behulp van Microsoft Access en FrontPage zelf een eenvoudige webwinkel kunt bouwen. In het eerste deel van deze reeks hebben wij u laten zien hoe u een website bouwt en een productdatabase ontwikkelt en vult.
 
In dit tweede deel leggen wij uit hoe u de producten uit de database op de webpagina's kunt tonen. Ook ontwikkelt u een eenvoudig systeem voor het plaatsen van orders. Om dit te kunnen doen dient u wel over een (lokale) webserver te beschikken.
 
Maak een databaseverbinding
Zoekopdracht wijzigen
Een detailpagina maken
Koppeling
Een bestelling mogelijk maken
Bestelpagina
Een stukje programmeren

Maak een databaseverbinding

De website die u eerder in FrontPage gemaakt hebt bestaat uit de pagina's default.asp (of default.htm), contact.htm en zoeken.htm. Verder hebt u als het goed is een Access-database geïmporteerd. Deze staat in de map /fpdb. Tenslotte is er nog een map /images met de afbeeldingen die u op de website wilt laten zien. Op de pagina zoeken.htm komt uw eerder in Access gemaakte database te staan. Deze wordt door FrontPage gekoppeld met behulp van een wizard Databaseresultaten. De producten zullen in een tabel verschijnen.

 

De tabelrijen zijn opgedeeld in groepen van vijf zodat de gebruiker geen ellenlange lijst te zien krijgt. U hoeft geen letter te programmeren: alles wordt door FrontPage gedaan. Handel als volgt:

 

  1. Open de website in FrontPage 2003.
  2. In de mappenlijst ziet u zoeken.htm en contact.htm staan. Deze gaan we eerst hernoemen naar .asp. Klik met de rechter muisknop op de bestandsnaam zoeken.htm en kies voor Naam wijzigen. Vervang vervolgens htm door asp en druk op Enter. Doe dit ook voor het bestand contact.htm.
  3. Open de pagina zoeken.asp en ga op een nieuwe, lege regel staan.
  4. Kies Invoegen >> Database >> Resultaten. De wizard Databaseresultaten wordt geopend.
  5. Controleer of een bestaande databaseverbinding met de naam Database1 wordt gebruikt. Deze verbinding is automatisch aangemaakt op het moment dat u de Access-database importeerde in de FrontPage-website. Zo niet, maak dan een nieuwe databaseverbinding (dit doet u door de optie Een nieuwe databaseverbinding gebruiken te selecteren en vervolgens Maken te kiezen. Daarna kiest u Database >> Toevoegen >> Bladeren. Selecteer fpdb\boeken.mdb en kies OK >> OK >> Controleren (er moet nu een vinkje verschijnen) >> OK. Ga daarna verder met de optie Een bestaande databaseverbinding gebruiken.
  6. Klik op Volgende.
  7. Gebruik de recordbron boeken (dit is de enige tabel in de database) en klik op Volgende.
  8. Klik op de knop Lijst bewerken.
  9. Verwijder de velden Staat, Uitgever, Jaarvanuitgave en ISBN uit de rechterlijst en klik op OK.
  10. Klik op Volgende.
  11. In het scherm voor de opmaakopties hoeft u niets te wijzigen, klik op Volgende.
  12. In het laatste scherm kunt u de records in groepen laten splitsen. Houd het standaard aantal van 5 records aan en klik op Voltooien.
  13. Sla de pagina op en sluit vervolgens de pagina.
 

Nu kunt u op uw lokale webserver kijken of de databaseresultaten goed worden weergegeven. Als de databaseresultaten niet verschijnen is de webserver mogelijk niet goed geconfigureerd. Let erop dat de FrontPage Serverextensies en ASP-ondersteuning geïnstalleerd zijn en er rechten voor het uitvoeren van scripts zijn ingesteld.

 

Schermafbeelding: Wizard Databaseresultaten

 
 

Zoekopdracht wijzigen

Er is nog een probleem met de databasekoppeling. De prijzen van de boeken worden in de laatste kolom niet goed weergegeven. Dit is oplosbaar door de door FrontPage automatisch gemaakte query (zoekopdracht) te wijzigen:

 

  1. Open de pagina zoeken.asp.
  2. Dubbelklik op Dit is het begin van een regio met databaseresultaten en klik eventueel op OK.
  3. Klik op Volgende.
  4. Klik op Aangepaste query >> Bewerken.
  5. Vervang de bestaande tekst door:

    Select ProductId, Titel, Productomschrijving, Auteur, Format([Prijs] '#.00') as Boekprijs From Boeken
     
  6. Klik op OK en maak de wizard verder af. 
  7. Klik op het veld <<Boekprijs>> en kies Rechts uitlijnen.
  8. Sla de pagina op en bekijk deze opnieuw in Internet Explorer. Druk indien nodig op F5 om de pagina te verversen.
 

Schermafbeelding: Aangepaste query "SELCT ProductID, Titel, Productomschrijving, Auteur, Format([Prijs},'#.00') as Boekprijs FROM Boeken"

 

Een detailpagina maken

U hebt op de pagina Zoeken & Bestellen nu een mooie tabel met alle producten. Nu is nog een systeem nodig waarmee kopers meer informatie over een product kunnen krijgen en eventueel een bestelling kunnen doen. De eerste stap is het maken van een detailpagina met alle informatie over het product. Dat doet u als volgt:
 
  1. Klik op Navigatie, klik met de rechtermuisknop op Zoeken en kies Nieuw >> Pagina.
  2. Klik met de rechtermuisknop op Nieuwe pagina 1 en kies Naam wijzigen. Geef de pagina de naam Details en druk op Enter.
  3. Klik met de rechtermuisknop op Details en kies Opgenomen in koppelingsbalken. Dit voorkomt dat de pagina kan worden opgevraagd zonder gegevens (de pagina wordt donkergrijs).
  4. Klik met de rechtermuisknop op de bestandsnaam details.htm (als deze er niet staat klik dan op een bestand en druk op F5 om de lijst te vernieuwen) en kies voor Naam wijzigen. Vervang vervolgens htm door asp en druk op Enter.
  5. Open de pagina door er op te dubbelklikken en kies Invoegen >> Database >> Resultaten.
  6. Klik twee keer op Volgende en kies dan Meer opties.
  7. Kies Criteria >> Toevoegen.
  8. Selecteer het veld ProductId. In het scherm staat nu {EN}ProductIdIs gelijk aan ProductId. Klik op OK.
  9. Kies OK >> OK >> Volgende.
  10. Selecteer bij de opmaakopties Lijst - een veld per item uit de vervolgkeuzelijst.
  11. Verwijder het vinkje bij Horizontale scheiding tussen records plaatsen.
  12. Selecteer bij Lijstopties de optie Tabel en klik op Volgende.
  13. Kies Alle records tegelijk weergeven en zet de optie Zoekformulier toevoegen uit.
  14. Klik op Voltooien en sla de pagina op.
 

Koppeling

De volgende stap is het aan elkaar koppelen van de pagina's zoeken.asp en details.asp. Dat doet u als volgt:
 
  1. Open in FrontPage de pagina zoeken.asp.
  2. Klik op het veld <<ProductId>> om het te selecteren.
  3. Klik op de knop Hyperlink invoegen.
  4. Selecteer de pagina details.asp.
  5. Klik op de knop Parameters.
  6. Klik op Toevoegen.
  7. Selecteer ProductId uit de bovenste vervolgkeuzelijst. In de onderste lijst komt een waarde te staan. Klik op OK.
  8. Klik op OK om het dialoogvenster Hyperlinkparameters te sluiten en nogmaals op OK om het venster Hyperlink invoegen te sluiten.
  9. Bewaar de pagina en sluit deze.
 
Het veld ProductId is nu voorzien van een 'intelligente' hyperlink. De gebruiker gaat via de link naar de pagina details.asp. Daarbij wordt de productcode uit de database meegegeven zodat de pagina de juiste gegevens kan tonen.
 
Schermafbeelding: Hyperlinkparameters
 

Een bestelling mogelijk maken

De laatste stap is het bestellen van het boek dat u in de detailpagina ziet. Dit houdt in dat u de pagina details.asp koppelt aan een nieuw te maken pagina bestellen.asp. Handel daarvoor als volgt:
 
  1. Klik op Details en met de rechtermuisknop op Zoeken.
  2. Kies Nieuw >> Pagina.
  3. Klik met de rechtermuisknop op Nieuwe pagina 1 en kies Naam wijzigen. Geef de pagina de naam Bestellen en druk op Enter.
  4. Klik met de rechtermuisknop op Bestellen (als deze er niet staat klik dan op een bestanden en druk op F5 om de lijst te vernieuwen) en kies Opgenomen in koppelingsbalken. Dit voorkomt dat de pagina kan worden opgevraagd zonder gegevens (de pagina wordt donkergrijs).
  5. Klik met de rechtermuisknop op de bestandsnaam bestellen.htm en kies voor Naam wijzigen. Vervang vervolgens htm door asp en druk op Enter.
  6. Sluit de pagina en sla de wijzigingen op. U gaat de pagina later verder bewerken.
  7. Open de pagina details.asp.
  8. Klik op <<Titel>> om dit veld te selecteren.
  9. Klik op de knop Hyperlink invoegen. We gebruiken nu dezelfde truc als hierboven voor het toevoegen van een criterium.
  10. Selecteer de pagina bestellen.asp.
  11. Klik op de knop Parameters.
  12. Klik op Toevoegen.
  13. Selecteer ProductId uit de bovenste vervolgkeuzelijst. In de onderste lijst komt een waarde te staan. Klik driemaal op OK.
  14. Het veld <<Titel>> is nu voorzien van een hyperlink naar de bestelpagina, waarbij ook de waarde van het veld ProductId wordt doorgegeven.
  15. Sla de pagina op en sluit deze.
 

Bestelpagina

Tenslotte maakt u de pagina bestellen.asp af. Deze gaat een formulier bevatten waarmee het artikel besteld wordt. Een betaalsysteem wordt nog niet geïmplementeerd. Handel als volgt:
 
  1. Open de pagina bestellen.asp.
  2. Voeg onder de paginatitel een formulier in via Invoegen >> Formulier >> Formulier.
  3. Druk op Enter en ga een regel naar boven.
  4. Voeg een tabel in van 7 rijen en 2 kolommen.
  5. Vul in de linker kolom deze teksten in:
rij 1 Productnummer
rij 2 Mijn naam:
rij 3 Mijn adres:
rij 4 Mijn e-mailadres:
rij 5 Ik betaal:
  1. Voeg in de rechter kolom vier tekstvakken in via Invoegen >> Formulier >> Tekstvak. Geef de vakken de namen ProductId, Naam, Adres en Emailadres. U kunt de naam aanpassen door op het vak te dubbelklikken.
  2. Voeg in de volgende rij twee keuzerondjes in: één voor Vooruit op rekening xx.xx.xx.xxx ten name van Webwinkel en één voor Onder rembours. Geef deze betaling als Groepsnaam en als Waarde respectievelijk de namen Vooruit en Rembours. 
  3. Verplaats de knoppen Verzenden en Invoer wissen naar de laatste tabelrij.
  4. Klik met de rechtermuisknop in de tabel en kies Eigenschappen van formulier.
  5. Kies Kopiëren naar, voeg in het vak E-mailadres uw e-mailadres toe en klik op OK.
  6. Sla de pagina bestellen.asp op.
     

Een stukje programmeren

Er is nog één probleem. U krijgt de juiste productcode wel door vanuit de pagina details.asp, maar hoe krijgt u deze code in het formulier? Helaas is daarvoor binnen FrontPage geen manier voor te verzinnen. U moet een klein stukje programmeren. Hieronder ziet u een deel van de inhoud van de webpagina zoals deze in de weergave Code verschijnt. De vetgedrukte tekst moet u op de juiste plaats intypen, waarna u de pagina opnieuw opslaat en test:
 
<td>Productnummer:</td>
<%
    boekid = request.querystring("productid")
%
>
<td>
    <input type="text" name="ProductId" size="20" value=<%=boekid%>>
</td>
 
Schermafbeelding: Microsoft FronPage - Programmeren.asp
 

Tot slot

In dit tweede artikel hebt u intelligente webpagina's gemaakt die hun inhoud uit een database halen. Het is nu zelfs mogelijk een detailpagina te tonen voor het gewenste artikel. Het bestellen hiervan gaat via een eenvoudig formulier. De betaling kan vooruit of onder rembours worden gedaan. In het laatste artikel uit deze serie gaan we een online betaalsysteem toevoegen.
 

Gerelateerde artikelen

 
Abonneer u op de nieuwsbrief
.
Hulp in gebruik
» Haal het optimale uit uw programma's met deze handige tips

©2009 Microsoft Corporation. Alle rechten voorbehouden. Contact opnemen |Gebruiksvoorwaarden |Handelsmerken |Privacyverklaring