code-institute-submissions / sitetaskmanager-ms3 Goto Github PK

• About
• UX
  • Goals
  • User Stories
  • Styling
  • Wireframes
• Features
  • Existing Features
  • Features Left To Implement
• Technologies Used
  • Version Control
• Testing
  • Testing User Stories
  • Responsive Testing
  • Additional Testing
  • Code Validation
• Deployment
  • Live Website Link
  • Repository Link
  • Running Code Locally
• Credits
  • Content
  • Media
  • Acknowledgements

The website was created for Paul John Group to help the control of tasks between senior management and site staff on construction sites.

The mission was reduce the use of paperwork and email have a system that can be used to assign and track tasks that have been assigned to staff on site.

The website needed to be have limited options for site staff when they logged in so tasks cant be changed and be deleted by them. Contract Managers and senior management would have full access right to change database fields and tasks.

Users are assigned as Admin or not via the webmaster.

The goals of the website were:-

• To hold information on various tasks for site staff to complete and be able to track back on tasks that had been completed.
• The website must tie in with the company profile with the logo and images.
• The website must have a secure login for each employee
• The website must show correct on all devices from Laptops to mobile phones and tablets.

From the Designers Perspective:-

• The site needs to be easy to use and navigate due to the nature of business it will be used in.
• The site needs to be easy to view on all devices.
• The background and logo need to be construction and Paul John Group related.
• The system must have a clear difference between what a standard user can access and what a admin user can access.
• Other Database fields and tables must be easy to access to CRUD via the website for the admin user.
• The website and database access needs to be quick.
• There must be a clear difference to view open tasks and completed tasks.

From the users perspective:-

• I need to be easily access a task and complete it.
• I need to be find it easy to add tasks to database for different users and sites.
• I need to be able to add different tasktypes and assign them to tasks.
• I need to be able to search completed tasks based on words in the description.
• I need to be able to register standard users to the system.
• I need to site to have admin access and standard user access.
• I need standard user access locked down so data is only relevant to that user.
• I need admin access to give full access to the website.
• As admin I need to be able to search completed tasks.

The website must be easy on the eye but also you must be able to see the different fields, forms and buttons. I used a clear white see through background for forms and cards, used black, red or green for the buttons so they stood out and used black text Colour. The background image was an image that was construction related with a good colour scheme.

The below colour scheme was used for the menus and text.

The font chosed was Comfortaa because it was clear and concise. The backup font if google fonts didnt load is Sans-Serif.

The background image used for the site was a background of the sky and machines to keep with the construction theme.

Wireframes/Database Tables Link - Wireframes

Design Changes to Wireframes

• New Background image used which was clearer on all size screens.
• Changed the layout of the tasks information to go vertically instead of horizontal.
• Removed Social Media links from footer - not required just to software being used internally only.
• isAdmin field added to the user table is database design. This was a Boolean field. This can only be assigned to true by logging into mongodb as the system admin.

• The navigation menu shows at the top but shrinks to a burger on smaller devices and shows on the right side of the screen.
• Users can login and register to the system which will give them standard user access.
• Admin access must be given by the system administrator with access to MongoDB
• Different menu options show between admin and standard user.
• Admin users have access to all tasks for all users, all completed tasks for all users and management of tasktypes and sites.
• Standard users have access to there own tasks that have been assigned by a manager and there own completed tasks.
• Tasks are written in collapsible headers that can be expanded to view more information on the task.
• When a user logs in, the username and isAdmin is stored in a session variable in a cookie until the user logs out.
• The footer is pinned to the bottom of all pages.
• CRUD can be done by admin users on tasks, tasktypes and sites.
• Edit and Delete buttons are hidden for standard users, only admin have access to these buttons on manage tasks.
• Complete button is the only button shown to standard users.
• Sites and Tasktypes and Users are linked via the database when adding a new task.
• All fields must be completed when adding a task apart from the completion fields.
• Fields are checked when adding a task and marked red if not filled out.
• The due date field is DD/MM/YYYY - A data selector is always used to pick the date to avoid any data mismatches.
• A search function is only available for admin users on completed tasks so they can search on Product Descriptions and tasktypes for keywords.

• Pagination needs to be added as the database grows on complete tasks.
• Admin users can authorise other users in the database to be admin via user management
• Reports Menu to be added to Admin users so they can run reports on users and in date ranges.

• Materialize

  • Materialize was used for page structures and features like collapisble tasks and cards.

• HTML

  • HTML was used for the main structure of the website.

• JQuery

  • JQuery was used for materialize features that needed some javascript function - Side Menu, Collapsible.

• CSS

  • CSS was used to style and change sizes and positions of different items where materialize couldn't be used.

• Python

  • Flask
    • Flask was used for rendering template, URI's, Redirects, Requests and flash messages.
  • Bson
    • BSON was used to access the data in MongoDB and to access ID's
  • Werkzeug
    • Werkzeug was user to hash password entry when registering to the site and encrypting on MongoDB.

