search

SiobhanBaines / Ciara-and-Sams-Big-Day

The Wedding Day - Guest Planning
0 stars 1 forks source link

readme

Ciara and Sam's Big Day

Project Outline

This site is closed to the general public and as such there are instructions on How to Use

This site will provide the bride and groom with the ability to give their wedding guests all the information they need for the day and a way to accept or decline the invitation, decide which menu choices each member in the guest's party want and chose a wedding gift or gift some money. The bride and groom will have control over the guest details, the menu choices, the days' schedule and the gift list. The site will also give the bride and groom the ability to check the status of the invitations and the menu choices the guests have made which will allow the bride and groom to chase only those who have not replied or have provided details of food requirements. Finally, the bride and groom should be able to arrange the table seating based on the guests who have accepted.

Mock up Image image You can find the original website here ciara_and_sams_wedding.

Table of contents

UX

User Goals

Back to Top

User Stories

Bride or Groom

Wedding Guest

Back to Top

User Requirements and Expectations

Requirements

Expectations

How to Use

When this website is being used the data it will contain will be personal information and as such comes under GDPR. To help protect this data, only the bride, groom and wedding guests will have access to the website's main functionality.

Standard websites have a register page which can be accessed via a navigation item but to help protect the data this site does not have that navigation item.

Bride and Groom

Registration

The bride and groom need to register an account to be able to maintain the data in the various models. Normally there would be a registration navigation link but to help secure their data this link is not visible. The bride and groom will need to add /register/ to the end of the website url. This will bring up the registration page where tey will be asked to enter the STAFF_SECRET code. Once they are registered the site will grant them is_staff authority and they will be able to log-in and create their data.

File Uploads

There is a modal pop-up for each of the file upload tools (Guests, Schedule, Menu, Gifts) with instructions related to the specific upload which can be view by clicking on Upload Help.

Guest

When a guest receives their invitation, it will contain the guest Group Id that was created when the guest list was uploaded. The password is the known postcode for the guest at the time of uploading the guest list.

Back to Top

Design Choices

In designing this, site I want to incorporate the bride and grooms colour scheme (mint green and peach) with the rustic but romantic feel of the venue with it's open beams and stunning views across the golf course. To make it special to Ciara and Sam a photograph of them will appear on the landing page.

Colours

The colours of the site are taken from the colour scheme the bride and groom have decided on which is mint green and peach. I have chosen to make the main colour off-white to keep the site bright and airy without being stark that would come with bright white as the main colour. I initially used this image and icolorpalette to create a colour palette but the colours were muted in the palette so went back to the image and selected each of the block colours to find the closest match.

The main background colour will be #FCFCF4 which is almost white and will create a bright and airy feel to the site

Fonts

In order to find appropriate fonts for my website, I have visited Google Fonts to explore the various options.

For the initials of the bride and groom I will use the cursive font Lovers Quarrel, for the titles and subtitles I will use the font Italianno tbd and for the main text I will use Nunito <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Italianno&family=Lovers+Quarrel&family=Nunito:wght@200&display=swap" rel="stylesheet"> font-family: 'Italianno', cursive; font-family: 'Lovers Quarrel', cursive; font-family: 'Nunito', sans-serif;

Structure

Landing/Home Page

The landing page is designed to welcome the visitors and encouraging them to engage with the site. There will be an image of the bride and groom and some images and highlevel details of the ceremony and reception venues. There will be a Guests button which will take the guests to the RSVP page.

Our Story Section A small introduction to the bride and groom with a full width carousel of images of the happy couple.

Location Section Will show some of the history of York and a map of the area.

Covid19 Section The current Covid19 restrictions will be shown here assuming they will still be needed by the date of the wedding.

Registration

Only the bride and groom need to register because the guest's login credentials will be created when the guest list is uploaded. This is why the link is very small and at the very bottom of the main page. When a user registers they will be given is_staff status.

