​

Project Brief

This project is for the design and deployment of a functional E-commerce website for a business which supplies materials, hardware and tools primarily in the areas of Agriculture, Landscaping and Construction.

This is an external link to the site

Origins Of The Project

The business has an established traditional bricks and mortar store but is looking to enter the E-commerce space to offset the potential impacts of a slowdown in the construction sector related to a potential recession and new environmental rules relating to certain products that they currently sell.

A Proposed Solution

The proposed plan is to design an E-commerce solution and marketing strategy to attract and retain new customers with direct to customer sales and marketing in a Business to Customer format.

​

• Tommy Williamson Landscape & Agri Supplies
  • Contents
  • UX
    • Project Goals
    • User Stories
    • User Requirements and Expectations
      • Requirements
      • Expectations
    • Design Choices
      • Fonts
      • Colours
      • Images
      • Agile Methodology
  • Marketing Strategy
    • SEO
  • Wireframes
    • Site Layout
  • Information Architecture
  • Technologies
    • Languages
    • Libraries & Frameworks
    • Tools
  • Features
    • Implemented Features
    • Future Features
  • Development
    • bUg5 & (F)ixe5
  • Testing
    • User Test Information
  • Deployment
    • Final Deployment
    • Cloning
  • Credits
    • Image editing
    • Code ideas

​

​

​

Development of a fully functional E-commerce platform taking into some basic User Stories originating from the Agile design process and build on to further features.

​

The project was designed using the concepts of the Agile approach. A project was opened on Github and linked to the repository.

USER STORIES:​

I have attached a link to the User Stories and their status.

Link to Kanban Board

​

Back to content

​

​

​

• Visually pleasant site design and layout.
• Easy site navigation.
• Content laid out in a simple and clear way on both mobile and larger screens.
• Self-explanatory icons where text is absent.
• Ability to purchase products. ​

​

• Easy to use interface.
• Clear and easy to read data.
• E-commerce functionality.
• Build and contact/marketing database of customers.

​
Back to content

​

In this section I set out some of the design choices I made for the front end of the project

I used three different fonts from the Google Fonts library.

​font-family: Lato font - from Google Fonts
font-family: Nunito font - from Google Fonts
font-family: Gloria Halleujah font - from Google Fonts

Lato was used as the primary font with Nunito used on Carousel items and areas where intention was to break text statements or questions where the site users attention was required to confirm an action, such as the All_Auth templates.

The business has an existing logo image. I have incorporated this into the site header but ideally I would like to design a new logo.

A Favicon icon package was created using my drawing of the one of the company's delivery trucks as inspiration. The business has always used the same color scheme on its vehicles and as such they are an identifiable symbol of the business.

The front-end is styled in line with an existing color scheme which they employ across company uniforms and the vehicles. My initial design process was leaning towards a palette of greens and whites to create a light, bright and natural color scheme, following a meeting with the business owner it was preferable to them that their existing color scheme was carried into the site.

I worked with principal color scheme for the site of red, black and white. Having researched E-commerce platforms operating in a similar market I found that this scheme was popular and contrasted well with the products.

White #FFFFFF

White is the primary background color. I have used a collage of garden plans and garden layout sketches with a low opacity as background on some pages which helps create depth to the pages. The collage consists of images from Pinterest that I edited and altered with an image editing application.

Black #000000

I have used black and white on the styling of the buttons and as strong bold on text elements.

Red #CF0808 and #FF0000

I have used two reds, I have a standard bright red, #FF0000, and flatter and darker red, #CF0808. The latter is the red which best matches the color that the business had been using in its branding and is a more toned down red and does not invoke the as much 'danger' as the #FF0000.

The brighter red, #FF0000, is only used a background color on a text carousel feature on the home page. Its primary function here to attract attention.

While the color red has plenty of energy and is an extremely successful color for many brands such as Coca Cola, McDonalds and Ferrari there are some psychological issues with it as color. Red is often the color of warnings and danger and so I have limited its use as hover activation color on the nav-bar and as a thin border around the product category tiles which activates on a hover function as visual indication.

