Hoofd- en detailpagina's maken in Dreamweaver

Laatst bijgewerkt op 25 apr. 2024

Leer hoe je een hoofdpagina bouwt in Dreamweaver en koppelingen maakt naar een detailpagina.

Notitie

De gebruikersinterface van nieuwere versies van Dreamweaver is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in nieuwere versies van Dreamweaver. Meer informatie vindt u in dit artikel.

Over hoofd- en detailpagina's

Hoofd- en detailpagina's zijn sets van pagina's die worden gebruikt om recordsetgegevens te organiseren en weer te geven. Deze pagina's bieden een bezoeker van je site zowel een overzicht als een gedetailleerde weergave. De hoofdpagina toont alle records en bevat koppelingen naar detailpagina's die aanvullende informatie over elk record weergeven.

Hoofdpagina

Detailpagina

Je kunt hoofd- en detailpagina's bouwen door een dataobject in te voegen om een hoofdpagina en detailpagina in één handeling te maken of door servergedragingen te gebruiken om de hoofd- en detailpagina's op een meer aangepaste manier te bouwen. Wanneer je servergedrag gebruikt om hoofd- en detailpagina's te bouwen, maak je eerst een hoofdpagina om de records weer te geven en voeg je vervolgens koppelingen toe van de lijst naar de detailpagina's.

Een hoofdpagina maken

Voordat je begint, zorg je ervoor dat je een databaseverbinding voor je site definieert.

Om een lege pagina te maken, selecteer je Bestand > Nieuw > Lege pagina, selecteer je een paginatype en klik je op Maken.Deze pagina wordt de hoofdpagina.
Definieer een recordset.

In het paneel Bindingen (Venster > Bindingen), klik je op de Plus (+) button, selecteer je Recordset en kies je opties. Klik op Geavanceerd als u uw eigen SQL-instructie wilt schrijven.

Zorg ervoor dat de recordset alle tabelkolommen bevat die je nodig hebt om je hoofdpagina te maken. De recordset moet ook de tabelkolom bevatten die de unieke sleutel van elke record bevat—dat wil zeggen, de record-ID kolom. In het volgende voorbeeld bevat de kolom Code de unieke sleutel van elke record.

Recordsetkolommen die zijn geselecteerd voor een hoofdpagina

Doorgaans extracteert de recordverzameling op de hoofdpagina enkele kolommen uit een database tabel, terwijl de recordverzameling op de detailpagina meer kolommen uit dezelfde tabel extraheert om extra detail te bieden.

De recordverzameling kan tijdens runtime door de gebruiker worden gedefinieerd. Zie Zoek- en resultatenpagina's bouwen voor meer informatie.

Een dynamische tabel invoegen om de records weer te geven.

Plaats het invoegpunt waar je de dynamische tabel op de pagina wilt laten verschijnen. Selecteer Invoegen > Gegevensobjecten > Dynamische gegevens > Dynamische tabel, stel de opties in en klik op OK.

Als je record-ID's niet aan gebruikers wilt tonen, kun je de kolom uit de dynamische tabel verwijderen. Klik ergens op de pagina om de focus naar de pagina te verplaatsen. Beweeg de cursor naar de bovenkant van de kolom in de dynamische tabel totdat de kolomcellen rood omlijnd zijn en klik om de kolom te selecteren. Druk op Delete om de kolom uit de tabel te verwijderen.

Nadat je de hoofdpagina hebt gemaakt en de recordverzameling hebt toegevoegd, maak je koppelingen die de detailpagina openen. Je wijzigt vervolgens de koppelingen om de ID's door te geven van de records die de gebruiker selecteert. De detailpagina gebruikt deze ID om de gevraagde record in de database te vinden en weer te geven.

Notitie

Je maakt koppelingen om pagina's bij te werken volgens hetzelfde proces.De resultatenpagina lijkt op een hoofdpagina en de updatepagina lijkt op een detailpagina.

Open de detailpagina en geef een record-ID door (ColdFusion, PHP)

Selecteer in de dynamische tabel de content plaatshouder voor tekst die als koppeling dient.
Koppelingen die van toepassing zijn op de tijdelijke aanduiding voor tekst, zijn geselecteerd.

Klik in de Property inspector op het mappictogram naast het vak Koppeling.
Zoek en selecteer de detailpagina. De detailpagina verschijnt in het vak Koppeling in de Property inspector.

In de dynamische tabel wordt de geselecteerde tekst weergegeven als gekoppeld. Wanneer de pagina op de server wordt uitgevoerd, wordt de koppeling toegepast op de tekst in elke tabelrij.