Login

The guests will be asked to login using a unique identifier, which will be on the wedding invitation and to confirm the postcode where the invitation was sent. From here they will automatically be taken to the RSVP page.

RSVP Page

The first time the guest logs in, they will be asked to accept or decline the invitation and there will be the opportunity to leave a message. Subsequently the guest will have a navigation menu where they will have access to the menu, the gifts, the full venue details, the schedule of the day and useful local information. If a guest has declined the invitation they will still have access to buy a gift if they desire.

Guests Menu Page

The guest's version of the menu page will have the menu options list and the names of all the guest in that party. There will also be a box under each name to give details of any allergies or special dietry requirements. Sandburn Hall have said they will do their best to accommodate all dietry requirements.

Venue

Contains some information about the church where the ceremony will be held and about the receiption venue. There will be an image of each venue and the GoogleMaps location.

Gifts Page

This page will have details of any specific gifts the bride and groom would like where the guest wants to buy a present instead of giving the bride and groom money. There will be a donation box for the guest to gift the bride and groom money using Stripe payments

Wedding Schedule Page

Full details of the expected schedule of the day will be details here. * time the ceremony starts

Guest List Page

The guest list page will consist of 4 pages.

Menu Maintenance Page

The menu maintenance page will consist of 5 pages.

Gift Maintenance Page

The gift maintenance page will consist of 4 pages.

Back to Top

Wireframes Flowcharts and Database Structure

Wireframes

I used Balsamic to create wireframes for my website.
For each page I created 3 wireframes: desktop, tablet and mobile.

Back to Top

Flowcharts

Some of the flow of the site was a little complex so I created a flowchart to help clarify Flowchart

Back to Top

Database Structure

Database Structure

Back to Top

Features

Existing Features

Back to Top

Features to be implemented

Back to Top

Technologies used

Languages

Back to Top

Libraries and Frameworks

Back to Top

Tools

Back to Top

Development Issues

Testing

Testing of this site can be found here in a seperate file.

As part of my unit testing, I created a [MoSCoW list of issues](MoSCoW _tasks_after_main_build.xlsx). This helps to give a clear indication of what Must be completed to make the site work correctly and what Should be done to give the site improved UI. The tasks desegnate as Could have that would improve UX but not essential to the site. Items that are designated Would like are items that would be great to have but only if everything else is completed and there is time before the project is submitted. My intention is to complete all the 'Must have and Should have items before looking at the Could have and hopefully the Would like items.

Back to Top

Bugs

Bugs of this site can be found here in a seperate file

Back to Top

Run Application in Gitpod

Once the application has been opened in a GitPod workspace there are a couple of tasks that need to be performed to be able to run the application during development.

  1. The command pip3 install -r requirements.txt needs to be run to install all the external API's the application needs to be able to run.
  2. To run the application use the command python3 manage.py runserver and then click the Open Browser button on port 8000. The application will appear in a separate browser tab. N.B. to test the Stripe payment processes port 8000 needs to be made Public. This can be done either when the command python3 manage.py runserver is run for the first time or by clicking on the ports linkimage in the bottom right of the IDE or selecting the ports icon image on in the left side navigation which will show a list of all the ports available to the workspace. Checking the padlockimage will toggle the port between private and public

Back to Top

Deployment

Local Development