The design, development and testing of this application were tracked through a Kanban board in a created GitHub project. Details of the User Stories can be found in the UX section and the link to the Kanban board below.

User Stories - see details of each User Story. Link to Kanban Board

Back to content

​

As part of the SEO for this site I have compiled a list of keywords. These keywords have been included in the site header under the meta tag 'keywords'. A '<title>' has also been included on the base.html with the text Tommy Williamson Landscape & Agri Supplies.

To further help search function I am using descriptive text on the product images, in addition where possible I have descriptive text on anchor tag elements.

The products and items on all have alt tags created from the product name. I will use Brand names in the name of certain products.

List of keywords was compiled and included in the site header. In addition, a simple title element was add to the base.html

• Tommy Williamson Landscaping and Gardening Supplies
• Arches
• Pergolas
• Bark Mulch
• Composted Topsoil
• Farm Fencing Stakes
• Garden Sprays
• Gates
• Farm Gates
• Timber Wooden Gates
• Ground Cover
• Lawn Seed
• Light Hardware
• Manure
• Play Equipment
• Post & Rail Fencing
• Railway Sleepers
• Stone Cobble
• Brick
• Stone
• Decorative Stone
• Stone Natural Paving
• Timber
• Decking Timber
• Kiln Dried
• Treated Timber Stakes
• Timber Panels
• Fencing Boards
• Wire








Proposed Strategy

The business supplies a wide range of agricultural, landscaping and construction products. This market place is quite crowded, having done some market research it is clear there are many competitors in this E-commerce space. I would propose that the business looks toward creating original content for release on their social channels.

A search of Youtube brought up a number of Irish channels in the Agricultrual space which have been releasing content on YouTube. The content is organic and primarily catalogues the goings on and happenings in their business. As you skip through some of this content you can see the rapid development of connections between the content creators and their suppliers with benefit for both parties.

This type of content creation could work very well for this business.

Visual media intends to inspire. For years media companies have created a steady supply a home and garden renovation programs. Many of this content is sponsered by business or products which related to these sectors. The content is hugely popular with most of daytime tv channels carry some form of such programming and several satellite channels dedicated entirely to home and garden programming.

This business offer products to the 'Trade' sector, a Business to Business (B2B) relationship, and it sells products direct to the Customer in a Business to Customer (B2C) Relationship.The purpose of this new E-commerce platform is to target and expand the B2C portion of the companies business. That being said, once the the new site is deployed it would serve as a resource for the B2B customers.

It would be beneficial to develop a marketing relationship between both parties in the B2B relationship. The contractor party could supply the e-commerce site with content, images and or video clips of work doing using product(s) supplied by the business. The site could use this content for marketing purpose and reference, acknowledge and advertise the contractor whom did the work.

Strategy:

• Create short videos demonstrating products.
• Create videos of 'DIY' projects using products sold by the business.
• Develop a partnership with suppliers and trade customers to add value for all parties. A partnership with a landscaping business detailing before and after garden transformations or demonstrations showing products in use.
• Market the business as a source of information, create and develop a Frequently Asked Question section and lean on the approachability and knowledge of the staff.

Facebook

The business has an active Facebook page. I would look to integrate Facebook posts into the site in some shape.














---

Wireframes

​

Site Layout

The initial front end layout for the site was created from the wireframes developed in Balsamiq. The wireframes can be viewed via the link below.




When the wireframes were rendered on screen with Bootstrap, HTML and CSS there were slight changes to the UX design and layout. As the development process continued further style changes were made in the screen layout. The layout was altered in line with some live testing.

​Link to Wire Frames

I initially layout used logos or icons to represent the different product categories on the index.html, as sampled below. However, after showing the layout to some people I found the 'icon' style images were not popular. The photo images now used are far more aesthetically pleasing and would be more visually appealing to customers.









