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

Transkript

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.