These instructions are for GitHub Desktop on Windows. Other operating systems will have differences so please check.

  1. Download and install GitHub Desktop
  2. Clone the repository by clicking the image and select SiobhanBaines/Ciara-and-Sams-Big-Day
  3. Open the repository in an external editor image
  4. Once is VSCode, click the Terminal button at the top of the screen which should open a terminal that looks like this image at the bottom of the screen.
  5. Run the command pip3 install -r requirements.txt ito insall all the API's and packages this applicaton uses. This will take a couple of minutes.
  6. Create an env.py file by hovering the mouse in the EXPLORER box over the repository name imageand clicking on the file symbol Before pushing to GitHub make sure env.py is in the gitignore file so that the secret keys remain secret and do not end up in the repository. When everything is set up is should look like this but with your own codes. `import os

os.environ.setdefault("SECRET_KEY", "") os.environ.setdefault("STRIPE_PUBLIC_KEY", "") os.environ.setdefault("STRIPE_SECRET_KEY", "") os.environ.setdefault("STRIPE_WH_SECRET", "") os.environ.setdefault("STRIPE_CURRENCY", "gbp") os.environ.setdefault("DEVELOPMENT", "1")`

  1. To run the application you need the SECRET KEY The Secret Key "SECRET_KEY". To find a secret key search Google for django secret key generator. Copy and paste the generated key into the 2nd quotation marks.
  2. Run command python3 manage.py makemigrations
  3. Run command python3 manage.py migrate
  4. Run command python3 manage.py runserver

To get the next 3 keys you will need to create a stripe account. Once you have you account go to Dashboard>Developers>API Keys

Stripe Public Key "STRIPE_PUBLIC_KEY" is Publishable Key

*Stripe Secret Key "STRIPE_SECRET_KEY" is Secret Key Next click on Webhooks on the left side, just under API Keys and click Add endpoint. In here enter the URL of your site followed by checkout/wh/

Stripe WH Secret "STRIPE_WH_SECRET" is Signing secret

Stripe Currency "STRIPE_CURRENCY" can be set to whatever currency you want. Stripe uses the standard iso currency codes

Development "DEVELOPMENT" setting this to 1 allows the static files to be picked up

  1. Create a Django admin superuser python3 manage.py createsuperuser.
  2. If the application is not currently running, run command python3 manage.py runserver
  3. Add /admin/to the end of the url
  4. Login with the superuser account you have just created.
  5. Add two new groupds called accepted and declined in Groups in Authenticaion and Authroization. They do not need any special permissions but are needed for the wedding guests to log in.
  6. Now the site is up and running. A final point to note is when the guest list is uploaded it will automatically create user accounts (aka Group Id) and the password will be whatever value is in the postcode field of the guest object.

Pushing to GitHub

In the Gitpod workspace

  1. Make sure all changes have been saved.
  2. Navigate to a TERMINAL ensuring there is an open gitpod command string gitpod /workspace/Ciara-and-Sams-Big-Day $ and type the command git add . to add all the saved changes to the next commit package.
  3. Next type git commit -m followed by a meaningful commit message inside quotation marks for the commit package such as 'Fix menu drop-down visibilty'
  4. Finally type git push to deploy the application to Github

N.B. Using the command git status will show the status of the changes waiting to be pushed to Github.

Back to Top

Heroku Deployment

The following steps assume you already have Heroku and AWS accounts set up reading to create the application and deploy it.

Initial Production Deployment