It was clear from looking at the business that they had an affinity for there delivery trucks. All past and present delivery trucks are red in color. I felt that a truck image could be a digital icon for the business. I found some technical drawings online and sketched over them with a pen and carbon paper to create a profile. I scanned this profile image in 3D Paint. I used this image for the Favicon pack. I would like to have used it as the business logo as I think it is very identifiable with the business. Based on time constraints I decided to stick with the existing business logo. The re-design of the logo would be a Future Feature.









Back to content ​

---

​

Information Architecture

​

PostgreSQL Database

The backend database is a PostgreSQL Database hosted via Heroku. The database is built around several separate apps which have models as listed below.




Apps and associated models:


























​ Back to content ​

---

​

Technologies

​

Languages

​

• HTML
• CSS
• JavaScript
• Python ​

Libraries & Frameworks

​

• Django
• Google Fonts
• Font Awesome
• Favicon
• jQuery
• Bootstrap
• Crispy Forms
• Pillow
• Stripe
• Crispy Forms
• baguetteBox ​

Tools

​

• Git
• GitHub
• Balsamiq - Wireframe tool
• 3D Paint
• Affinity
• PolicyMaker.io
• WebP Image Converter

Deployment

• Heroku
• AWS, Amazon Web Services

Back to content

---

​

Features

​

The application uses a PostgreSQL database which contains the purpose designed models with back-end being built on the Django Framework. The site is designed with the following base features.




​- The site has responsive design when viewed on a mobile, tablet, and desktop.

• Easy navigation to external sites, such as social media accounts.

• Visually appealing images and content.

Implemented Features

Nav Bar

The Nav Bar is standard across all pages. It contains a link to Home, Contact Us, and an Inspiration Page which is a picture gallery.

There is a drop-down menu for navigation to the different product categories and an Account link to allow new users register or login if already registered. Beside this there is a basket icon which will show current total of items in the basket if there are any.

Positioned on the right of the nav-bar is the search function to search through products for key words.

I have also incorporated the company logo into the nav bar as part of the branding.

Nav bar link text will turn red on hover to further highlight the options and introduce some red into the color scheme.






Administrator Function:

If the user is logged in as the site administrator the 'My Account' drop will include four additional links.

• Product Management
• Update Site Banner
• Newsletter
• Email List








Product Management

This option allows the administrator to add and new product to the site.




Update Site Banner

Update Site Banner option allows the administrator to quickly change the text content and the header of one of the text-carousels which auto slide under the image carousel on the home page. This allows the administrator access to put a quick message directly on the home page.




Newsletter

The administrator can see all products currently available as 'special offers' which would form part of the newsletter sent to subscribers.




Email List

This link will show a list of all emails currently subscribed to the newsletter. From here the admin can also delete an email address from that list.









Footer

Like the nav bar the footer is standard across all pages. The footer contains links to company social media channels.

The footer also contains a link to the company's privacy policy. This opens in seperate window.




Home Page

The home page contains a large picture carousel which auto scrolls. This is positioned just below the nav bar. The carousel contains four separate images. Each image is overlayed with a text box and each text box contains a button. The text relates to the image and the destination for the associated button will bring to a relevant point on the site inline with image and text. The purpose of the carousel is to act as four advertisements.

The central content of the homepage are the product cards. These cards contain text and an image. Each card will bring you to a separate product category page. The borders on the cards will turn red when hovered over. The images are to be visually appealing and need to represent the relevant product category.

Below the product cards and over the footer there a 'supplier slider', this is another carousel which contains logo's for the companies whom supply products to the business. This is auto scrolling. At present if a user clicks on a supplier logo they are taken to that suppliers website, which opens in a new page. As a future feature I would look at returning a template of all products available relating to the particular supplier for purchase on this site.














Contact Us

Self-explanatory, this page contains all the relevant contact details for the business. There is also a contact us form to allow the site user quickly send their queries and contact details to the business. This information is stored in a model, with a copy of the query and contact details to be emailed to a company sales email address for follow up by sales staff.

