Gesällprov. Webbutveckling klient- och serversidan. Tomas Pålson topa4233

Full text

(1)

 

Gesällprov  

Webbutveckling  –  klient-­‐  och  serversidan   Tomas  Pålson    

topa4233  

 

   

(2)

Kombinerat  gesällprov  Webbutveckling  –  klient-­‐  och  serversidan    

 

Startsida  (Filens  namn=  start.html)  

   

   

Här  är  startsidan  till  mitt  gesällprov.  Min  hemsida  har  jag  döpt  till  Pålles  bollar  och  är  en   väldigt  simpel  webbshop  med  golfbollar.  Högst  upp  på  sidan  har  jag  i  min  header  en   anythingslider  som  jag  har  ändrat  lite  utseende  på,  den  kör  ett  bildspel  med  tre  bilder   som  jag  tycker  passar  sidan.  Under  slidern  har  jag  en  vertikal  navigationslista  med   länkar  till  sidans  andra  sidor.  Navigationslistans  har  jag  stylat  med  CSS.  Den  länk  som  är   vald  markeras  med  grönbakgrund  för  att  se  vilken  sida  besökaren  är  inne  på.  Har  även   sidans  logga  längst  till  vänster  i  headern.  Under  navigationslistan  hittar  vi  sidans   huvuddel  som  är  en  beskrivning  utav  sidan  samt  en  iframe  med  en  film  ifrån  Youtube.  

Till  höger  om  iframen  är  en  bild  på  en  golfboll.  Till  vänster  om  huvuddelen  finns  en   navigations  del  med  länkar  till  sidor  utanför  min  hemsida.  Länkarna  leder  till  sidor  med   information  om  de  olika  bollar  som  säljs  på  sidan.  Sidan  är  indelad  i  två  paneler  med   hjälp  utav  float  egenskapen  i  CSS.  Bakgrunden  på  sidan  är  uppdelad  i  två  delar.  Headern   och  footern  har  en  bakgrundsfärg  som  är  svart  och  huvuddelensbakgrund  består  av  en   bild  på  en  golfbana  vilket  passar  sidan.  Panelerna  har  en  gemensam  grå  bakgrundsfärg   för  att  sidan  ska  kännas  enhetlig.  Denna  stil  finns  över  webbshopens  alla  sidor.  

 

(3)

Footer  

 

   

I  botten  på  varje  sida  ligger  en  enkel  footer  med  en  vertikal  navigationslista,  

svartbakgrund  och  sidans  logga.  Footern  stannar  längst  ner  på  sidan  oavsett  mängden   innehåll  på  sidan  genom  en  div  som  ligger  precis  ovanför  och  trycker  ner  footern.    

 

Shop  (filernas  namn=indexe.php,  cart_update.php,  config.php)  

 

   

Under  fliken/länken  shop  ligger  sidans  bollshop.  På  sidans  finns  det  fyra  olika  bollar  att   köpa.  Informationen  om  dessa  fyra  bollar,  alltså  pris,  beskrivning,  produktkod  och  bild   ligger  i  en  MySQL  databas  och  hämtas  utav  ett  PHP  program.    Besökaren  kan  välja  antal   och  lägga  till  de  bollar  som  önskas  köpa  i  kundvagnen  som  är  i  den  högra  panelen  på   sidan.    Det  går  inte  att  trycka  på  bollarna  utan  den  information  som  finns  om  dem  är  den   som  syns.  Kundvagnen  lägger  till  bollarna  och  räknar  ut  totalt  pris  med  hjälp  av  ett  PHP   program.  PHP  programmet  svarar  information  baserat  på  kundens  input  .  När  kunden   har  lagt  till  alla  bollar  som  ska  köpas  trycker  denne  på  ”Betala!”  och  kommer  då  till  det   man  kan  kalla  ”kassan”.  Det  finns  också  alternativ  att  ta  bort  valda  bollar  från  

kundvagnen,  antingen  en  i  taget  eller  tömma  hela  kundvagnen  på  en  gång  detta  sker   med  hjäp  av  PHP  programmet.  Sidan  har  till  skillnad  från  startsidan  en  tre  panels  design   som  är  stylad  i  CSS  med  float  funktionen.  

(4)

Kundvagnen  (filens  namn=view_cart.php,  config.php)  

 

   

När  besökaren  har  valt  att  ”Betala!”  i  shopen  kommer  denne  till  kundvagnen.    Detta  är   det  man  kan  kalla  ”kassan”.  Här  visas  valen  från  shopen  och  det  finns  möjlighet  att  ta   bort  produkter  ur  vagnen.  Detta  sker  med  hjälp  utav  ett  PHP  program  som  hämtar   information  från  shopen  och  skriver  ut  i  ”kassan”.  När  besökaren  trycker  på  ”Beställ”-­‐

knappen  byts  paragrafelementet  ut  med  hjälp  utav  JavaScript-­‐kod  och  sidan  tackar  för   din  beställning.    

 

Bollvisare  (filernas  namn=Bollvisare.html,  bollvisare.php  och   Bollvisa.html)    

 

(5)

   

Under  den  tredje  fliken/länken  på  sidan  ligger  bollvisaren.  Ett  formulär  som  med  hjälp   utav  ett  PHP  program  ger  en  hänvisning  om  vilken  golfboll  som  passar  besökarens   golfsving.  Programmet  ger  förslag  på  golfboll  baserat  på  vilka  värden  som  besökaren   anger  i  formuläret.  Formuläret  valideras  med  hjälp  utav  ett  JavaScript  plug-­‐in  vilket  ser   till  att  besökaren  fyller  i  formuläret  korrekt  innan  PHP  programmet  körs.  När  PHP   programmet  körs  används  en  teknik  där  html  kod  ersätts  för  att  ge  förslaget  på  ett   snyggt  sätt  och  för  att  användaren  ska  kunna  köra  formuläret  igen.    Sidan  är  stylad  efter   sidans  färgkod  och  har  två  paneler  som  likt  de  andra  sidorna  är  gjort  med  float  

funktionen.  

 

Om  (filensnamn=Om.html)  

 

 

(6)

Den  sista  fliken  består  av  två  paneler,  navigationslistan  som  följer  med  på  alla  sidor  och   en  huvudpanel  som  innehåller  en  mer  utförlig  beskrivning  av  sidan.    En  bild  ligger  till   höger  i  huvudpanelen.    

Figur

Updating...

Referenser

Updating...

Relaterade ämnen :