KOSI

Table of contents

1. Helpful links
2. Introduction
   • Scope
3. UX Design
   • Wireframes
   • Colour palette
   • Data Diagram
4. Features
5. User Stories
6. Templates
7. Technologies used
8. Testing
   • Usability Testing
   • Code validation
   • Features testing
   • Bugs
     • Unresolved issues
9. Deployment
10. References

Helpful links

• Live website
• GitHub Repository
• The README.md file
• Project Board
• Manual Testing
• Tasks
• Wireframes

---

INTRODUCTION

Kosi is a website app aimed at those looking to book courses. In this instance,

This website app provides an opportunity to users looking for short IT and computer programming courses.

TARGETED USERS:

• people interested in taking courses
• people of any age with preference for either online and/or in person course delivery

SCOPE

The scope for the Kosi web app is:

• Viewing course content whether logged in or not
• Adding a review when logged in
• Adding a rating when logged in
• Updating and Deleting own reviews that are still awaiting approval

UX DESIGN

The Kosi web app has been built with a simple but highly impactful design.

Wireframes

Below are the wireframes I created to aid the initial concept layout planning.

Colour palette used

I chose to use the colour palette below in order to give my web app a simple but trendy look so as to expand its appeal.

Data Schema

The Diagram illustrates the data relationship between the three main entities /models on which the Kosi web app is founded.

• The user model is automatially generated on creation of the Django project. The User model has a one to many relationship to both the Course model and the Review Model.
• The Course model has a one to many relationship with both the User model and the Review model
• The Review model has a many to one relationship to both the User model and the Course model

FEATURES

To achieve the goals and scope of this project, I have implemented the following features

1. Navigation

• The navigation for the Kosi web app is very simple and easy to ensure complete ease of use by anyone using any type of device.
• The navigation bar has the following tabs:
  • Kosi Logo - when clicked, routes the user to the courses list page
  • Courses - when clicked, routes the user to the courses list page
  • Login - when clicked routes the user to the login page
  • Register - when clicked routes the user to the Sign-up page

2. Registration

• To register, the user can click on the Register button in the navigation bar or use the Sign-Up button located on the login page

3. Logging in

• To login, the user can click on the Login button in the navigation bar; or use the login button located on the Sign-Up page or one on the course content page

4. Creating a review and adding a rating

• To create a review/add a rating, the user needs to log in first and navigate to the bottom of their chosen course content page

5. Viewing content

• The courses page displays the course list where each course has an image, excerpt, price, delivery and delivery_date

• Further course content is accessible when the user clicks on course excerpt link
• The user is able to view this course content without logging in first
• The user is also able to view approved reviews and star ratings added to a course both when logged in or not

6. Updating reviews and star ratings

• The user can only update their own reviews or star ratings
• To update reviews, the user needs to log in first and navigate to the bottom of their chosen course content page
• To update a review, the review must still be pending approval
• Star ratings can be removed by the user without approval. However, the user must be logged into the web app.

7. Deleting reviews

• The user can only delete their own reviews or remove star ratings they added
• To delete reviews, the user needs to log in first and navigate to the bottom of their chosen course content page
• To delete a review, the review must still be pending approval
• Star ratings can be removed by the user without approval. However, the user must be logged in the web app.

8. Viewing notifications/messages

• I have added messages/notifications to be presented for up to 3 seconds to the user following the activities below

Actions	Message
Successful log in	Successfully signed in as username
Successful sign up	successfully signed in as username
log out	successfully logged out
adding a review	Review awaiting check
Successful updating a review	Review Updated!
Unsuccessful updating of a review	Error updating review!
deleting a review	Review deleted

USER STORIES

• The user stories below have also been elaborated with acceptance criteria in the Project Board

• Also linked tasks have been detailed in the TASKS.md

REF No	USER STORY TITLE	USER STORY DESCRIPTION	PRIORITY	STATUS	SCOPE
18	User login process	As a site user I can log into the website so that I can add or update my reviews	MUST HAVE	DONE	IN
10	Account registration	As a site user I can register an account so that I can have access to personal profile	MUST HAVE	DONE	IN
15	manage course content	As a site admin I can create, read, update, and delete course content so that all the course content is up to date	MUST HAVE	DONE	IN
16	create draft course content	As a site admin I can create draft courses so that I can complete writing content later	SHOULD HAVE	DONE	IN
6	View course details	As a site user I can view course details so that I can view full course details	SHOULD HAVE	DONE	IN
4	course list pagination	As a site user I can navigate easily through the course list so that I can see all courses on different pages of the website	SHOULD HAVE	DONE	IN
11	add a star rating	As a site user I can add rating stars against any course so that I share my star rating for a course	MUST HAVE	DONE	IN
12	add a review	As a site user I can add a review against any course so that I can share my experience	MUST HAVE	DONE	IN
17	approve posted reviews	As a site admin I can approve or disapprove posted reviews so that I can remove subjective or rude commentary	MUST HAVE	DONE	IN
14	view reviews	As all users we can view course recommendations details against each course so that we can read reviews left by other users	MUST HAVE	DONE	IN
13	view star ratings	As all users we can view star ratings against each course so that we can view courses by star rating	MUST HAVE	DONE	IN
7	Register for a course	As a site user I can register for a course so that I can attend that course	COULD HAVE	NOT DONE	Future
8	View my booked courses	As a site user I can view courses I have booked/registered for so that I am aware of my course schedule	COULD HAVE	NOT DONE	Future

TEMPLATES

Templates created for this web app include

• base.html - loads bootstrap and fonts and also contains structuring for the navigation and footer, plus also contains block content tags [where content from the rest of the templates will be injected]

• signup.html - extends base.html and also has code to enable the user to create an account for accessing various areas of this web app

• login.html - extends base.html and also code to enable the user to log into the web app and add a review and/or a star rating

• course_detail.html - extends base.html and holds the course list and the course content details

• index.html -extends base.html and has a for loop that enables iteration through the courses.

TECHNOLOGIES USED

• HTML - To create the Django templates for the associated views and models in the project applications.
• CSS - To style the website.
• JavaScript - To enable a dynamic update and delete functions for the user on reviews awaiting approval. And used to enable a timed appearance of the messages/notifications
• Python – Is the primary language of Django and used to create all forms, models and views.
• Bootstrap - To provide extra styling and out-of-the-box elements e.g., burger menu.
• Google Fonts - fonts used in the web app
• ElephantSQL - the database used to deploy the web app to Heroku
• Cloudinary - used to store images linked to the web app
• W3C HTML Validator - to validate the Html code generated from the page source of the web app
• W3C CSS Validator - to validate the CSS code used/applied to web app
• JS Hint - to validate the JavaScript code applied for this web app
• CI Python Linter to validate the python code used in this web app
• Lighthouse - to assess that the performance, accessibility and best practices applied in this web app are of higher quality.
• lucid.app - for wireframing

TESTING

Usability testing

Responsive testing

• Also tested how the different pages render on all different sized devices and found no issues at all.

Lighthouse Test Results

• The above low performance is due to the script links placed in the header of base.html. When moved to the bottom, I get a bootstrap error in the console which also causes errors in my reviews.js

Code Validation

W3C HTML Validator

The HTML validator also showed a warning regarding a [hr] tag that I used to create a separators between the course content and the reviews container. This doesn’t affect my code and therefore I have left it in.

W3C CSS Validator

JS Hint

• Undefined variable
  • bootstrap
    • This loads bootstrap modal utilised in the course_detail.html template to facilitate the deletion of a review

CI Python Linter

• the python code has no errors from the code i wrote personally. The two errors about long lines in settings.py were generated automatically when Django project was created.

Features Testing

All features have been tested as part of the User stories testing.

For a detailed view of the manual testing carried out for all the user stories, see the MANUALTESTING.md file

Bugs and issues encountered

1. The animations on the register and login pages didn't work when app was first deployed to Heroku.

   • solution - added logo image to cloudinary and wrote added cloudinary link to CSS code for background image

2. CSS style text was visible on course content page

   • solution -manually removed the style text in admin site

3. There were bad/low accessibility mainly due to images not having alt text

   • solution - added title and alt text in meta data of each image in cloudinary

4. JavaScript console error

• this appeared when user is not logged in and is on the course content page.
• solution - added condition to the javascript code to check if that the reviewText.value was emptied before proceeding to delete review

Unresolved errors/issues

• There no outstanding errors from the code I created. The errors outstanding are coming from code auto-generated when django was installed.

DEPLOYMENT

1. Create Repository and set up project in GitHub

   • Create repository in GitHub using provided Code institute template
   • Create Project board and add automated workflow
   • Create user story template and apply it to create user stories
   • Add detailed acceptance criteria to all user stories and priority labels
   • Define the layout of the webapp using wireframing
   • Create tasks against each user story [in separate word document for reference and progress management during build]

2. Initial setup of the project in gitpod

   • Install Django using (pip3 install 'django<4') command
   • Create project using (django-admin startproject Kosi .) command
   • create new app using (python3 manage.py startapp Kosi_app) command
   • Add new app to installed apps in settings.py
   • Add the following supporting libraries: postgres and psycopg2 - using (pip3 install psycopg2-binary) command
   • Create requirements.txt file - using (pip3 freeze --local > requirements.txt) command
   • Install webserver using (pip3 install gunicorn) command
   • Create the Procfile
   • Create env.py file and make sure it is part of .gitignore file content
     • Add all to requirements.txt
     • Make migrations and migrate
     • Runserver to test set up and commit changes

3. Set up external Database in ElephantSQL

   • Create account in ElephantSQL using GitHub login details
   • Create new instance with Europe as region
   • Take note of the url for use later when setting up Heroku app

4. Set up Cloudinary storage for my images

   • Create Cloudinary account using GitHub login details
   • Take note of API and Secret key for use later

5. Create Heroku app

   • Log into Heroku and create new app
   • Set Europe as region and connect Heroku app to GitHub repository for this project

6. Connect remote database to Heroku app

   • From the Reveal config vars tab under settings module in Heroku, I added the keys below:
     • Elephant SQL database url,
     • Cloudinary storage url,
     • Postgres url,
     • Secret key,
     • Allowed host value,
     • Disablecollectstatic value

7. Continue development in gitpod workspace

   • In settings.py file

     • Under installed apps, add Cloudinary app, postgres, crispy forms, summernote, et al.
     • Amend default database url to point to database_url value already set up in Heroku

   • Following the MTV [Models, Templates and Views] architectural guidance

     • Create views in the a views.py file
     • Create a models.py file and add models relating to the views
     • Create admin.py to manage the created models and views
     • Create templates folders and proceed to amend code as needed
     • Create forms.py file
     • Create a urls.py file and add urls relating to the above
     • Create static folder in the root directory to house CSS, js and images folders
     • Add JavaScript code for edit and delete buttons on reviews
     • Create superuser details to access admin site

   • Add all to requirements.txt

   • Make migrations and migrate

   • Runserver to test set up and commit changes

8. Access admin site and create course content in admin site

   • Add course content
   • check front end web app to ensure course data is presented as needed
     • Add all to requirements.txt
     • Make migrations and migrate
     • Runserver to test set up and commit changes

9. Continue to amend/tweak code in templates, urls and models in line with scope

   • Add all to requirements.txt
   • Make migrations and migrate
   • Runserver to test set up and commit changes

10. Deploy to Heroku

    • Ensure all code is structured and runs as desired
    • Change DEBUG value to False
      • Add all to requirements.txt
      • Make migrations and migrate
      • Runserver to test set up and commit changes
    • Log into Heroku app
    • Delete value for DiSABLECOLLECTABLESTATICS
    • Navigate to deploy tab and choose desired deployment method - manual or automatic
      • at this point, I chose to use manual deployment in order to monitor any rising errors before final deployment

11. Final deployment to Heroku

    • Ensure all code is structured and runs as desired
    • Confirm there are no outstanding migrations
    • Change DEBUG value to False
      • add all code to requirements.txt file
      • make migrations and migrate
      • runserver to test set up and commit changes
    • Log into Heroku app
    • Comfirm the DiSABLECOLLECTABLESTATICS value has been deleted
    • Navigate to deploy tab and choose desired deployment method - manual or automatic
    • Deploy manually to ensure all okay
    • Change the deployment mentod to automatic

REFERENCES

• Harry Dhillon - my code institute mentor provided a lot of guidance and advice
• Code institute tutors - were very helpful when it came to understanding issues I faced throughout the build
• Stackoverflow - used as a resource for guidance on any errors or issues I encountered
• Followed the steps provided by the Code institute 'I Think therefore I Blog' walkthrough tutorial to build my web app
• studied and reviewed several YouTube tutorials to understand how to execute certain functionalities in Django
• Reviewed and referenced the information from below resources for guidance during build
  • https://docs.djangoproject.com/en/
  • https://www.w3schools.com/
  • https://getbootstrap.com/docs/5.3/getting-started/introduction/
  • https://www.geeksforgeeks.org/