Selecteer op de hoofdpagina de koppeling in de dynamische tabel.
(ColdFusion) Voeg in het vak Koppeling in de Property inspector de volgende tekenreeks toe aan het einde van de URL:

?recordID=#recordsetName.fieldName#

Het vraagteken vertelt de server dat wat volgt een of meer URL-parameters zijn. Het woord recordID is de naam van de URL-parameter (je kunt elke naam verzinnen die je wilt). Noteer de naam van de URL-parameter omdat je deze later in de detailpagina gebruikt.

De uitdrukking na het gelijkteken is de waarde van de parameter. In dit geval wordt de waarde gegenereerd door een ColdFusion-uitdrukking die een record-ID uit de recordset retourneert. Er wordt een ander ID gegenereerd voor elke rij in de dynamische tabel. Vervang in de ColdFusion-uitdrukking recordsetName door de naam van je recordset en vervang fieldName door de naam van het veld in je recordset dat elke record uniek identificeert. In de meeste gevallen bestaat het veld uit een record-ID nummer. In het volgende voorbeeld bestaat het veld uit unieke locatie codes.

locationDetail.cfm?recordID=#rsLocations.CODE#

Wanneer de pagina wordt uitgevoerd, worden de waarden van het CODE-veld van de recordset ingevoegd in de corresponderende rijen in de dynamische tabel. Als de verhuurlocatie Canberra, Australië bijvoorbeeld de code CBR heeft, wordt de volgende URL gebruikt in de Canberra-rij in de dynamische tabel:

locationDetail.cfm?recordID=CBR

(PHP) Voeg in het veld Link in de Property inspector de volgende tekenreeks toe aan het einde van de URL:

?recordID=<?php echo $row_recordsetName['fieldName']; ?>

Het vraagteken vertelt de server dat wat volgt een of meer URL-parameters zijn. Het woord recordID is de naam van de URL-parameter (je kunt elke naam gebruiken die je wilt). Noteer de naam van de URL-parameter omdat je deze later op de detailpagina zult gebruiken.

De expressie na het gelijkteken is de waarde van de parameter. In dit geval wordt de waarde gegenereerd door een PHP- expressie die een record-ID uit de recordset retourneert. Voor elke rij in de dynamische tabel wordt een andere ID gegenereerd. Vervang in de PHP-expressie recordsetName door de naam van je recordset en vervang fieldName door de naam van het veld in je recordset dat elke record uniek identificeert.In de meeste gevallen bestaat het veld uit een record-ID- nummer. In het volgende voorbeeld bestaat het veld uit unieke locatie- codes.

locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

Wanneer de pagina wordt uitgevoerd, worden de waarden van het CODE-veld van de recordset ingevoegd in de corresponderende rijen in de dynamische tabel. Als de verhuurlocatie Canberra, Australië bijvoorbeeld de code CBR heeft, wordt de volgende URL gebruikt in de Canberra-rij in de dynamische tabel:

locationDetail.php?recordID=CBR

Sla de pagina op.

Open de detailpagina en geef een record-ID door (ASP)

Selecteer de dynamische content die ook als koppeling moet fungeren.
Klik in het deelvenster Servergedragingen (Venster > Servergedragingen) op de knop Plus (+) en selecteer Ga naar detailpagina uit het pop-upmenu.
Klik in het vak Detailpagina op Bladeren en zoek de pagina.
Specificeer de waarde die je naar de detailpagina wilt doorgeven door een recordset en een kolom te selecteren uit de pop-upmenus Recordset en Kolom. Meestal is de waarde uniek voor de record, zoals de unieke sleutel-ID van de record.
Geef indien gewenst bestaande paginaparameters door aan de detail- pagina door de opties URL-parameters of Formulierparameters te selecteren.
Klik op OK.

De geselecteerde tekst wordt met een speciale koppeling omkaderd. Wanneer de gebruiker op de koppeling klikt, geeft het servergedrag Ga naar detailpagina een URL-parameter met de record-ID door aan de detailpagina.Als de URL-parameter bijvoorbeeld id heet en de detailpagina customerdetail.asp heet, ziet de URL er ongeveer als volgt uit wanneer de gebruiker op de koppeling klikt:

http://www.mysite.com/customerdetail.asp?id=43

Het eerste deel van de URL, http://www.mysite.com/customerdetail.asp, opent de detailpagina. Het tweede deel, ?id=43, is de URL-parameter. Deze vertelt de detailpagina welke record moet worden opgehaald en weergegeven. De term id is de naam van de URL-parameter en 43 is de waarde ervan. In dit voorbeeld bevat de URL-parameter het ID-nummer van de record, 43.

Zoek en toon de gevraagde record op de detailpagina

