118 besökare, 1 medlem och 1 Student är online nu
Loopia

Dreamweaver

Hämta information från MySQL databas
(8, MX2004)

Klicka här för att prova exemplet ovan » mot den riktiga databasen "kunder_order"!

Dreamweaver ger dig möjlighet att ansluta direkt till en MySQL databas och du kan se resultatet av dina dynamiska sidor direkt i Dreamweaver. Den här guiden visar hur du skapar Recordsets för att göra sökningar ur databasens tabell och Repeated Regions för att presentera sökresultatet. Dessutom skapar vi en navigering som låter användaren bläddra mellan sidorna med sökresultaten.

Förutsättningar för att följa guiden

Dreamweaver innehåller inte PHP eller MySQL och fungerar inte heller som en webbserver och du måste alltså först installera PHP , MySQL och Apache webbserver.

Din testserver ska vara konfigurerad och anslutningen till MySQL klar enligt guiden Arbeta med PHP och MySQL »

Du bör också ha grundkunskaper i HTML och användning av programmet Dreamweaver innan du börjar med PHP och MySQL.

Skapa ett Recordset (postsamling)

Ett Recordset (postsamling) är detsamma som en anslutning till en MySQL databas (MYSQL_CONNECT och MYSQL_SELECT_DB) där ett urval av posterna (raderna) i tabellen görs med SELECT - jämför med avsnittet "Ansluta till MySQL databas" i guiden PHP och MySQL »

Det Recordset du anger här gäller endast det aktuella dokumentet och för nya dokument kan du skapa egna Recordset.

  1. Skapa en ny dynamisk sida, alltså ett nytt PHP-dokument:



    (se dynamisk sida och dokumenttyp enligt avsnittet "Skapa en webbplats i localhost rootfolder" (punkt 1:3) i guiden Arbeta med PHP och MySQL »)
  2. Byt verktygsfält (Toolbar) till "Application" genom att klicka på pilen vid namnet på det nuvarande vertygsfältet:



    Välj verktygsfältet "Application":



    OBS! Om du inte har något synligt verktygsfält att klicka på väljer du först att visa dem med menyn "View/Toolbars/Insert".
  3. Infoga ett nytt Recordset genom att klicka på knappen:



    OBS! Om du får upp meddelandet nedan har du inte angivit en testserver och anslutning till MySQL och du måste göra detta först. Läs mer i guiden Arbeta med PHP och MySQL »



    Dialogrutan "Recordset" där du anger namn på din postsamling och väljer anslutning (Connection) och den tabell du vill hämta information ifrån. I exemplet används tabellen "kunder" där alla kolumner är valda. När du valt alla uppgifterna klickar du på knappen "Advanced":



    Dialogrutan "Recordset" i avancerat läge ger dig möjlighet att skriva MySQL-kommandon manuellt och du ser att vi valt att visa alla rader i kolumnen "kunder" då SQL-kommandot är:

    SELECT * from kunder

    Använd knappen "Simple för att återgå till enkel visning av dialogrutan:



    Bekräfta dina val för Recordset med OK!

    Du får en bekräftelse på att ett Recordset skapats:

  4. Fliken "Bindings" visar ditt Recordset och du kan se de kolumner (fält) som är valda:


  5. Kolla koden för att se vad som hänt!
    Anslutningen till din MySQL databas är gjord med REQUIRE_ONCE.
    Databasen är vald med MYSQL_SELECT_DB.
    Hämta     informationen med MYSQL_QUERY från tabellen "kunder" och lagra resultatet i variabeln $kundlista.

    Dessutom är flera andra variabler skapade som inte används nu men förbereder för kommande funktioner som vi kommer att använda senare:



    Filen "MySQL.php" innehåller uppgifterna för anslutningen som du gjorde enligt avsnittet "Anslut till MySQL databas" (punkt 4:7) i guiden Arbeta med PHP och MySQL »


  6. I slutet av din kod hittar du MYSQL_FREE_RESULT som används för att frigöra minnesutrymme när scriptet körts. Det här kommandot används då du inte vet hur stora mängder information som din fråga resulterar i och du vill försäkra dig om att scriptet inte uppehåller minneskapacitet i onödan när det utförts:

Hämta information från ett Recordset