I have included social media links here also. I have also included an opening hours feature which shows the current day highlighted in red.

Below the contact details and contact us form there is link to subscribe to the newsletter. There is animated border around this button to attract the site users attention.

This page also contains an embedded Google Map with the location of the business central on the rendered map. Just below the map there is link to allow any user subscribed to newsletter to unsubscribe, naturally if the user tries to unsubscribe from the newsletter mailing list with an email address that is not on the list they will receive a validation error message.














Inspiration

This page would form part of the larger marketing strategy, the page is essentially and image gallery which is built using BaguetteBox which is a JavaScript library, this generates a lightbox with animated and responsive images. There are currently nine images in the gallery but this would be expanded.

The images 'zoom on hover', as part of that function description text for each image is also displayed. If a user clicks on any image the image will occupy full screen and an exit control and left and right directional arrows will be shown. The user can now scroll through all the images in the gallery or exit back to grid display mode.














Products Page

The product page will display a card for each product item matching the user selected category, the name of the category will be displayed at the top of the page. Below this to the left the number of products in this category will be displayed and, on the right will be the 'Sort By' dropdown options box.

The users can sort the displayed products in the following ways:

• Price - low to high
• Price - high to low
• Rating - low to high
• Rating - high to low
• Name - A to Z
• Name - Z to A
• Category - A to Z
• Category - Z to A



The border around the product card will also turn red on hovering over the card. Once a particular product card is selected a products detail page is displayed for that particular product. The image will be on the left of the screen and the details and price will be displayed on the right. Just below the details will be the quantity box which the user can use to alter the quantity of the product required. Clicking the 'ADD TO BASKET' button will deposit the quantity selected into the basket.

The 'KEEP SHOPPING' button will return the user back to the products section.

Clicking the product image will that image in a new window in a full screen size.

I a particular product is marked as being on special offer the works "This item is on special offer" will appear in flashing red text below the description. Items not marked for special offer will not have this feature.



















Shopping Basket

When an item is added to the basket a success toast will display a summary. This toast is built on structure of the Boutique Ado toasts and will display the product summary and an indication of any delivery charge or how far the customer is away from getting free delivery.









The table which displays the shopping basket contents turns into a vertically stacked table on smaller screens. I think this better displays contents on the smaller screens.














The shopping basket has all expected functionality, update quantity of product(s) in the shopping basket or removing and item completely. Delivery charges are calculated based a percentage as set in the settings.py file.

{
#variables for delivery charges
FREE_DELIVERY_THRESHOLD = 75
STANDARD_DELIVERY_PERCENTAGE = 10
}

I adapted some code from https://css-tricks.com/responsive-data-tables/ to adjust the table in the shopping basket template to vertical scroll on mobile devices.









Payment processing is powered by Stripe with a webhook handler to process webhook requests. This process is largely in line with Boutique Ado.




Order Number

I have created a Python method to generate an unique order number.

  # private method - order number generator
    def _generate_order_number(self):
        now = datetime.now()
        d = now.strftime("%m/%d/%Y")
        h = date_time = now.strftime("%H")
        random_number = str(random.randint(1000, 9999 - 1))
        order_number =(f'{d}{h}-{random_number}')
        order_num = order_number.translate({ord('/'): None})
        return order_num

Order numbers are made up of the numerical value for the MONTH, DAY, YEAR, the current hour, a hyphen and then a randomly generated four-digit number. In this format it would allow the business owner to tell the date and hour that the order was created with just the order number and hence help track any issues with a customer's order easier than just using a completely random order number.









I the above example we can see that the order number is 0926202219-2775. This breaks down as follows....

1. 09 is for the month, here is the Month, September.
2. 26 is the day in the month, in this case the 26th day of the month.
3. 2022 is the four digit indicator for the year, in this case that is 2022.
4. The four digit code that precedes the hyphen is randomly created by the Python method.