Om de record te tonen die door de hoofdpagina is aangevraagd, moet je een recordset definiëren die een enkele record bevat en de recordsetkolommen aan de detailpagina koppelen.

Schakel over naar de detailpagina. Als je nog geen detailpagina hebt, maak dan een lege pagina (Bestand > Nieuw).
Klik in het deelvenster Bindingen (Venster > Bindingen) op de plusknop (+) en selecteer Recordset (Query) of DataSet (Query) in het pop-upmenu.

Het dialoogvenster Eenvoudige recordset of gegevensset wordt geopend. Als het geavanceerde dialoogvenster wordt weergegeven, klik dan op Eenvoudig.

Geef de recordset een naam en selecteer een databron en de databasetabel die gegevens aan je recordset zal leveren.
Selecteer in het gebied Kolommen de tabelkolommen die je in de recordset wilt opnemen.

De recordset kan identiek zijn aan of verschillen van de recordset op de hoofdpagina. Gewoonlijk heeft een detailpagina-recordset meer kolommen om meer details weer te geven.

Als de recordsets verschillen, zorg er dan voor dat de recordset op de detailpagina ten minste één kolom gemeenschappelijk heeft met de recordset op de hoofdpagina. De gemeenschappelijke kolom is meestal de record-id-kolom, maar het kan ook het samenvoegveld van gerelateerde tabellen zijn.

Om alleen enkele van de tabelkolommen in de recordset op te nemen, klik je op Geselecteerd en kies je de gewenste kolommen door ze met Ctrl+klik (Windows) of Command+klik (Macintosh) te selecteren in de lijst.

Vul het gedeelte Filter in om de record te zoeken en weer te geven die is opgegeven in de URL-parameter die door de hoofdpagina is doorgegeven:
  • Selecteer in het eerste pop-upmenu in het gebied Filter de kolom in de recordset die waarden bevat die overeenkomen met de waarde van de URL-parameter die door de hoofdpagina is doorgegeven. Selecteer bijvoorbeeld, als de URL-parameter een record-ID-nummer bevat, de kolom met record-ID-nummers. In het voorbeeld dat in de vorige sectie is besproken, bevat de recordsetkolom genaamd CODE de waarden die overeenkomen met de waarde van de URL-parameter doorgegeven door de hoofdpagina.

  • Selecteer in het pop-upmenu naast het eerste menu het gelijkteken (dit zou al geselecteerd moeten zijn).

  • Selecteer in het derde pop-upmenu de optie URL-parameter. De hoofdpagina gebruikt een URL-parameter om informatie door te geven aan de detailpagina.

  • Voer in het vierde vak de naam van de URL-parameter in die is doorgegeven door de hoofdpagina.

Klik op OK. De recordset wordt in het paneel Bindingen weergegeven.
Koppel de recordsetkolommen aan de detailpagina door de kolommen te selecteren in het paneel Bindingen (Venster > Bindingen) en ze naar de pagina te slepen.

Na het uploaden van zowel de hoofd- als detailpagina's naar de server, kun je de hoofdpagina openen in een browser. Na het klikken op een detailkoppeling op de hoofdpagina, opent de detailpagina met meer informatie over het geselecteerde record.

Zoek een specifiek record en geef het weer op een pagina (ASP)

Je kunt een servergedrag toevoegen dat een specifiek record in een recordset zoekt, zodat je de recordgegevens op de pagina kunt weergeven. Het servergedrag is alleen beschikbaar bij gebruik van het ASP-servermodel.

Maak een pagina die aan de volgende voorwaarden voldoet:
Voeg het server-gedrag toe om het record te vinden dat is gespecificeerd door de URL-parameter door op de Plus (+) button te klikken in het Server Behaviors-paneel (Venster > Server Behaviors) en Recordset Paging > Naar specifiek record verplaatsen te selecteren.
Selecteer in het pop-upmenu 'Naar record verplaatsen' de recordset die je voor de pagina hebt gedefinieerd.
Selecteer in het pop-upmenu Waar kolom de kolom die de Waarde bevat die door de andere pagina wordt doorgegeven.

Als de andere pagina bijvoorbeeld een record-ID-nummer doorgeeft, selecteer je de kolom met record-ID-nummers.

Voer in het vak Komt overeen met URL-parameter de naam in van de URL-parameter die door de andere pagina wordt doorgegeven.

Als de URL die de andere pagina heeft gebruikt om de detailpagina te openen bijvoorbeeld id=43 is, voer je id in het vak Komt overeen met URL-parameter in.

Klik op OK.

De volgende keer dat de pagina door een browser wordt aangevraagd, leest het servergedrag de record-ID in de URL-parameter die door de andere pagina is doorgegeven en gaat naar het opgegeven record in de recordset.