• MongoDB

  • MongoDB was used to store all data for the website.

• Google Chrome

  • Google Chrome Inspect and Developer tools was used for examining the website on different devices.

• Google Fonts

  • Google fonts was used for the font of the website.

• Font Awesome

  • Font Awesome was used for the icons on the forms.

• VS Code

  • VS Code was used as the development tool to create all pages. Different add-ons were used in VS Code to aid my developement. These add-ons included were:-
    • Auto Close and Rename Tag - to end tags automatically.
    • Beauty - To help Beautify my coding.
    • Color Highlight - Shows the colours in your coding.
    • CSS Peek - Allows you to show the CSS Next to your HTML Code, rather than going between the two files.
    • Live Server - Allows you to see the live webpage as you code
    • Markdown Preview Enhancer - Allows you to see your markdown file as you type.
    • Prettier - Allows you to Beautify your CSS.

• Balsamiq was used to create the wireframes

• VS Code

  • VS Code linked to the repositry in Github was used to do regular Commits from my changes and additions to the website.

• Github

  • Github was used to store the repositry online. All Adds/Commits go to this file online.

• Heroku

  • Heroku was used to store and run the application, heroku was linked to github to auto update.

To check how the site ran on different devices I used Am-I-Responsive and Inspect in Google Chrome Developer Tools. I also pushed out the site regular to the live area and accessed the link on my IPhone, Ipad and Macbook. While doing these tests I did the following:-

I also carried the following addtional testing:-

• W3C Markup Validation Service for HTML.
• W3C CSS Validation Service was used for validating the code.
• http://pep8online.com/ - For Validation Python Code.

https://site-task-manager-ms3.herokuapp.com/

https://github.com/MattMoore050783/SiteTaskManager-MS3

To deploy the project the following is required:-

• Python3
• Github account
• Heroku Account
• MongoDB Account

To create a clone follow the below steps:-

Github

1. Login to github and find the repository.
2. Click Code and open with Github Desktop.
3. Follow the prompts in the GitHub Desktop Application.

To work with the clone please follow the below steps:-

1. Install requirements.txt with the following code in the terminal window

pip3 install -r requirements.txt.

2. Create the Cluster in MongoDB.
3. Create the database in MongoDB
4. Add the following collections to the database

• sites
• tasks
• users
• tasktypes

5. Create Enviroment Variables

• Create a .gitignore file in the root directory of the project.
• Create a file in the root directory called "env.py". This contains all of your envornment variables. Your env.py file should look like the following:

Import os

os.environ.setdefault("IP", "")

os.environ.setdefault("PORT", "")

os.environ.setdefault("SECRET_KEY", "")

os.environ.setdefault("MONGO_URI", "")

os.environ.setdefault("MONGO_DBNAME", "")

6. Add env.py to the gitignore file

7. Create the procfile which is required when using Heroku.

To run the application from terminal use the python3 app.py command.

Heroku Configuration

1. Open Heroku.
2. Login or signup for Heroku.
3. Once logged in create a new app and select the region.
4. Deployment method "GitHub"
5. Select "connect to GitHub" and follow the on screen instructions. Once connected to your Github:
   1. Search for your repository using the form provided.
6. Once you have connected your GitHub repository:
   1. Navigate to the "Settings" tab:
      1. Scroll to the section "Config Vars" this is where you will tell Heroku what the variables are:
         1. Input data from env.py in the key value section: (e.g. SECRET_KEY in the first box, in the second box)
         2. Input all data for IP, PORT, SECRET_KEY, MONGO_DBNAME & MONGO_URI
   2. Navigate back to the "Deploy" tab:
      1. Scroll to the "Manual Deploy" tab:
         1. Select the branch you wish to deploy.
         2. Click the "Deploy Branch" button.

I used the following links to help my coding:-

• Code Institue task project for basic setup and and linking to MongoDB
• https://www.tutorialspoint.com/materialize/index.htm - For Materialize tips
• https://werkzeug.palletsprojects.com/en/1.0.x/utils/ - for Werkzeug tips
• https://palletsprojects.com/p/jinja/ - for Jinja coding
• https://stackoverflow.com/ - for various issues when writing queries in Python.
• https://www.w3schools.com/python/default.asp - for extra help and tuition with Python.
• https://www.youtube.com/watch?v=dam0GPOAvVI - for extra help with python and flask to understand it better.

All content for the site was based on what would be required by Paul John employees if this app was to be live.

All pictures were taken from Paul John on our existing website which I also developed

Many Thanks to the below for the help and guidances throughout my project:-

• My Mentor Maranatha
• Code Institues support team for increasing my hand in date and being supportive while i was working my day to day job through the pandemic.
• The slack community for feedback on my website.
• Code Institute and the learning programme Python and the task mini project.