Newsletter

There is link on the Contact Us page to allow a site visitor to register for the company newsletter, there is also an unsubscribe link at the bottom of this page. On of the picture carousels on the Home page also has a link to allow visitors subscribe. I feel it is a better marketing strategy to allow all visitors, regardless of the fact they may already have an account or if they do or dont make a purchase, to sign up with an email address.

The newsletter is generated from all products that have been marked as on special offer. Any product marked in such a way is included on the newsletter automatically. The site administrator can see these items from their dropdown menu on the nav bar (when logged in as administrator!)

By selecting any product on this list the admin can choose the edit option and 'untick' the special offer box to remove that product from the newsletter.

The Email List option the drop 'My Account' dropdown menu will show all the newsletter subscribers and by clicking the Send Newsletter button the admin will send the newsletter to all subscribers. From here the admin can also delete subscribers from the list.









Profile

The user profile section is split into left and right side. The users contact details and address are on the left side of the screen. The right side of the screen has a list of all that customers orders, order history. When logged in the user can edit their contact details and select a previous order to see its details.









Future Features

• Removal of the admin features from the nav bar dropdown menu and the creation of a separate dashboard menu for the administrator.
• The user profile has an option to allow the user state if are a domestic of business customer. I would use this to target the different groups with different types of offers. Showing the pricing for Business customers excluding VAT.
• Creation of section with 'how to' or 'DIY' style videos to further market the products. There would be some form of integration with this content and the companies social media channels.
• Look into the styling and format of the Newsletter.
• Collate emails of registered user to the site for the creation of a marketing email list targeted towards their previous purchases.
• Create a new business logo in SVG format that can better promote the brand.
• Change supplier carousel logos to display all products availible on the site for that particular supplier.
• Standardize the pictures sizes used on the site and the convert to WebP format.

Back to content ​

---

​

Development

In this section I deal with some of the bugs and errors encountered during the development process. If the issue was successfully fixed I have included details of that fix.

Bugs & Fixes

This section consists of issues I had during development which took me 60 minutes plus approximately to identify and sort.

Issue No.1

Webhooks and Stripe:

During the setup of the Stripe webhooks I was initially not able to get 'intent' details back and printed to the terminal. After some investigation I discovered that this was because Port 8000 was set to Private and not Public as was required. Once this was created the transaction information was printed to the terminal.

Issue No.2

Webhooks the return!:

Having successfully tested the webhooks in the development environment I moved on to other aspects of the project. I approached a point where I needed to test User Stories and so setup an email address and setup webhooks in Stripe with a new endpoint URL for the deployed site and tested.

While test payments were being successfully received and processed in Stripe none of the webhooks were functioning and emails were not being sent. The Stripe dashboard returning a 500 Error.

After a period of unsuccessful testing I had to create a new endpoint in Stripe with an URL of my development environment. I edited the webhook secret to matched and tested the functions in the development site with feedback in the terminal. The Error 500 was traced back to typo in the webhook_handler.py. Once the error was corrected I changed the webhook secret back to deployed site value and retested.

Testing was now showing that webhooks were functioning correctly and emails were sent successfully.

Issue No.3

AWS, S3 Bucket and 'SignatureDoesNotMatch'

I was going to upload some stock/product to the site late on 4th of October, as a test I decided to carry out this process on the deployed site to test the process as it would be for the site owner. After logging in with admin creds and completing the 'New Product' form I attached an image and clicked 'Submit'.

I was met with my first error message, Ibotocore.exceptions.HTTPClientError: An HTTP Client raised and unhandled exception: Invalid header value b'AWS4-HMAC-SHA256 Credential=-n ACCESS_KEY\n/00000000/eu-west-1/xxx/aws4_request, SignedHeaders=content-type;host;x-amz-date;x-amz-target, Signature=XXXXXXXXXX'. With searching I discovered the problem may have been caused by white space or new line being generated around the AWS ACCESS_KEY and AWS Secret_KEY values. The suggested fix was to use .strip command to remove the white space around the KEY values.

AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID").strip("\n")
AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY").strip("\n")




Once I had altered the settings.py and pushed the changes I tried to add a new product. This time the error changed to 'SignatureDoesNotMatch'. I tried to add a product from the Django Admin Interface but the fault was still the same. With testin I found I could upload all details of new product *except* an image and so the fault appeared to be the upload process of an image to the S3 storage on AWS.

Another search suggested the issue could be the result of several problems but the most common suggestion was that there was an issue with the AWS key values. The values were either completely wrong or prehaps entered incorrectly. A further potential fix suggested that the error could be to do with the possible presence of a special character, such as a / or a +, forming part of the AWS_SECRET_ACCESS_KEY.

There were reports that Heroku did not like the special characters in the Access Key. The fix was simple, login to AWS Dashboard and request a new Access Key from the Security Credentials option. The best option was to keep requesting new Access Keys until I receive a key which contained no special characters. With suitable access keys created I downloaded the CSV file and copied the Access Keys in Config Vars in the Heroku dash.

With new security keys I again tried to add a product - the fault was still present. I checked through the error report, looked and potental issues with the content-type and header information. I checked what information I was sending to AWS and checked the Bucket Policy, IAM and S3 settings in AWS Dashboard. I deleted the old inactive AWS access keys from IAM dashboard and ensured that the ACCESS KEY I was using the active and correct.

I was very confident that the issue was the AWS access keys, I checked them again in the Heroku dashboard, both matched. I double checked against the downloaded CSV, match. I decided to delete both key values and enter them manually as oppose to copying and pasting them from the CSV file. With both values entered and Heroku build updated I re-tried the 'Add Product' process. The result was successful with the new product and image uploaded to the site straight away.

I tested the 'Add Product' process on a mobile device and found in worked correctly also.

It might have been that white spaces were added add as part of the copy and paste process (?)

---

Testing

​

Functional Testing

Manually testing was carried out throughout the development process. Details of specific manual are located in a separate test document.

Testing Results:

Link to manual testing

Test of Purchase and Payment

Link to manual testing


​ ​

Validator Testing

​

CSS

​

The CSS file was directly input into https://jigsaw.w3.org/css-validator/#validate_by_input. The validation returned one error for a transform property, this is part of an animation feature on the 'Subscribe' button and has been left in place to allow that function.









JavaScript