Heroku
  1. Log into Heroku
  2. From the dashboard click New on the top right and Create New Appimage. Give it a name specific to the app (I called this app ciara-and-sams-wedding) and chose the nearest region. Currently either United States or Europe.
  3. Open the Resources tab and provision a new Postgres database
  4. Go back to Gitpod and install dj_database_url and psycopg2-binary.
  5. Freeze the requirements using the command pip3 freeze . requirements.txt.
  6. Go to settings.py in the ciara_and_sams_big_day app
  7. Add import dj_database_url
  8. In database setting temporarily replace the DATABASE settings to call dj_database_url with the value of the DATABASE_URL Config Variable in Heroku.
  9. Once connected run migrations into the Postgres database.
  10. There is no need to perform the python3 manage.py loaddata command because all the data in the database will be loaded by the bride and groom, because it is specific to their wedding.
  11. Create a superuser using the command python3 manage.py createsuperuser in the production Django Admin.
  12. Remove the DATABASE_URL config variable value changing the code to get the value from the production environment and keep the sqlite3 database for the development environment as below. if 'DATABASE_URL' in os.environ: DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) } else: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } }
  13. Run the command pip3 install gunicorn and freeze it into the requirements file.
  14. Create the Procfile to tell Heroku to create a web dyno to run gunicorn and serve the Django app.
  15. Add the Heroku App to Allowed Hosts in settings.py from production and localhost for development ALLOWED_HOSTS = ['ciara-and-sams-wedding.herokuapp.com', 'localhost'].
  16. Set up Heroku to allow Git to deploy automatically by going to the Deploy tab, scroll down to Connect to GitHub and search for the repository.image and click connect. Next click the Enable Automatic Deploysbutton.
  17. Create a new Django SECRET_KEY and add to Heroku and replace it in settings.py with a call to get the key from the environment. SECRET_KEY = os.environ.get('SECRET_KEY', '')
  18. Set 'DEBUG' to True on if in Development. DEBUG = 'DEVELOPMENT' in os.environ
  19. Using the process described in Pushing to GitHub, deploy to Heroku where you should see it being built. There is sometimes a small delay.