Hoofd- en detailpagina's bouwen in één bewerking

Bij het ontwikkelen van web-apps kun je snel hoofd- en detailpagina's bouwen met het gegevensobject Master Detail Page Set.

Om een lege dynamische pagina te maken, selecteer je Bestand > Nieuw > Lege pagina, selecteer je een dynamische pagina uit de lijst Paginatype en klik je op Maken.

Deze pagina wordt de hoofdpagina.

Definieer een recordset voor de pagina.

Zorg ervoor dat de recordset niet alleen alle kolommen bevat die je nodig hebt voor de hoofdpagina, maar ook alle kolommen die je nodig hebt voor de detailpagina. Doorgaans haalt de recordset op de hoofdpagina een paar kolommen uit een databasetabel op, terwijl de recordset op de detailpagina meer kolommen uit dezelfde tabel ophaalt om extra details te bieden.

Open de hoofdpagina in de ontwerpweergave en selecteer Invoegen > Gegevensobjecten > Master Detail Page Set.
Zorg er in het pop-upmenu Recordset voor dat de recordset met de records die je op de hoofdpagina wilt weergeven is gekozen.
Selecteer in het gebied Hoofdpaginavelden de recordsetkolommen die op de hoofdpagina moeten worden weergegeven.

Standaard zijn alle kolommen in de recordset geselecteerd. Als je recordset een unieke sleutelkolom bevat zoals recordID, selecteer je deze en klik je op de Min (-) button zodat deze niet op je pagina wordt weergegeven.

Om de volgorde te wijzigen waarin de kolommen op de hoofdpagina verschijnen, selecteer je een kolom in de lijst en klik je op de pijl omhoog of omlaag.

Op de hoofdpagina worden de recordsetkolommen horizontaal in een tabel gerangschikt. Door op de Pijl-omlaag te klikken, wordt de kolom naar links verplaatst; door op de pijl omlaag te klikken, wordt de kolom naar rechts verplaatst.

Selecteer in het pop-upmenu Koppelen naar detail de kolom in de recordset die een waarde weergeeft die ook dient als koppeling naar de detailpagina.

Selecteer bijvoorbeeld de recordsetkolom met productnamen als je wilt dat elke productnaam op je hoofdpagina een koppeling naar de detailpagina heeft.

In het pop‑upmenu Unieke sleutel doorgeven selecteer je de kolom in de recordset die waarden bevat waarmee de records worden geïdentificeerd.

Gewoonlijk wordt de kolom met het record-id-nummer gekozen. Deze waarde wordt doorgegeven aan de detailpagina, zodat deze het record kan identificeren dat door de gebruiker is gekozen.

Schakel de optie Numeriek uit als de kolom met de unieke sleutel niet numeriek is.
Notitie

Deze optie is standaard geselecteerd; deze wordt niet weergegeven voor alle servermodellen.

Geef het aantal records op dat moet worden weergegeven op de hoofdpagina.
In het vak Naam detailpagina klik je op Verkennen en zoek je het detailpaginabestand dat je hebt gemaakt, of voer je een naam in en laat je het gegevensobject er een maken.
In het gebied Velden detailpagina selecteer je de kolommen die op de detailpagina moeten worden weergegeven.

Standaard zijn alle kolommen in de recordset van de hoofdpagina geselecteerd.Als de recordset een unieke sleutelkolom bevat zoals recordID, selecteer deze dan en klik op de Min (-) button zodat deze niet wordt weergegeven op de detailpagina.

Om de volgorde te wijzigen waarin de kolommen verschijnen op de detailpagina, selecteer je een kolom in de lijst en klik je op de omhoog- of Pijl-omlaag.

Op de detailpagina worden de recordsetkolommen verticaal in een tabel gerangschikt. Door op de pijl omhoog te klikken beweeg je de kolom omhoog; door op de Pijl-omlaag te klikken beweeg je de kolom omlaag.

Klik op OK.

Het data-object maakt een detailpagina (als je er nog geen hebt gemaakt) en voegt dynamische content en serverbetevragegedragingen toe aan zowel de hoofd- als detailpagina's.

Pas de lay-out van de hoofd- en detailpagina's aan zoals jij dat wilt.

Je kunt de lay-out van elke pagina volledig aanpassen door gebruik te maken van de Dreamweaver-paginaontwerptools.Je kunt ook de serverbetevragegedragingen bewerken door erop te dubbelklikken in het panel Serverbetevragegedragingen.

Na het maken van hoofd- en detailpagina's met het data-object, gebruik je het panel Serverbetevragegedragingen (Venster > Serverbetevragegedragingen) om de verschillende bouwstenen te wijzigen die het data- object in de pagina's invoegt.