The site was built, tested and validated on the Chrome browser only.
Materialize v1.0.0 was used for building the site - see the supported browsers.
-
Materialize is compatible with:
- Chrome 35+
- Firefox 31+
- Safari 9+
- Opera
- Edge
- IE 11+
-
Devices supported:
- Mac
- Windows
- Android
- iOS
-
The Materialize standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width. See the section Creating Responsive Layouts in the Materialize documentation on how to design the layouts so that they look great on all screen sizes.
Device Class Prefix Dimensions Mobile .s <=600px Tablet .m > 600px Desktop .l > 992px Large Desktop .xl > 1200px
"As a user, I would like to _____________________________"
-
create, read, update and delete my own plant records
- All logged-on users are able to view, add, edit or delete their own plants via appropriate pages:
- View
- All logged-on users are able to view, add, edit or delete their own plants via appropriate pages:
-
easily understand how to use the site
- Instructions on how to use the site are detailed on the About page.
-
keep my information secure
- Users need to register with a unique username and password.
-
Passwords are hashed for security purposes by Werkzeug. This is a comprehensive WSGI (Web Server Gateway Interface) web application library.
-
Further security is provided by defensive programming and Flask login-decorators. There are two decorators for this site; one for users and another for the administrator. These decorators 'wrap' the user/administrator editing functions and check if they are in fact the owner of the records:
- User login decorator for the profile page.
The same decorator is used for the log out / add plant pages
- Administrator login decorator for the category page.
The same decorator is used for the add category page.
-
For the edit plant / delete plant pages; a check is made to see if the current session user is the owner of the plant record. If not, they are taken to a 404 page.
-
view the site without logging in
- Anyone can view all the plants on the home page, without registering or logging in:
-
search for plants to feed my pet
- Users are able to search on keywords from the fields:
- plant name
- plant description
- set month
- animal name
- Users are able to search on keywords from the fields:
-
search for plants that I need to set in a particular month
These cases are included in order to help the next developer understand the design of the site and how to extend it. They document the look and functionality of each page. All pages and features will function and look the same whether on desktop, tablet or mobile, except for the
-
shorter branding (Vazy instead of Vazy Garden) and hamburger menu for mobiles and some tablets
When the menu icon is selected, it reveals a sliding lefthand panel listing the menu options. Select an option to navigate to the appropriate page.
-
number of cards displayed across the screen:
- desktops tend to show three cards across
- tablets tend to show two cards across
- mobiles tend to show one card across
Note that some limited defensive programming is included in order to build a more secure app, but it is outside the scope of the project criteria.
The following logs detail the testing carried out:
-
Results
-
Screenshots
- Step 2
-
Results
-
Screenshots
- Step 2
- Access Denied
-
Results
-
Screenshots
- Step 3
-
Results
-
Screenshots
- Step 3
-
Results
-
Screenshots
- Access Denied
-
Results
-
Screenshots
- Step 3
-
Results
-
Screenshots
- Step 4
-
Results
-
Screenshots
- Step 4
-
Steps 5 to 11 have the same form validation as the Add Plant form above
-
Step 17
-
Results
-
Screenshots
- Step 3
-
Results
-
Screenshots
- Step 3
Test Case Template provided by Thomas Hamilton on GURU99
-
HTML - No errors or warnings were detected by W3C Validation for pages:
- get_plants.html PDF report
- about.html PDF report
- profile.html PDF report
- add_plant.html PDF report
- edit_plant.html PDF report
- delete_plant.html PDF report
- categories.html PDF report
- add_category.html PDF report
- register.html PDF report
- login.html PDF report
- 404.html PDF report
- 500.html PDF report
HTML with Jinja2 code will cause errors in the validator. A quick fix is to:
- right-click the live page and
- select "View page source" instead of "Inspect"
Credit: Jo Heyndels, Learning Success Executive at Code Institute
-
CSS - No errors or warnings were detected by Jigsaw (W3C) Validation for:
-
JavaScript - No errors or warnings were detected by JSHint for script.js:
-
Python - No errors or warnings were detected by CI Python Linter for:
- app.py
- decorators.py
-
Lighthouse minimum scores:
Full PDF reports:
-
404.html report - Lighthouse was unable to generate this:.
- Used WebPageTest instead - see the article Why you should be testing your 404 pages web performance by Matt Hobbs on Nooshu.com
-
WebPageTest summary:
Full PDF reports:
-
Lighthouse minimum scores:
Full PDF reports:
-
WebPageTest summary:
Full PDF reports:
The majority of testing and validation was carried out on the Chrome browser with a Windows 10 desktop, but to ensure that a broad range of users can successfully use this site, it was also tested with other browsers in both desktop and mobile configuration.
- Chrome v.112
- Edge v.18
- Firefox v.106
- Safari v.13
- Opera v.97
The results are shown below in a testing matrix:
The original Excel version created by Tim Nelson, can be found here.
- Misalignment of Materialize grid columns
- Solved by assigning margin-left to 0
for both tablet and desktop
- Unauthorised access to get_category page
Whilst not logged in, a user was able to access this page by manually typing the url
- Solved by using a Flask login required decorator. This decorator can be found in decorators.py
it is used to wrap the administrator functions in app.py
- Large card image
User was able to add link to a large image
- Solved by limiting the image size in the CSS. See CodePen Home Materialize - Fixing Card Images by Jay Holtslander
- Overflow of branding and logo on mobiles
- Solved by adding separate media queries for default branding and an abreviated one for mobiles. See post from George Kagan and FdM on Stack Overflow
- Duplicate categories
- Solved by converting category text to lowercase before checking if it exists in the database.
- Not listing plants in alphabetical order
- Solved by converting the plant name to lowercase before storing in the database because uppercase letters are listed before lowercase
- Materialize form validation issue for dropdown selection on Chrome with Windows 10/11.
The dropdown fields for the Add Plant form showed the red underline on fields already selected. It did not affect the functionality as these records were still able to be added to the database. After discussion with the Alan McGee, Code Institute tutor, we decide that this was a Chrome browser issue in Windows 10 (my PC) and 11 (tutor's PC). I had already cleared the cache, deleted all history, restarted Chrome, restarted Windows, checked Chrome was the latest version. This issue was not present for Chrome on Mac, iPhone or Android.
- Solved - As Windows with Chrome is a very popular setup, this issue could not be ignored, so I decided to set default values for the dropdown selections on the Add Plant form - this was inspired by the Edit Plant form not presenting this validation issue.
- W3C error for section tag containing Flash messages in template, base.html
- Solved by replacing the section tags with div ones
- W3C error on add_plant.html for option element of select element with a required attribute
- Solved by removing the required attribute - there is already a default selected
- W3C error on edit_plant.html for select element cannot have more than one select option descendent
- Solved by setting the value attribute as an empty string as the value is selected in for-loop of the Jinja code
- User mistypes Unsplash image link
- Solved by adding a backup imaging informing the user of the broken link. See Setting a Fallback Image in HTML for Broken or Missing Images by Niall Maher on Codú
- The error was removed by running the site on Chrome in Incognito mode.
Stack Overflow user Chrostip Schaejn advised that this error was cause by various Chrome extensions.
- Fallback image for when a user mistypes the image address on forms
This causes a 404 error in the console and should only be used as an indicator of a broken link. The moderator should discourage users from leaving any links broken.