small tent logo
small tent logo

Credits

Design & Security Report Documents:

For all website features, security report, and full Harvard references, please open the documents

Design Document

All References

  1. CSS Media Queries. Available at: https://www.w3schools.com/css/css3_mediaqueries.asp (Accessed: 25 January 2024).
  2. Creating validation for preventing under 18s registering to site using DateTime. Available at: https://stackoverflow.com/questions/676824/how-to-calculate-the-difference-between-two-dates-using-php (Accessed: 15/3/24)
  3. CSS transition effects learned at W3Schools (https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2 ) (Accessed: 18 Feb 2024)
  4. Damme, T.V. et al. (2022) A complete guide to flexbox: CSS-tricks, CSS. Available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Accessed: 24 January 2024).
  5. Dave (2024) 30 Best Music Festivals in Europe for your bucket list (2024), Jones Around The World. Available at: https://www.jonesaroundtheworld.com/30-music-festivals-in-europe-to-experience-before-you-die/ (Accessed: 02 February 2024).
  6. Day And Night PNG. https://pluspng.com/day-and-night-png-4178.html
  7. Preventing Chinese characters in input form (2010). Available at: https://www.php.net/manual/en/function.preg-match.php (Accessed 19/3/24)
  8. Fonts: Google (no date) Roboto, Google Fonts. Available at: https://fonts.google.com/specimen/Roboto (Accessed: 21 March 2024).
  9. Hamburger menu - How TO - Mobile Navigation Menu https://www.w3schools.com/howto/howto_js_mobile_navbar.asp . (Accessed 16/2/24)
  10. Icons for dashboard: (No date a) Free icons and stickers - millions of images to download. Available at: https://www.flaticon.com/ (Accessed: 10 March 2024).
  11. Images: Olivia Holborow, A.S. (2023) UK festivals 2023: 26 of the best, CN Traveller. Available at: https://www.cntraveller.com/gallery/uk-festivals-best (Accessed: 19 January 2024).
  12. Images: Dave (2024) 30 Best Music Festivals in Europe for your bucket list (2024), Jones Around The World. Available at: https://www.jonesaroundtheworld.com/30-music-festivals-in-europe-to-experience-before-you-die (Accessed: 28 January 2024).
  13. LOGO - Tent Free Transparent Image HQ PNG image (no date) FreePNGImg. Available at: https://freepngimg.com/png/51383-tent-free-transparent-image-hq (Accessed: 20 January 2024). Use for creation of Logo.
  14. Olivia Holborow, A.S. (2023) UK festivals 2023: 26 of the best, CN Traveller. Available at: https://www.cntraveller.com/gallery/uk-festivals-best (Accessed: 27 January 2024).
  15. Roboto Font Style (no date) Google Fonts. Available at: https://fonts.google.com/specimen/Roboto (Accessed: 02 February 2024).
  16. The PHP Group (no date) Ob_start, php. Available at: https://www.php.net/manual/en/function.ob-start.php (Accessed: 19 March 2024).
  17. Using CSS Transitions (no date) CSS transitions. Available at: https://www.w3schools.com/css/css3_transitions.asp (Accessed: 24 January 2024).
  18. Using PHP $_post (no date) PHP $_POST. Available at: https://www.w3schools.com/php/php_superglobals_post.asp (Accessed: 02 February 2024).
  19. W3School (no date) CSS layout - the position property. Available at: https://www.w3schools.com/Css/css_positioning.asp (Accessed: 20 March 2024).
  20. What's the use of ob_start() in php? Output buffering issue with my header redirect: https://stackoverflow.com/questions/4401949/whats-the-use-of-ob-start-in-php s (Accessed: 18-3-24)

Fonts

Font used is Roboto from Google: https://fonts.google.com/specimen/Roboto Fonts: Google (no date) Roboto, Google Fonts. Available at: https://fonts.google.com/specimen/Roboto (Accessed: 21 March 2024).

Other CSS Tricks

CSS Trick for drop down menu gathered from W3Schools and CodeBoxx.com

CSS transition effects learned at W3Schools

Media sizes utilised from previous experience of developing websites.

Festival Information

Images and other information gathered from:

  • https://www.cntraveller.com/gallery/uk-festivals-best
  • https://www.jonesaroundtheworld.com/30-music-festivals-in-europe-to-experience-before-you-die/

Design Overview

Here you will find a selection of design documentation for this site.

Wireframes

Homepage

image of homepage wireframe

This is the homepage initial design.

Events Page

image of homepage wireframe

This is the events page initial design.

About Page

image of about page wireframe

This is the about page initial design.

Log in Page

image of log in page wireframe

This is the login page initial design.

Logos

T's Festival Logo

logo designs

Two logos created on figma.com to enable responsive web design. Photo of Tent by https://www.pngarts.com/explore/107612 (2018)

Functionality

  • Modular design. Several template files are used to create the header and footer which allows for easy customisation of things like the search bar, header navigation menu and footer style.
  • Search & filter functionality. You can search for festivals based on keywords as well as filter festivals based on budget via a drop down menu.
  • Secure dashboard page for bookings. Cannot access dashboard.php unless logged in. Uses PHP's SESSION function and header redirects.
  • To top button for easy return to top of page.
  • Secure log on using password hashing and sessions with a user dashboard to show their current bookings (pulled from DB).
  • Users cannot book anything until logged in. Booking form is blocked until they are signed in.
  • Promotion and top picks function. Allows admins to change a festival status to 'promotion' which applies a 40% (or whatever they choose) discount. Top picks are displayed in the home page. These are both Bool datatypes in the DB.
  • Booking confirmation page that confirms user booking and provides seamless navigation back to dashboard or homepage/logout
  • PayPal payments integrated. Functionality to cancel tickets
  • Admin backend dashboard to allow the administration of site via special credentials. Admin can add and delete events as well as see all events/customers signed up to site. Easy to understand icons allow the user/admin to perform certain functions.

Design Elements

  • Responsive design using media queries, site converts to 'mobile' friendly when reduced to small screen with simple hamburger menu and enlarged search box/button
  • Theme switcher. Dark/Night Mode
  • Hover over, images grow bigger and buttons change colour etc
  • Dynamic Navigation bar depending on if user is logged in or if they are and admin / user (admin or my account shown).