Practicum opdracht 3. Groep AJ2. Opdracht 1. Opdracht 2. Allard de Jong Jos Verheij Joey Cilissen

Transcriptie

1 Practicum opdracht 3 Groep AJ2 Allard de Jong Jos Verheij Joey Cilissen Opdracht 1 Bij het ontwerpen van de bestelprocedure wordt sterk rekening gehouden met de gebruiker. Het formulier bestaat uit 3 delen. In het derde scherm dient de gebruiker zijn persoonlijke gegevens in te vullen. De volgorde is zo gekozen om de gebruiker zoveel mogelijk zijn eigen keuzes te laten maken, voordat hij daadwerkelijk over gaat tot betalen. Wat betreft de PHP is er gekozen voor een configuratiebestand met alle activiteiten en accommodaties, genaamd cfg.php. Op deze manier is het eenvoudig om nieuwe variabelen, activiteiten en accommodaties toe te voegen. Op dit moment wordt er gebruikt gemaakt van een array hiervoor. Elke keer als de gebruiker naar een volgend scherm gaat, wordt POST data gebruikt voor het opslaan van de informatie. In het eerste scherm worden alle accommodaties en activiteiten geladen door middel van een foreach loop. In het tweede scherm wordt de prijs van de accommodatie en de activiteiten aan de gebruiker weergegeven. Nu heeft hij de keuze om data te kiezen voor zijn vertrek en terugkomst. Deze data wordt later nog gebruikt om de totale prijs te berekenen. Bij deze berekening wordt rekening gehouden met bepaalde controles. Als iemand bijvoorbeeld niet deel neemt aan activiteiten, zal dit geen nulls of errors veroorzaken. In scherm 2 en 3 is het mogelijk om terug te keren naar het vorige scherm door gebruik te maken van een simpele HTML knop die fungeert als link. Het is helaas niet gelukt om ervoor te zorgen dat de informatie van de gebruiker wordt opgeslagen. In het laatste scherm voert de gebruiker zijn persoonlijke informatie in. Deze informatie wordt wederom opgeslagen met behulp van POST data. Als alle velden zijn ingevuld, dan kan de gebruiker de bestelling voltooien door op de Voltooien knop te drukken. Deze knop leidt naar een bevestigingspagina. Hier staat dat een mail met factuur is verzonden naar de gebruiker. Deze mail is verstuurd met the mail functie die ingebouwd zit in PHP. De gebruiker is nu vrij om andere pagina s op de site te bezoeken. Opdracht 2 De stijlen uit opdracht 2 zijn iets aangepast zodat ze beter werken met de andere pagina s op de website. De code werkt als volgt:

2 Bij het openen van een (willekeurige) pagina op de website wordt er gecheckt of er een cookie is opgeslagen en zoja, welke stijl in de cookie is opgeslagen. <?php if (isset($_post['stijl'])) { setcookie('stijl', $_POST['stijl'], time()+36*24*7, '/', 'localhost'); $stijl = $_POST['stijl']; } elseif (!isset($_cookie['stijl'])) { setcookie('stijl', 'custom', time()+36*24*7, '/', 'localhost'); $stijl = 'custom'; } else { $stijl = $_COOKIE['stijl']; }?> Na het checken van de juiste stijl wordt deze opgeslagen in de $stijl variabele. Hierna worden op verschillende plekken in de html met php gecontroleerd welke stijl wordt gebruikt en worden verschillende waarden (voor bijvoorbeeld de css) gebruikt. Voorbeeld: [html code] <?php if($stijl == 'custom') echo 'css/bootstrap.min.css'?> [/html code] Het wisselen van de stijl werkt door middel van het sturen van een hidden form met javascript zodra er op een stijl button wordt geklikt. Hierna wordt de pagina herladen en wordt met bovenstaand beschreven code de stijl gecontroleerd. In het bovenste stuk code is ook te zien dat er een check gedaan wordt op de $_POST variabele. Als deze is ingesteld (met de hidden form) wordt meteen de $stijl variable goedgezet.

3 Onderstaand de javascript code voor het versturen van de form: $('.switch').click(function() { [...] stijlform=document.createelement('form'); stijlform.method='post'; stijlform.target='_top'; stijlform.action='<?php echo $_SERVER['PHP_SELF'];?>'; inputstijl=document.createelement('input'); inputstijl.type='hidden'; inputstijl.name='stijl'; inputstijl.value=style; stijlform.appendchild(inputstijl); this.appendchild(stijlform); stijlform.submit(); } }); De code hebben we zelf ontworpen. De gebruikte bronnen zijn de PHP Manual (php.net), stackoverflow.com en W3schools geweest. Opdracht 3 Google map widget Op elke pagina, waar locatiegegevens van items worden weergegeven, is een locatiepaginalink toegevoegd. Deze link brengt de gebruiker naar een desbetreffende locatiepagina waar een google map aanwezig is. In deze map zijn de locaties aangegeven en is er een route getekend vanaf het eerst aangegeven item.

4 Er is gekozen voor een aparte locatiepagina mede omdat andere plaatsen ons onjuist leken. Een google map i.p.v. de locatie link is visueel niet mooi en overzichtelijk. Deze zou dan onderaan de pagina komen waar de google map een gat slaat in de pagina ook maakt het de opmaak drukker. Buiten deze locatie zou er geen mogelijk plaats zijn voor deze widget. Weerwidget weeronline Op een aantal pagina's is een weerwidget aanwezig. Bij elke van deze categorieën is het handig om te weten wat voor weer het wordt. Hieronder kleine opsomming wat de widget toevoegd voor de toerist: Amusement pagina: De activiteiten in Valkenburg zijn buiten activiteiten. Pretparken en speeltuinen zullen een minder gewenste keuze zijn bij slecht weer. Natuur pagina: Misschien wel het meest relavant voor deze pagina. Wandelen en fietsen zijn vooral activiteiten die afhankelijk zijn van het weer. Daarom er is voor deze pagina gekozen voor een weerwidget die een ook een cijfer geeft voor het fietsweer. Er is niet gekozen voor wandelweer om wandelweer niet per sé goed weer betekent en fietsweer dat natuurlijk wel is. Verder is het equivalent is aan goed wandelweer. Cultuur: Ook sommige culturele bezienswaardigheden zijn niet overdekt waardoor een weerwidget ook handig is. Bron code: Opdracht 4 Evenals bij opdracht 2 is de code zelf ontworpen en zijn de PHP Manual (php.net), w3schools en stackoverflow.com aangehaald. De werking gaat als volgt: De gebruiker kan in een formulier zijn of haar naam, adres en bericht invullen. Bij het klikken op de submit knop ( Plaats bericht ) wordt een apart php bestand aangehaald die de berichten uit $_POST in een enkele regel zet en deze toevoegd aan de textfile chat.txt. Vervolgens wordt de gebruiker geredirect naar de chat pagina en is het nieuwe bericht meteen te lezen. <?php $naam = $_POST['naam']; $ = $_POST[' '];

5 $date = date('r'); $bericht = $_POST['bericht']; $break = '[#SPLIT#]'; $message = $naam. $break. $ . $break. $date. $break. $bericht. "\n[#end#]\n"; file_put_contents('chat.txt', $message, FILE_APPEND); header("location: chat.php");?> Het verwerken van de text gebeurt op de chatpagina ( chat.php ) met een aantal php-functies. Eerst wordt de hele txt-file opgehaald en in een array gezet, waarbij per bericht-regel een nieuw array item wordt aangemaakt. Deze array wordt met array_reverse() omgekeerd, zodat de nieuwste berichten bovenaan de pagina komen te staan. Vervolgens wordt voor elk item in de array een html blok neergezet waarin de naam, adres, datum en bericht worden geplaatst. Deze gegevens worden eerst onttrokken uit de tekstregel met preg_split(). <?php $messages = preg_split("/\n\[#end#\]\n/", file_get_contents('chat.txt')); $messages = array_reverse($messages); array_shift($messages); foreach ($messages as $msg) {

6 $msg = preg_split("/\[#split#\]/", $msg); $naam = $msg[]; $ = $msg[1]; $date = $msg[2]; $bericht = $msg[3];?> <div class="span4 msg-box"> <div class="msg-name"><strong><?php echo $naam?></strong></div> <div class="msg- "><small><?php echo $ ?></small></div> <div class="msg-date"><small><?php echo $date?></small></div> <div class="msg-msg"><?php echo $bericht?></div> </div> <?php }?> Evaluaties Eigen evaluatie: Voor de site van Nick Jansen en Leandros Stefanou. Joey Cilissen Persoonlijk: heuristic location reason severity 1 Visibility of system status Geen highlights 2 Match between Alles prima

7 system and world 3 User control and freedom Hoewel alles op 1 pagina staat geeft het goed overzicht en veel vrijheid 4 Consistency and standards 5 Help users recognise, errors Bestelformulier Geen errormessage bij commiten bestelling. Foutmelding komt pas ná het klikken. 3 6 Error prevention Bestelform en fotogalerij 7 Recognition rather than recall 8 Flexibility and efficiency of use Geen preventie van errors 4 Alles goed zichtbaar 9 Aesthetic and minimalist design Belangrijke elementen niet beter zichtbaar. 1 1 Help and documentation 11 Skills Het gebruik van één pagina maakt het moeilijker om belangrijke pagina's te herkennen 3 12 Pleasurable 13 Privacy Jos Verheij Persoonlijk: heuristic location reason severity 1 Visibility of system status 2 Match between system and world Geen highlights 3 User control and freedom URL veranderd niet bij veranderen pagina 2 4 Consistency and standards

8 5 Help users recognise, errors Bestelformulier Geen foutmeldingen, OK knop doet niets, Verstuur bericht op onduidelijke locatie 3 6 Error prevention Bestelform en fotogalerij 7 Recognition rather than recall 8 Flexibility and efficiency of use Inconsistentie in wegklikken fotogalerij en bestelformulier 1 9 Aesthetic and minimalist design 1 Help and documentation Menu neemt veel ruimte in 1 11 Skills Geen onderscheid in belang van elementen 12 Pleasurable 13 Privacy Allard De Jong Persoonlijk: heuristic location reason severity 1 Visibility of system Geen highlights status 2 Match between system and world 3 User control and freedom Navigeren gaat zoals het hoort te gaan, geen problemen 4 Consistency and

9 standards 5 Help users recognise, errors Bestelformulier OK knop heeft geen functie, dus geen idee of je fouten maakt 2 6 Error prevention 7 Recognition rather than recall 8 Flexibility and efficiency of use Het is alleen mogelijk een menu te laten inklappen door een andere te laten uitklappen. 1 9 Aesthetic and minimalist design Menu neemt veel ruimte in en soms lijkt het alsof elk menu een submenu is van een ander menu 1 1 Help and documentation 11 Skills 12 Pleasurable Weer/Twitter Het doorzichtige design van het weer en van de Twitter box zorgen ervoor dat het niet plezierig is om naar te kijken 1 13 Privacy Teamscore: heuristic T 1 2

10 x 8 6 x x 1 9 x x 3 12 x 1 13 Evaluatie eigen site Doordat het andere team ons een pdf bestand stuurde waar niet uit gekopieerd kan worden is het niet mogelijk dit bestand hier weer te geven. Het bestand staat in de map docs onder de naam " evaluatie Valkenburg door Joran.