Bygg en månadskalender och ett gissningsspel med PHP datastrukturer

By . Latest revision .

Du skall bygga ut din webbplats och dels skapa en almanacka i form av en månadskalender med bilder och dels skall du göra ett litet gissningsspel. I övningen kommer du att få jobba med att organisera ditt PHP-kodande och jobba med bland annat arrayer och funktioner.

Du kommer också få träna på HTML formulär med POST och sessioner.

Du jobbar i din tidigare struktur av sidkontrollers och vyer och bygger ut din befintliga webbplats.

#Förkunskaper

Du har jobbat igenom övningen “Programmera din webbsida med PHP datastrukturer” och du har därmed fått en bra start inför uppgiften.

#Introduktion och förberedelse

Om du har jobbat igenom övningen så är du förberedd för uppgiften och du har tränat på de begrepp som används för att lösa uppgiften.

I denna uppgiften kan du troligen återanvända en del av den koden du gjorde i förra uppgiften om en kalender. Se om du kan återanvända koden på ett bra sätt. Kanske kan du till och med överväga att flytta vissa delar till funktioner, om du känner dig bekväm med det.

#Struktur

Du jobbar vidare med strukturen med sidkontrollers och vyer när du löser uppgiften.

Du skall också organisera din kod i funktioner, om och när du anser att det passar.

#Funktioner för namn

I ditt kursrepo finns PHP-funktioner och data som kan läsa in namnsdagar och namnens betydelse. Du behöver de funktionerna och de filerna för att kunna utföra uppgiften.

Gör så här i din terminal.

# Ställ dig i rooten av kursrepot

# Börja att kopiera datafilerna som innehåller detaljer om namn
mkdir me/report/data
cp example/database/data/Svenska_akademin_namn*.csv me/report/data

# Kopiera funktionerna som kan läsa in namnfilerna och skapa arrayer av dem
cp example/database/src/calendar.php me/report/src

Inkludera nu filen src/calendar.php i din config/config.php.

Titta på funktionerna i filen. Prova att använda dem och skriva ut innehåll i det som funktionerna returnerar med en var_dump i en sidkontroller, bara för att se att du kan använda dem och du kan se vad de innehåller.

#Krav

Utför följande krav.

#Krav 0: Övningen

Från övningen förutsetts att du har följande implementerat.

  1. En sidkontroller public/session.php där du kan visa detaljer om sessionen, dess innehåll och att du kan förstöra sessionen. Denna sidkontroller är synlig i din navbar.

  2. Filen src/functions.php med funktioner för att förstöra sessionen och för att jobba med flashmedelanden via sessionen.

#Krav 1: Almanacka med bild

Du skall göra en årsalmanacka för årets 12 månader i innevarande år där du visar en månad tillsammans med en bild, en så kallad fotokalender.

Gör en sidkontroller photocal.php som tar ett argument via querysträngen ?month=6 och därefter visas månaden juni upp tillsammans med en bild. Skickar man in ?month=7 så visas juli upp och missar man att skicka in något alls så visas aktuell månad. Du kan också välja att skicka in både månad och år via querysträngen, det är upp till dig hur du konstruerar querysträngen.

Skapa en länk så att man kan navigera till nästa och föregående månad. När du kommer till månad 12 och klickar nästa så tar det antingen stopp, eller så byter du år - det är upp till dig att välja taktik.

Placera en länk till sidkontrollern i navbaren.

Tanken är att din almanacka har följande utseende.

En fotokalender i form av en årsalmanacka.

En fotokalender i form av en årsalmanacka.

I kalendern visar du vecka för vecka med sitt veckonummer, datum för dagen och månadens namn. För varje dag, skriv ut vilket dagnummer det är för året (1-365/366). Du kan även välja att visa mer information om du vill.

Se till att söndagar är röda i din style.

EXTRA

Gör bara detta om du känner att du har tid, lust och energi.

Placera in namnen på de som har namnsdagar på rätt plats i kalendern. Du har en funktion i src/calendar.php som kan ge dig en array som innehåller namn kopplade till ett datum.

#Krav 2: Gissa på dagens namn

Du skall göra ett litet gissningsspel med hjälp av kalenderfunktionen som kan ge dig en array med namnens betydelse. I denna uppgiften får du träna på HTML formulär, POST och SESSION.

Du har en funktion i src/calendar.php som kan ge dig en array med alla namn och deras betydelse.

Här är grunden i spelet.

  1. Placera din kod i en sidkontroller public/guessname.php. Det är där “spelet” börjar.

  2. Placera en länk till sidkontrollern i navbaren.

  3. Läs in arrayen med namnens betydelse, slumpa fram ett namn i arrayen (array_rand) och skriv ut betydelsen på namnet i sidan. Spara även namnet i sessionen.

  4. I sidan, skapa ett formulär med POST där användaren kan gissa på det namn som är kopplat till betydelsen.

  5. Skapa en processingsida som kontrollerar om användaren gissade rätt namn. Redirecta till en resultatsida och spara om det var rätt eller fel svar i ett flashmeddelande.

  6. I resultatsidan visar du om användaren gissade rätt eller fel. Du kan även visa det namnet som var rätt svar.

  7. När man börjar om så plockar du fram ett nytt namn och en ny beskrivning.

EXTRA

Om du har idéer och tankar kring hur du kan göra “spelet” mer roligt så får du gärna implementera det. Kanske kan du hitta ett sätt att även använda namnsdagarna och koppla ihop informationen med namn och betydelse. Se om du kan klura ut något.

#Övriga krav

  1. Kontrollera att dina sidkontroller passerar Unicorn validatorn. Om du har några valideringsfel på CSS kan det ibland vara okey, men du bör inte ha något valideringsfel på HTML.

#Publicera

Avsluta uppgiften så här.

  1. Kontrollera för dig själv att du har utfört samtliga krav.

  2. Validera din PHP-kod med dbwebb validate report, rätta de valideringsfel du har.

  3. När du är klar kan du publicera resultatet med dbwebb publish report. Se till att du inte har några valideringsfel.

  4. Testa ditt resultat så att det passerar de automatiska testerna med dbwebb test kmom04.

#Revision history

  • 2022-09-20: (C, mos) Stavning.
  • 2022-09-14: (B, mos) Genomgången och tog bort galleriuppgiften.
  • 2022-08-11: (A, mos) Första utgåvan till webtec-v2.

Document source.

Category: kurs webtec.