Det Recordset du skapat har redan gjort en sökning i tabellen "kunder" för att visa alla poster och alla kolumner från tabellen, men du har ännu inte valt någon metod att presentera resultatet och din sida visar inga namn från vårt kundregister. Nu är det dags att skriva ut innehållet till ditt dokument.

  1. För att visa innehållet i de valda kolumnerna kan du dra kolumnens namn (fältnamnet) från fliken "Bindings" till din sida i kodvy eller designvy. I exemplet drar vi fältnamnet "kundnr" till vårt dokument:



    Notera den kod som skapas för att visa innehållet där ECHO används för att skriva innehållet ur variabeln $row_kundlista som innehåller kolumnen "kundnr".
  2. Dra de övriga fältnamnen till ditt dokument:


  3. Förgranska resultatet i webbläsaren med F12:



    Du kan även använda visningsläget "Live Data View" för att se resultatet av din dynamiska sida direkt i Dreamweaver:

  4. Använd &nbsp (nonbreaking space) för att skapa ett avstånd mellan kolumnerna, snabbkommandot är CTRL+SHIFT+ Mellanslag:



    Förgranska i webbläsaren (eller "Live Data View") för att se resultatet:

  5. Du ser bara den första raden från tabellen "kunder" och vår sökning med SELECT * from kunder ska ju visa alla rader och tabellen innehåller ca 500 kunder...

    För att visa alla rader kan du använda en loop (slinga) som hämtar alla raderna och i Dreamweaver skapar du loopen med funktionen "Repeated Region" som gör exakt det namnet antyder, repeterar (loopar) ett valt område. För att inte posterna (kunderna) ska visas som en enda lång rad är det bra att få med en radbrytning i området som ska repeteras. Skapa en radbrytning <BR> med snabbkommando SHIFT+ENTER :

  6. Markera hela området som ska repeteras inklusive radbrytningen:

  7. Använd knappen "Repeated Region" (eller menyn "Insert/Application Objects/Repeated Region"):



    I dialogrutan kan du välja att visa alla poster eller ett antal rader åt gången. Vi väljer att visa 10 rader:



    (vi ska senare lägga till en navigering som visar nästa och föregående poster)
  8. Resultatet är att en loop skapas med DO och WHILE (läs mer om loopar i guiden PHP grunder ») och i designvyn ser du den repeterande regionen omsluta fältnamnen:



    Sökresultatet är sedan tidigare lagrat i en variabel med namnet $kundlista (se punkt 1:5 ovan) för att nu visas med funktionen MYSQL_FETCH_ASSOC till en array. Villkoret DO och WHILE loopar igenom arrayen tills alla rader som uppfyller sökvillkoren har hämtats in. Jämför med avsnittet "Hämta information från databasen med PHP" i guiden PHP och MySQL »
  9. Förgranska resultatet i webbläsaren (eller i "Live Data View"). Här visas nu de 10 första raderna från tabellen "kunder":



    I kommande avsnitt ska vi lägga till navigering för att se nästa och föregående 10 poster.
  10. Alla servergenererade funktioner kan du nu se i fliken "Server Behaviors":



    OBS! Server Behaviors är kodblock som Dreamweaver infogar och identifierar efter ett mönster i koden. Om du ändrar koden manuellt kan inte Dreamweaver identifiera kodblocket som då inte heller visas i fliken "Server Behaviors". De dynamiska funktionerna är inte beroende av att kodblocket är oförändrade och det viktigaste är att PHP-koden är korrekt. Du kan alltså arbeta med koden i kodvyn och ha fungerande servergenererade sidor ändå.

    Vi har faktiskt ändrat koden manuellt i punkt 5 ovan för att visa varje PHP ECHO som en egen rad och resultatet är att ett utropstecken visas vid "Repeated Region" och kodblocket "Recordset" visas nu inte alls:



    Alla PHP-funktioner fungerar ändå. Slutsatsen är att om du vill ställa upp koden enligt dina egna rutiner eller klippa/klistra egen kod till dokumenten i Dreamweaver så är sannolikheten stor att kodblocken inte visas... men du får ju en snygg och prydlig kod exakt som du själv vill ha den.
  11. Vår kod anger nu att kundlistan ska visa 10 rader åt gången:



    På samma sätt som tidigare är dessutom är flera andra variabler skapade som inte används just nu men förbereder för kommande funktioner oavsett om du kommer att använda dem eller ej... Koden ovan är förberedd för att infoga en sidnavigering enligt nästa avsnitt.

Navigera i resultatet och visa fler rader

