Dynamisk Webbsida Med PHP


Idag ska vi skapa en dynamisk webbsida med PHP och du ska redan kunna en del PHP, HTML och CSS för att få ut det mesta av den här guiden.

 Webbroten är den plats där du förvarar projektfiler » om du kör WAMP på Windows är det C:/WAMP/www/ och för MAMP på Mac OS X är det /Applications/MAMP/htdocs/ och för en AMP (Apache MySQL PHP) installation på Linux är det /var/www/html. AMP kan också köras på en Mac men då skapar man en ny mapp i din snvändarmapp som heter Sites eller .

Min favorit IDE för PHP programmering är NetBeans för den har fungerat utmärkt hittills.


En liten sida

Jag tänkte vi skulle skapa en liten sida och lära oss lite på vägen. Börja med att skapa en PHP-fil; index.php och skriv in följande:

…och en CSS-stilmall, med den här koden:

Nu har vi en startsida som vi kan arbeta med.


Dynamik

För att göra sidan dynamisk börjar vi med att modifiera meny-länkarna genom att ändra href attributet så här:

Här lägger vi till en variabel page som ändras beroende på vilken länk man klickar på. page är här en så kallad querie sträng och skrivs efter ett frågetecken. Testa att klicka på länkarna och kolla i adressfältet, där du bör se något liknande:

page variabeln syns i adressfältet när man klickar på menylänkarna

page variabeln syns i adressfältet när man klickar på menylänkarna

Det här kan vi använda oss av eftersom det går att komma åt page variabeln med PHP superglobal $_GET.

Vi börjar enkelt och ändrar title värde beroende på vilken länk som klickas och därmed också vilken sida man är på:

…men om $page variabeln inte är deklarerad än, hur går det då? Då har den inget värde helt enkelt och skulle inte skriva ut något. Vi kan fixa det med en villkorlig sats där vi använder isset() funktionen för att kolla om page har ett värde:

Så där, vi kan nu servera innehåll, beroende på vilket värde page har.


Servera Innehåll

Vi skapar nya filer i en ny mapp som vi ger namnet templates, och där skapar vi fyra nya filer som ska heta:

  1. hem.php
  2. portfolio.php
  3. galleri.php
  4. kontakt.php

I dessa kan vi nu skriva in vad vi vill visa. Du kan bara skriva in en heading nivå 1 med titeln på sidan då vi bara ska demonstrera hur det fungerar, så detta är allt jag tänkte skriva i hem.php:

Vi behöver inte deklarera <doctype html>, <head> och <body> m.fl. då vi redan har grunden i index.php där denna del av sida ska visas. Så, nu skapar vi en sträng som ändras beroende på vilket värde page har. Skriv in följande mellan <section> taggarna i index.php:

Nu har vi skapat en enkel template system som serverar sida beroende på vilken länk användaren klickar på.


Separera Logik & Presentation

Det är dock inte god kodningsstandard att blanda logik och presentation, utan man ska försöka till så stor del som möjligt, separera dom. Därför ska vi skapa en ny mapp som heter inc, och däri en PHP-fil som heter functions:

Vi flyttar PHP koden från index.php till en funktion i functions.php:

…och så skriver vi inkluderingen av function.php och deklarationen av $page variabeln på toppen av sidan:

Okej, nu kan du använda funktionen genom att anropa den, så byt ut all PHP-kod mellan <section> taggarna i index.php mot det här:

Vi ger funktionen renderPage() variabeln page som argument.


Dynamisk Meny

Jag har även satt ihop en funktion som skapar en dynamisk meny. Den använder sig av en variant av if sats, och används på det här sättet:

Där villkor kan vara vilken jämförelse  som helst, t.ex. a === b eller funkionsanrop och om det är sant gäller det första som kommer direkt efter frågetecknet och om det är falskt så gäller den sista som kommer efter kolonet och här är ordet falskt. Ett praktiskt exempel där jag jämför if-satserna:

Här kommer koden till createMenu() funktionen:

…och den används så här:

Du kan ladda ner koden här. Okej, det var allt för den här gången, och till nästa gång koda smart 😉

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *