文件列表:

.vscode/ (0, 2023-05-25)
.vscode/MAINTAINERS.md (6156, 2023-05-25)
.vscode/arctictern.py (5556, 2023-05-25)
.vscode/client.cnf (199, 2023-05-25)
.vscode/font_fix.py (610, 2023-05-25)
.vscode/heroku_config.sh (1022, 2023-05-25)
.vscode/init_tasks.sh (807, 2023-05-25)
.vscode/launch.json (388, 2023-05-25)
.vscode/make_url.py (417, 2023-05-25)
.vscode/mysql.cnf (551, 2023-05-25)
.vscode/rmdep.sh (114, 2023-05-25)
.vscode/settings.json (931, 2023-05-25)
.vscode/start_mysql.sh (488, 2023-05-25)
.vscode/upgrades.json (203, 2023-05-25)
.vscode/uptime.sh (726, 2023-05-25)
.vscode/version.txt (9, 2023-05-25)
Procfile (49, 2023-05-25)
bag/ (0, 2023-05-25)
bag/__init__.py (0, 2023-05-25)
bag/admin.py (63, 2023-05-25)
bag/apps.py (138, 2023-05-25)
bag/contexts.py (920, 2023-05-25)
bag/migrations/ (0, 2023-05-25)
bag/migrations/__init__.py (0, 2023-05-25)
bag/models.py (57, 2023-05-25)
bag/templates/ (0, 2023-05-25)
bag/templates/bag/ (0, 2023-05-25)
bag/templates/bag/bag-total.html (378, 2023-05-25)
bag/templates/bag/bag.html (6243, 2023-05-25)
bag/templates/bag/checkout-buttons.html (409, 2023-05-25)
bag/templates/bag/product-image.html (242, 2023-05-25)
bag/templates/bag/product-info.html (131, 2023-05-25)
bag/templates/bag/quantity-form.html (1380, 2023-05-25)
bag/templatetags/ (0, 2023-05-25)
bag/templatetags/__init__.py (0, 2023-05-25)
bag/templatetags/bag_tools.py (165, 2023-05-25)
... ...

Joio Entertainment

Welcome to the booking site for Joio Entertainment - an entertainment company offering services and products for use in live events. [View the live project here](https://joio-entertainment.herokuapp.com/). Joio Entertainment is a locally owned company based in LLanelli, Wales. The company offers a number of services and products for use in live events, ranging from birthday parties to weddings. The company is in desparate need of a website that will handle customers bookings and payments, thus removing much of the administration responsibilities from the company owner. # Table of Contents * [Website Concept](#website-concept) * [Project Goals](#project-goals) * [User Stories](#user-stories) - [As a New Visitor](#as-a-new-visitor) - [As an Unregistered User](#as-an-unregistered-user-including-all-prior-stories) - [As a Shopper](#as-a-shopper-including-all-prior-stories) - [As a Registered User](#as-a-registered-user-including-all-prior-stories) - [As a Store Owner](#as-a-store-owner-including-all-prior-stories) * [Aesthetic Design](#aesthetic-design) - [Site Flow](#site-flow) - [Wireframes](#wireframes) - [Desktop](#desktop) - [Tablet](#tablet) - [Mobile](#mobile) - [Colour Palette](#colour-palette) - [Images](#images) - [Font](#font) * [Database](#database) - [Data Schema Design](#data-schema-design) * [Technical Design](#technical-design) * [Accessibility](#accessibility) * [Features](#features) - [Interactive Elements and Features](#interactive-elements-and-features) - [Page Features](#page-features) * [Technologies Used](#technologies-used) - [Languages Used](#languages-used) - [Frameworks, Libraries, Programs and Tools Used](#frameworks-libraries-programs-and-tools-used) * [Testing](#testing) * [Future Updates](#future-updates) * [Deployment](#deployment) * [Credits](#credits) # Website Concept This will be a fully-interactive e-commerce website, with the main purpose to drive sales and take care of administration work for the company. This will be achieved by clearly displaying the catalogue of products offered, developing a calendar booking system and providing company information to customers. The site will also serve as an advertisement for the company, by sharing images and videos from previous events. Visitors can seamlessly browse through the websites vast range of products, through specific categories or even through personalized searches. By signing up for free, customers will be able to access additional features on the site, such as viewing upcoming bookings and posting reviews. All website features will be documented in this README document. The website will clearly display information for all visitors, including the company contact information via social media links and helpful customer information pages (About us, Contact Us and the relevant delivery and returns pages). The website is fully responsive on a range of devices - from hand-held devices to larger screens such as monitors and even TVs. This is to ensure that as many people as possible can visit and use the website. The website is welcoming to a range of visitors and provides a plesant user-experience with plenty of on-screen prompts on display. A whole host of intuitive features, matched with secure technology working in the background creates a smooth, safe and efficient user-friendly experience. The website is easily maintainable through the admin portal, but also allows admin/store owners to manage aspects of their store by just signing in to the website itself. This is of huge importance as it allows the store owner to easily update their store at any time, without having to contact their website developer. The website and the features built in to the design means it's adaptive and scalable - the store owners can add more products and in turn more user interactivity. This means that the website can develop with the company as it grows. [Back to table of contents](#table-of-contents) # Project Goals This is the fourth and final project submission for [Code Institute](https://codeinstitute.net/)'s 'Level 5 Diploma in Web Application Development' course. The task is to design, build and implement a full-stack e-commerce website that incorporates Django/Python. A shopping bag and checkout app will serve as the stores purchasing method, using Stripe's online payment processing system. This will be fully functioning, secure and tested with feedback provided to the users of the website. The projects goals are to emulate an application that's ready to launch - intending for the website to be passed over to the store owners and for them to manage the rest. This project provides an opportunity for the developer to showcase the backend and frontend skills acquired during the length of the course. The project will display proficiency in technical aspects already exposed to (HTML, CSS, JS, Bootstrap, Python to name a few) and to also fully embrace the practice of the 4th projects main study-material; Django, advanced deployment methods and security. The goals are to keep building on the skillset acquired throughout this course. Joio Entertainment will utilize a conventional relational database with a focus on CRUD functionality, implementing features available for all levels (visitor, registered user, admin). These will be apparent throughout the website, but also well covered throughout this README, TESTING & DEPLOYMENT documentation. [Back to table of contents](#table-of-contents) # User Stories Following are the goals that the website should provide for each user. | User Story ID | As a/an | I want to be able to... | So that I can... | | --- | ----------- | ----------- | ----------- | | Viewing and Navigation | | 1 | Customer | View a list of products and services offered | Quickly view all options and prices | | 2 | Customer | View individual service/product details | Find out further information about and see further images of the listing | | 3 | Customer | Be able to contact the company easily and quickly | Different modes of contact that suit the occasion | | 4 | Customer | Learn about the company | Decide if the company is compatible with the type of event i'm planning | | 6 | Customer | See available dates | Know that the company is able to commit to my booking | Not achieved | | 7 | Customer | See ratings and reviews | To help me make my decision | | Registration and User Accounts | | 8 | Site User | Easily register for an account | Have a personal account and be able to see my profile | | 9 | Site User | Easily login or logout | Access my personal info | | 10 | Site User | Easily recover my password | Access my account even if I've forgotten my password | | 11 | Site User | Easily access my user profile | Access my account quickly | | 12 | Site User | Have a personalised user profile | With my personal order history and be able to update my default billing address | | 13 | Site User | Be able to make an account after checkout | To be able to see my booking if I haven't made one before | | 14 | Site User | Make an account to leave ratings and reviews | Comment on my event and help others make a choice | | 15 | Site User | See my ratings and reviews in my user profile | So I can see what reviews/ ratings I have left easily | | Sorting and Searching | | 16 | Customer | Sort/ Filter services by dedicated filters. e.g. Music, photography, availability | know whats available for specific types of events | | 17 | Customer | Search for a service by name, description or key feature | Find a specific service I'd like to book | | 18 | Customer | See if there are no search results | Quickly see if nothing matches my search | | Purchasing and Checkout | | 19 | Customer | Be able to select the stay I want and book through the product page | Start the booking process | | 20 | Customer | Be able to review my bag and add or remove multiple products quickly | So I can see the changing price of my booking and what ive already added | | 21 | Customer | Be able to review my order details | So I can double check I have booked the right services for the right dates | | 22 | Customer | Easily enter my payment information | Check out quickly with no hassles | | 23 | Customer | Feel my personal and payment information is safe and secure | Confidently provide the needed information to make a purchase | | 24 | Customer | View an order confirmation after checkout | Know my order has gone through and I haven't made any mistakes | | 25 | Customer | Recieve an email confirmation after checkout | Keep a confirmation for my records | | 26 | Store Owner | Showcase featured listing | Give website visitors a quick sense of the types of listings available on my website | | 27 | Store Owner | Showcase featured categories | Give website visitors a quick sense of the types of categories of services available from the company | | 28 | Store Owner | Showcase featured reviews | Show social proof and build trust with website visitors | | Ratings & Reviews | | 29 | Customer | To be able to add a Rating/ Review | In case I wish to add a rating and or a written review | | 30 | Customer | To be able to delete a Rating/ Review | In case I wish to delete a rating and or a written review | | 31 | Customer | to be able to edit a Rating/ Review | In case I wish to edit a rating and or a written review | [Back to table of contents](#table-of-contents) # Aesthetic Design Once the User Stories and the projects intentions were set out, the next step was to design the aesthetic aspects of the website. ## Site Flow The linked documents ( view them ) shows the websites flow for three main possibilities: 1. Not Signed In - [Not Signed In](docs/site-flow-not-signed-in.png) 2. Signed In - [Signed In](docs/site-flow-signed-in.png) 3. Admin Signed In - [Admin Signed In](docs/site-flow-admin.png) This is covered in greater depth throughout this README and the TESTING documentation. This is to give a quick idea on what features are available for each level from 1 (Not Signed In) having the least amount of accessibility and features to 3 (Admin Signed In) having the most. ## Wireframes Wireframes were drawn using Balsamiq at the beginning of the project. They were referenced to throughout the design and building of the website. Following is a series of images showing the Joio Entertainment website on the three main screen sizes: mobile, tablet and desktop. Every major section of the website is also included. ### Mobile [Mobile Homepage](docs/wireframes/mobile-home.png) [Mobile Products](docs/wireframes/mobile-products.png) [Mobile Account](docs/wireframes/mobile-account.png) [Mobile Bag](docs/wireframes/mobile-bag.png) [Mobile Checkout](docs/wireframes/mobile-checkout.png) ### Tablet [Tablet Homepage](docs/wireframes/tablet-home.png) [Tablet Products](docs/wireframes/tablet-products.png) [Tablet Account](docs/wireframes/tablet-account.png) [Tablet Bag](docs/wireframes/tablet-bag.png) [Tablet Checkout](docs/wireframes/tablet-checkout.png) ### Desktop [Desktop Homepage](docs/wireframes/desktop-home.png) [Desktop Products](docs/wireframes/desktop-products.png) [Desktop Account](docs/wireframes/desktop-account.png) [Desktop Bag](docs/wireframes/desktop-bag.png) [Desktop Checkout](docs/wireframes/desktop-checkout.png) ## Colour Palette The Joio Entertainment website colour palette is predominantly dark, using bright "neon" colours which stand out against either a black or white background. The dark colours used for the header and footer match the company's images and reflects the style of a party or special events where the company usually operates. Dashes of brighter colours are present for the interactive elements in an effort to highlight these and to make a drastic contrast between said interactive elements and other non-interactive content. Although a black colour is used for certain elements of the site, it was decided that the body of the website should have a white colour, which allows the products and the main information on the pages to stand out more clearly. The main background image for the homepage reflects the colours used on the site and shows off some of the products that are offered by the company as soon as the user opens the site. The main text colour throughout the website is a dark grey. The page headings, page text and information use this. This creates a constant and obvious contrast between the much lighter background. The website's navbar and buttons almost all use a white text, always set against dark backgrounds. This is to ensure maximum readability and to draw the users eyes to focus on what's important - the products and buttons. By default, all buttons have a consistent style, size and layout throughout the website. See more in the buttons [Features](#features) section. Some text colour changes are seen throughout the website - red, usually reserved for error or validation purposes to grab the users attention. A neon blue is used for links and for the backround colour of general buttons to again help with contrast. ## Images The use of images is vital in creating a professional appearance for the company. Users are drawn by what they see. The background image on the homepage dominates the screen and draws the attention of new visitors. The product images are clearly displayed and well spaced on the product informantion pages. These images are responsive at different screen sizes. The high quality images will encourage visitors to continue browsing the website, and assure them of the quality of the products and services on offer. It's vital for the theme to be clear and obvious. The background image makes the website recognizable and memorable so visitors recall and return to it, which in turn will draw more eyes to the website. This, along with the CSS styling, colour palette and branding solidifies the theme. ## Font The Joio website uses the 'Montserrat' font. It provides that clean and clear style without compromising on readability - a vital design feature for any website. This is available for free via [Google Fonts](https://fonts.google.com/). Sans Serif is used as a secondary option in case of failure to load the font into the website correctly. Poppins is a font often used in designs, so it is both attractive and appropriate. There are some stylistic changes to the font (the use of ``````), but mostly with just colour changes for impact, attention or contrast and readability purposes. When the underline animation appears underneath the navbar text on cursor hover, they serve as hints to the user that that element can be interacted with. [Back to table of contents](#table-of-contents) # Database The Joio Entertainment website uses a relational database. Locally, Django's built-in SQLite database was used during development. For the deployed live version, the website is set up to use ElephantSQL's postgres database. ## Data Schema Design Here is the Database Schema layout for the Joio website: It shows each model present in the project and the relationship between them. This schema is essential for developing the website's functionality, its features and what users are capable of doing.. ### Model breakdown: - User - django's built-in [User](https://docs.djangoproject.com/en/4.1/ref/contrib/auth/#user-model) model. Uses Django's [allauth](https://django-allauth.readthedocs.io/en/latest/installation.html) application to deal with account authentication, registration and management. Contains user information such as username, password, email. - UserProfile - extends through django's User model. It contains user information that will be stored on the My Profile page and made available for the user when filling in the Checkout form. Connects to the User model. - Order - It contains all the information relating to the users order and history. Connects to the UserProfile and OrderLineItem model. - OrderLineItem - It contains information relating to an order and its items. Connects to the Product and Order model. - Product - It contains all of the information relating to a product found on the website. Connects to OrderLineItem and Category. - Category - It contains all of the information relating to a category. Related to products for filtering and sorting. Connects to the Product model. - Reviews - It contains all the information relating to a review that has been submitted by an user. It connects to the user model to ensure the user is authenticated and logged in. - Contact - It contains all the information relating to a contact form that has been submitted by an user. [Back to table of contents](#table-of-contents) # Technical Design Once the user goals, the projects intentions and aesthetic design were set out, the next step was to design the technical aspects of the website. ## Defensive Programming Accessibility, authorization and security levels can be controlled by combining django's authentication system found [here](https://docs.djangoproject.com/en/4.1/topics/auth/default/) and a other technical features written in custom code for the Joio website. The UserProfile model and django's User model are referenced on the backend in the views.py files and again in the templates. The `@login_required` decorator is used as another line of defence. Thie is found within the views files. This decorator limits access and secures these views to only signed in users. It is present for: - Adding a product. - Editing/Updating a product. - Removing a product. - Accessing the My Profile page. Further accessibility is given to admin/storeowners/superusers, for example: ``` if not request.user.is_superuser: messages.error(request, 'Sorry, only store owners can do that.') return redirect(reverse('home')) ``` The above code applies to adding, editing and removing the products from the website and prevents anyone other than those granted the highest accessibility levels. This stems from the User model by using `is_superuser`. ## Custom Error Pages Django will use the custom `404.html` and `500.html` templates created for the Joio Entertainment website whenever an error occurs. These contain a small message informing the user of the issue, and a link back to the home page. - 404 page: user is presented with this page when they attempt to access a page that does not exist. - 500 page: user is presented with this page when there is an internal error. ## Form validation Form validation is handled from the very beginning by defining the models fields and then building upon that. Forms are constructed in the `forms.py` files and can be targeted with python code in `views.py`, using the `is_valid()` method to return true or false. Templates with custom validation through HTML and JavaSript/jquery also handle validation and the use of Cross Site Request Forgery (CSRF) on forms adds security. Users are prevented from submitting invalid forms and are informed of this in multiple ways: - Invalid popup message next to affected inputs such as for the add products and checkout forms. - Red text message appears under or next to input, such as for the card payment field. - Allauth also handles validation for such forms as log-in, log-out and sign up. ## Django-Allauth Used for the user account authentication to ensure that security was always at the forefront of the design and implementation. ## Image Handling Using Django's templating language, the product pages load and check to see if an image is present. If ... ...