En förutsättning för att bara visa delar av sökresultatet är att det går att visa fler rader från tabellen än de 10 rader vi valt att visa. En navigering framåt och bakåt gör vi med PHP-kod och kopplar med <A HREF> till länkad text.

  1. Gör en radbrytning <BR> med SHIFT+ENTER och se till att markören är placerad på den nya raden. Välj pilmenyn vid knappen "Recordset Paging" och välj att navigera framåt till nästa sida med valet "Move To Next Page":



    Bekräfta dialogrutan med OK:



    En länk är skapad där PHP-koden ligger inom A HREF och ordet "Next" är länkad till funktionen som visar nästa 10 rader ur vår tabell::



    Förgranska i webbläsaren och prova din navigering:



    OBS! Du kan inte testa länkar i visningsläget "Live Data View". Du måste alltså förgranska i webbläsaren för att testa din navigering.
  2. Infoga fler alternativ för navigering, i exemplet nedan har de övriga tre valen för navigering i "Recordset Paging" infogats. Se till att du har ett mellanrum med &nbsp eller radbrytning så att inte kodblocken överlappar varandra:



    Förgranska i webbläsaren och testa om navigeringen fungerar:

  3. Varje navigerings kodblock kan du se i fliken "Server Behaviors" där du också kan välja kodblocket genom att klicka i listan. Även om inte det länkade ordet markerats som i exemplet nedan så är ändå kodblocket markerat:



    Om du vill radera ett kodblock så kan du göra det genom att välja den Server Behavior som ska tas bort och använda minustecknet:

  4. Vår navigering är inte helt perfekt då valen "Next" och "Last" visas på sista sidan även då det inte går att komma längre bakåt. Samma sak gäller för "Previous" och "First". Lösningen är att lägga till en kontrollfunktion som avgör om det är första eller sista sidan som visas och då döljer de navigeringar som inte går att använda.

    Här är navigeringen "Previous" markerad och pilmenyn vid knappen "Show Region" används för att välja att visa navigeringen endast om den inte är på den första sidan - "Show If Not First Page":



    OBS! Se till att det inte bara är ordet som markerats utan hela kodblocket. Använd gärna fliken "Server Behaviors" för att markera rätt kodblock enlig punkt 3 ovan.

    Här ser du att ordet "Previous" omslutits med en ram och fliken "Show If...".
    Lägg till argument för de övriga navigeringarna så att "Next" inte visas om det är den sista sidan osv...



    Här är alla navigeringarna klara och dessutom är de nu samlade på samma rad:


  5. När du förgranskar i webbläsaren visas bara navigeringen "Next" och "Last" på den första sidan:


    ...men på sidan 2 och framåt visas alla navigeringarna:



    ...med undantag av den sista sidan som endast visar "Previous" och "First":

  6. Den länkade texten kan du ändra till svenska motsvarigheter:



    Navigeringen är klar!

 

Navigering med Navigation Bar

Om du vill ha en hel navigationsmeny finns det ett alternativ som infogar kodblock och länkad text eller bilder i en HTML-tabell.

  1. Placera markören där du vill ha navigeringsmenyn. Välj pilmenyn vid knappen "Recordset Paging" och alternativet "Recordset Navigation Bar":

  2. Välj om du vill ha text eller bilder i navigeringsmenyn:

  3. Här är Text vald och du ser att navigeringen har likheter med de du valt tidigare men denna ligger i en HTML-tabell:



    HTML-tabellen är centrerad och du kan ändra tabellegenskaperna så att den ligger till vänster så passar den bättre med sökresultatet från vår kundlista.

    Navigeringen fungerar likadant som i tidigare exempel där första sidan bara visar "Next" och "Last":



    ...men på sidan två och framåt visas alla navigeringar:



    Här är samma Navigation Bar men nu med Images (knappar) under texten. Två navigeringsmenyer är infogade där en innehåller text och den andra bilder:


Hämta information till HTML-tabell (Dynamic Table)

Raderna från vår tabell "kunder" har hämtats in och avgränsats med blanksteg &nbsp och radbrytning <BR> men det blir faktiskt snyggare om du placerar sökresultatet i en HTML-tabell.

  1. Här är det tidigare repeterade området (Repeated Region) borttaget och markören placerad i början av dokumentet. Infoga en dynamisk tabell med knappen "Dynamic Data":

  2. Du kan välja antal rader att visa och även en viss formatering av HTML-tabellen:

  3. Resultatet är en HTML-tabell med kolumnnamn och medföljande PHP-kod:

  4. HTML-tabellen kan du formatera på vanligt sätt och här är texten formaterad och kantlinjer med CSS används under tabellcellerna:



    Snabbt, snyggt och enkelt att skapa dynamiska sidor med Dreamweaver, PHP och MySQL!