Lektion 31. Backend de luxe med Bootstrap

Forberedelse

  • Se en intro video om, hvad Bootstrap er: https://www.youtube.com/watch?v=yalxT0PEx8c
  • Kik på siden https://startbootstrap.com/themes/agency/

Formål

  • Lave et afsluttende, gennemarbejdet projekt om PHP, som ser fantastisk ud
  • Du vil nok skulle bruge 2 – 3 lektioner på at lave projektet her

Fælles gennemgang

Fra sidst

  • Hvad bruges include() til
  • Hvad er AJAX
  • Hvad er OOP
  • Hvad kan vi bruge funktioner til
  • Hvad kan vi bruge cookies til

Lektien til denne gang

Opgaven

Du skal nu lave en rigtig, rigtig flot hjemmeside, som skal bruges til programmet “Luksusfælden version 2”. Opgaven består af 2 dele.

  • Del 1. Lav en hjemmeside på 1 side
  • Del 2. Lav en meget, meget flot one-page side, hvor du overfører dit arbejde fra del 1 til en flot skabelon

Del 1. Backend

I den første del af opgaven skal du koncentrere dig om at skrive kode, der virker og er velstruktureret. Brug gerne inquire() og funktioner. Pyt med sidens udseende, det venter vi med til del 2 af opgaven.

Du skal lave en hjemmeside på kun 1 side. Den skal kunne følgende:

  • Valutaomregner: Den skal kunne omregne fra danske kroner til hhv. US-dollar, euro og svenske kroner og tilbage igen. Brugeren skal modtage fejlmeddelelser ( PHP) hvis
  • Privatøkonomi, nu er vi tilbage i ØG. Brugeren skal kunne indtaste følgende.
    • Årlig bruttoindkomst, f.eks. 150.000
    • Skatteprocent med bundfradrag. F.eks. 38% og bundfradrag på 35.000
    • Faste, månedlige omkostninger, f.eks. 2.500
    • Så skal den kunne udregne det disponible beløb pr. måned
  • Formular, hvor man kan tilmelde sig og få gratis rådgivning vedrørende privatøkonomi. Formularen skal indeholde
    • Navn
    • Adresse
    • Postnummer
    • By
    • Telefonnummer
    • Email
    • Alder
    • Et ja-nej felt, hvor man kan tilmelde sig nyhedsbrevet

Det gælder for alle felter, at du skal give brugeren fejlmeddelelser, hvis feltet udfyldes forkert. Fejlmeddelelserne skal skrives i PHP.

  • Indtastningsfeltet efterlades tomt
  • Der skal indtastes et tal og ikke f.eks. bogstaver
  • Tallet skal være positivt

Tip:

  • Du må genbruge fra tidligere opgaver
  • Evalueringen af felterne skal foregå på samme side, men anbring meget gerne PHP i andre filer med inquire()
  • Lav de 3 delopgaver i hver sin formular, men sørg for, at du kan kende forskel på de forskellige submit-knapperne vha. attributten name

Del 2. Frontend

Du skal nu lave en super-flot one-page hjemmeside med koden fra del 1.

  • Gå ind på siden her https://startbootstrap.com/themes/agency/ og kik på Live preview.
  • Oppe i højre hjørne på siden findes en knap “Free download”. Brug den til at hente pakken ned. Den kommer som en .zip fil
  • Udpak den inde i htdocs og tjek, hvordan den virker. Hvordan kan det være, at den er så flot
  • Omdøb siden index.html til index.php og tjek, at den stadigvæk virker
  • Lav overskrifterne om, så 3 af overskrifterne hedder: Valutaomregner, Årsopgørelse og Tilmelding. Tilføj gerne lidt tekst for at hjælpe brugeren
  • Hvis er er sektioner, du ikke vil bruge, så udkommater dem frem for at slette dem. Få gerne hjælp fra din underviser
  • Flet din PHP kode ind, så både valutaomregneren, årsregnskabet og formularen virker. Du skal ikke bruge den formular, som i forvejen findes i skabelonen