AWS
  1. Log into AWS Management Console. If s3 is not on the console you can find it via the Services navigation at the top of the screen.
  2. Open s3 and create a bucket with the same name as the app in Heroku, and select the nearest region. image.
  3. Open the bucket and select the Permissions tab.
  4. On Block public access (bucket settings) click edit and uncheck teh block all public access.
  5. Open the Properties tab enable static web hosting and give the index and error document default values for this site.
  6. Back on the Permissions tab 6.1. Create the CORS (Cross-origin resource sharing) configuration [ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET", "POST" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] 6.2. Generate Bucket Policy by going to Edit on the Bucket Policy and selecting the button Policy Generator image 6.2.1. Allow all principles and add the actiona GetObject, PutObject and DeleteObject. 6.2.2. Get the ARN (Amazon Resource Name) from the Properties tab and paste into the ARN box at the bottom. 6.2.3. After clicking generate policy, copy the policy into the Bucket Policy Editor. 6.2.4. Change the ARN in the Bucket Policy Editor to have /* at the end and click save 6.3. Go to the Access control List section and check Objects for Everyone(public access) andsave`.
  7. Click the aws icon to go back to the AWS Management Console and select IAM.
  8. Select User groups and click create group. Give the group a name beginning 'manage-' followed by the heroky app name, in this case 'ciara-and'sams-wedding' and click create group.
  9. Select Policies and click create policy. On the JSON tab select import manage policy and import the s3 full access policy form the pop-up window.
  10. Get the bucket ARN from the Bucket Policy page in s3 and paste in to the JSON.image. Click through and on the review policy page and give the policy and name and description.
  11. Attach the policy to the group by going to the Permissions tab on the User group and clicking add permissions, attach policies and selecting the appropriate policy.
  12. Create a User by going to the Users page and clicking Add user and giving it a name made up of the app name followed by 'staticfiles-user' and give the user 'Access Type' Programmatic Access and select Next through to the end and create user.
  13. Download and save the CSV containing the users access key and the secret access key. This can only be done at this time. If you lose these keys you will need to create some new ones and deactivate these.
  14. In Git install boto3 and django-storages, and freeze to the requirements file.
  15. Add storages to INSTALLED_APPS in settings.py.
  16. In settings.py add AWS details in the static files section
  17. Add AWS config variables to Heroku
  18. Add AWS_S3_OBJECT_PARAMETERS to settings.py to tell the browser to cache static files and therefore improve performance.
  19. Add media files to s3 in /media/ folder
  20. Add Stripe STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY to Heroku config variables.
  21. Create new webhook for production site using the Heroku site URL followed by /checkout/wh/ and add STRIPE_WH_SECRET to Heroku config variables.
  22. Send a test webhook from Stripe to confirm the connection.

Subsequent Production Deployment

Assuming Heroku is setup to Enable Automatic Deployments code changes can be deployed to production by using the standard Pushing to GitHub which will automatically push the deployment through to production.

However, if a change has been made to a model during a development, prior to adding and committing the changes in Gitpod it will be necessary to modify the settings.py file to connect to the postgres database in Heroku so that the migrations for those changes can be performed.

  1. Open settings.py and comment out the DATABASE settings and add a new DATABASE setting to contain the postgres DATABASE_URL as below

`DATABASES = { 'default': dj_database_url.parse('postgres://*****') }

if 'DATABASE_URL' in os.environ:

    # DATABASES = {
    #         'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
    #     }
# else:
#     DATABASES = {
#         'default': {
#             'ENGINE': 'django.db.backends.sqlite3',
#             'NAME': BASE_DIR / 'db.sqlite3',
#         }
#     }`
  1. Run the python3 manage.py migrate --plan command to check what is going to be migrated.
  2. Assuming the results are as expected, run the python3 manage.py migrate command to perform the mgiration.
  3. Reverse out the changes to settings.py making sure to remove the postgres DATABASE_URL value.

Back to Top

Credits

Toast

I took the Toast set-up from the Boutique Ado project mainly because there isn't much that could be done differently. I got some help from Sharonb (a CI student) to get them to work because Bootstrap 5 works differently to Bootsdtrap 4. Bootstrap 5 JavaScript var toastElList = [].slice.call(document.querySelectorAll('.toast')); var toastList = toastElList.map(function (toastEl) { return new bootstrap.Toast(toastEl).show(); }); Bootstrap 4 JavaScript $('.toast').toast('show');

Stripe

I took the Stripe set-up from the CI Boutique Ado project and modified the Webhooks Handler and JavaScript files to work with the objects needed for this site and the wedding gift donations.

Images

The below image was found on shutterstock The artist Aquatti has named it "Fresh bouquet of roses and greeting card". I asked my brother {Simon Baines](https://www.linkedin.com/in/simon-baines-84494416/)if he could change the "for you" to "RSVP". image The background schedule image was found on pexels.com and is by Küflü Çıkın The image of the Shambles was found on and owned by Yorkshire's best Guests The backgroundimage for the menu page was found on Bridebox York Minster was found on 16 Top Rated Tourist Attractions Bowls image was downloaded directly from Royal Worcester Site Dinner plates image was downloaded directly from Royal Worcester Site Side plates image was downloaded directly from Royal Worcester Site The set image was downloaded directly from Royal Worcester Site I got the noimage from the Boutique Ado project by Code Institute

Emails

I was not confident is setting up email templates and sending them so I spent some time investigating and found this youtube video that helped tremendously.Django Tutorial - Send Emails From Templates by Master Code Online

Setting up bride/groom as 'staff'

The only individuals that need to register an account on this site are the bride and groom but reading the Django documentation I was still struggling to understand how I could make the registration set the user up as 'staff' in Django admin. In my hunt for a solution, I came across ordinarycoders WRITTEN BY JAYSHA. The majority of the code is taken directly from here.

Checking if user 'has_group

As part of the RSVP process a guest will either accept or decline the invitation. I decided the easiest way to manage this was to set up 2 groups in Django admin; accepted and declined. stackoverflow by fuser60596 gave me solution I needed to check the group and therefore display the correct menu.

CSV file upload

I found a method of downloading a csv file for the users to load the various file details on codepen by Tanner

CSV file template download

Jo @ CI gave me this link upload-csv.

Assistance

Scott and Jo @ CI Tutor support for helping me to load the users into django. I had made the whole process much more complex than necessary.

Simen Daehlin my mentor @ CI for his ideas, inspiration and patience.

Jo, Igor, Alan & John @ CI Tutors for their support in getting Stripe working again.

Testing

Thank you to Alison Lambie for performing some UAT on my site.

Back to Top