The script.js file was tested with [JSHint](https://jshint.com/), any errors found were corrected. A link to a PDF of the JSHINT screen shoots can be found below.

​


Link to JSHint Report


HTML

​

The HTML files associated with this project were tested individually with [W3C Validator](https://validator.w3.org/) and showed no errors or warnings.














Python

​

Python code was validated by running the following command:python3 -m flake8. This produces a list of errors and warnings. I then ran autopep8 --in-place --aggressive --aggressive on each .py file to format the code to the correct syntax automatically.

It was also necessary to manually correct some errors which involved split long lines.

​


Flake8 Report

I have attached a link of the results from intitial run of flake8

Link to Flake8 Report

After refactoring of the Python code I created, I was left with the following list.






I have not alter the E501 errors in the env.py as these lines are Access Keys and I dont want to split them and introduce an error.

The checkout app errors are left as they are part of a functioning webhook process.

---

Light House Performance Testing

Lighthouse Performance :




To improve the performance of the site, particularly on mobile devices it is necessary to introduce some compression to text and images, with images change to webp format.









Back to content

​

​

Deployments

​

Deployment:




Deployment of this project was carried out with Heroku, https://www.heroku.com. The deployment procedure is a follows.

1. Log in to Heroku, creating a new account if you are not a current user.
2. Click on the 'New' button in the top right corner and from the drop-down menu select 'Create new app'.
3. Create an App name and select your Region from menu.
4. Click the 'Create App' button.
5. Click in resources and select Heroku Postgres as the project database.
6. You will now have a menu for your new app. From here click on the Settings Tab and in the Config Vars. Click Reveal Config Vars.
   
   • add your Secret Key
   • add PostgreSQL URL
   • add PORT with value '8000'
   • add a record - 'DISABLE_COLLECTSTATIC = 1'







7. Scroll down to the Buildpacks section. Click Add buildpack. From the menu select heroku/python and click Save Changes.







8. Return to menu at the top of the page and click on Deploy. Select Github as the deployment method.
9. Confirm you want to connect to GitHub using your account credentials for Git. Once Heroku has access search for the relevant repository name and click the connect button.
10. At the bottom of the deploy page select the preferred deployment type. You can use Manual Deploy which will deploy based on the current state of the selected Git branch. You can also Enable Automatic Deploys for automatic deployment when you push updates to Github selected branch.



Amazon AWS

Setting AWS bucket

1. Create an account AWS Amazon Web Services or login to an existing account (Credit Card required to register an account.)

2. Navigate to the AWS Management Console and search for S3 Service.

3. Create a S3 Bucket using Create Bucket button in top right-hand corner

4. Name the Bucket, in this instance we match the Heroku App name for simplicity.

5. Choose the AWS Region closest to you.

6. Setup the Object Ownership.

• Select - ACLs Enabled
• Select - Bucket Owner Prefered

7. Select Allow Public Access. Confirm that this setup will make the objects within the bucket viewable by the public.

8. Select Create Bucket

9. From your AWS dashboard select your Bucket. Select the Properties options and scroll down Static Website Hosting. Select Edit, click enable, fill in index doc as index.html and error.html for error option.

10. Within the Permissions section find Cross-Origin Resource Sharing, known as CORS. Copy code below paste into this in as the new configuration and confirm with 'save'.

[
  {
      "AllowedHeaders": [
          "Authorization"
      ],
      "AllowedMethods": [
          "GET"
      ],
      "AllowedOrigins": [
          "*"
      ],
      "ExposeHeaders": []
  }
]

11. Edit the Bucket Policy by going to the permissions tab. Select the AWS Policy Generator.

Fill out this page as follows: Select Type of Policy : S3 Bucket policy Principal : * (this allows all) Actions: Get object Amazon Resource Name (ARN) : Copy ARN from the Edit Bucket Policy page in the permissions section and paste it in here

Select Add Statement button.







12. Under Step 3, click Generate Policy button. Than Click Generate Policy, the policy will appear on the screen in a window. Copy this policy into the Bucket Policy Editor. When copied, add /* to end of the Resource line. Save the policy.

13. Go to the Access control list (ACL), click Edit and enable List for Everyone which is Public Access.

14. From AWS Services menu locate Identity and Access Management (IAM). On the side menu find User Groups and click Create Group. Enter a name relevant to the groups purpose ie, "manage--app-name". Create the group.

15. From side menu select Policies and click Create Policy. Select the Import Managed Policy. Search for AmazonS3FullAccess and import that policy.








16. To restrict access to just the new bucket you must retrieve the ARN from the Bucket Policy Page in S3. Copy ARN again and paste into "Resource" section. Add the ARN twice with a /* on the second ARNist containint The first line is for access to the Bucket and second line is for all files and folders in that Bucket.








17. Select Add Tags click Next and on to Review Policy. Give the policy a name and a description.

18. Click Create Policy. Policy is now created.

19. From Groups option in side menu locate our group and select Permissions tab and the Attach Policy option. Search for the newly created policy and select Attach Policy.

20. Select Users in the side menu and click Add User, create a user in the following format your-app-staticfiles-user. Give the new user Programmatic Access. Add new User to new Group.

21. Select Tags and the click Next to the Review. Click Create User.

22. Download the generate file which is in a .CSV format and has your required security keys. Click Next Tags and Next: review and Create user

• Download .csv file

Setting AWS bucket

1. To Connect Django to the new AWS S3 Bucket, run the following commands from the terminal.
• Install boto3 'pip3 install boto3'
• Install django-storages 'pip3 install django-storages'
• Update requirements.txt 'pip3 freeze > requirements.txt'

Update settings.py by including storages on the list of installed apps.

Add the following settings to settings.py. to link the Bucket. (Keeping AWS Access keys safe.)

if 'USE_AWS' in os.environ:
    # Cache control
    AWS_S3_OBJECT_PARAMETERS = {
        'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
        'CacheControl': 'max-age=94608000',
    }

    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = tw-shop
    AWS_S3_REGION_NAME = 'eu-west-1'
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

2. Go into the Heroku dashboard and select the relevant app to set up our enviromental variables.

Add the following to your Config Vars. AWS_ACCESS_KEY_ID and enter key value from downloaded CSV file. AWS_SECRET_ACCESS_KEY and enter key value from downloaded CSV file. USE_AWS and enter a value of True. You can now remove DISABLE_COLLECTSTATIC from the Config Vars section.

** Note : as per my Bugs & Fixes section it is best to manually enter the AWS Key values into Heroku Config Vars, copy and paste may result in connection errors.**

3. Create a new file in root directory called custom_storages.py

from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage


class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATION


class MediaStorage(S3Boto3Storage):
    location = settings.MEDIAFILES_LOCATION

4. Update the settings.py with the following AWS settings

    # Static and media files
    STATICFILES_STORAGE = 'custom_storages.StaticStorage'
    STATICFILES_LOCATION = 'static'
    DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
    MEDIAFILES_LOCATION = 'media'

    # Override static and media URLs in production
    STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
    MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

5. The easiest way to upload the media files to AWS S3 Bucket is to open the Bucket in AWS dashboard, create a new folder called media. From here you can select Upload and select the file or files you want to upload.

Final Deployment

• Create a runtime.txt file - 'python 3.8.13'
• Run the command - 'web: gunicorn "name of project".wsgi'
• In 'settings.py' change the DEBUG to 'DEBUG = False'
• In the Heroku dashboard for this app, navigate to 'settings' and delete the entry for DISABLE_COLLECTSTATIC

Back to Contents


Cloning:

Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

1. Log in to GitHub and locate the [GitHub Repository] https://github.com/TNolan01/tommy1
2. Under the repository name, click "Code".
3. To clone the repository using HTTPS. Under "HTTPS" copy the link.
4. Go to your local terminal with git installed
5. Change the current working directory to the location where you want the cloned directory to be created/located.
6. Type git clone and then you paste in the URL you copied in Step 3.

$ git clone https://github.com/TNolan01/tommy1

7. Press Enter. Your local clone will be created.



Back to Contents
​

---

​

Credits

​

Images




The images used in this project are taken from the websites of suppliers to the business and photos I took myself

I have used some images of Pinterest to create some of the backgrounds.

Image editing




The images were edited using the following packages.

• 3D Paint Microsoft
• Affinity Designer
• Favicon - for creation of Icon Pack

​

Programming resources

Aside from the Code Institute content for this section I used the following resources.

I have used the Boutique Ado project walkthrough as the basis for the Stripe and Checkout functions in this project.

I adapted a piece of code I found at https://codepen.io/bengoddard which I used on the content_us.html to create the 'Opening Hours' table on that page.

In the Marketing App Views.py I used a piece of code for the 'Newsletter email sending function'. I found this on an old PP5 Project by Joanna Goska, https://github.com/JoGorska, it originated from https://docs.djangoproject.com/en/3.2/topics/email/#preventing-header-injection.

When converting some of the tables, such as the Basket, to a vertically displaying table on smaller screens I adapted some code I found at https://css-tricks.com/responsive-data-tables/

• Stack Overflow
• CodeMy.Com on YouTube
• Dennis Ivy
• Ben Goddard(Codepen)
• CSS Tricks



Back to content ​

---

​