This is my Milestone 4 Project which aims to create a full stack web application using Django Frameworks in combination with HTML, CSS, Javascript & Python languages. The application provides an e-commerce app in the form of a food delivery site, including a payment system provided by Stripe. The app also features account creation & login functionality using Django AllAuth & a dining reservation system. There is also a dashboard specifically for the restaurant owners to allow them to monitor the current orders & reservations.

The application provides all elements of CRUD functionality for the users & admin users, allowing them to update & delete items from the databases when appropriate.

As this application is set up for testing purposs only, the Stripe payment system will require a test card to be entered at checkout. Please see below the details of the card to be used:
Card Number: 4242 4242 4242 4242
Expiry Date: Any expiry date
CVV: Any CVV
As this is a US card number, you will need to enter a ZIP code at checkout instead of a postcode so please enter any 5 numbers.

As this restaurant only caters for a specfic geographical area, the postcodes that the 'Calculate Delivery' functionality will accept begin with the following:
BD20
BD21
BD22
BD23
Any other postcodes will advise delivery is not possible so if you would like to test this functionality please use one of the above postcode prefixes.

If you wish to test the discount code functionality, currently the only offer code set up is 10OFF and this can be entered at the checkout for 10% off the order.

An admin user has been set up to access the Restaurant Dashboard & login details have been provided in the Project Submission form for security reasons.

1. UX
• Wireframes
• Target Audience
• User Stories
• Design
• Defensive Design
• Typography
2. Database
3. Features
• Existing Features
• Features left to implement
4. Technologies Used
5. Testing
6. Deployment
7. Credits

• The target audience for this website has a relatively narrow scope. As this is primarily a tool for ordering a food delivery, the target audience will live within a small geographical area surrrounding the restaurant. As delivery is limited to a number of postcodes and customer will not be willing to travel too far to visit the restaurant, I have estimated that the target audience will be based within 7 miles of the restaurant.
• The demographic for the consumer audience will be Indian food lovers, aged over 16.
• There will also be a secondary audience which is the restaurant owner/employees to allow them to keep up to date with orders and bookings the restaurant has recieved.

• Unregistered User
As an unregistered user, I would like to be able to:
1. Browse the menu items and filter by categories.
2. Add items to my shopping bag.
3. Search for a specific dish or ingredient without having to browse through all menu items.
4. See a summary of the items in my shopping bag and an order total each time I add a new item without having to visit the shopping bag each time.
5. Calculate the delivery fee by providing my postcode.
6. Review my shopping bag details before completing the checkout process and make any amendments should they be required.
7. Provide delivery & contact details before providing payment for my order.
8. View a confirmation of the items I have ordered & the order number.
9. Have the option to register for an account by providing an email and creating a password & username.
10. Check availability for a table in the restaurant on a given date and make a dining reservation.
• Registered User
As a registered user, I would like to be able to do all of the above actions (for an unregsitered user) and:
1. Save my delivery details to my profile which will then be automatically entered at the checkout.
2. View my previous order details including the items ordered in my profile
3. Reorder previous orders directly from the order history without having to search through the menu to find each item.
4. View any table reservations I have made including the reservation details, such as the date & time, in my profile
5. Have the ability to cancel any table reservations I have made directly from my profile without having to contact the restaurant directly.
• Admin/Super User
As the admin/super user, I would like to be able to:
1. Add new dishes/items to the menu.
2. Edit existing menu items.
3. View all of the current days orders including the postcode and price.
4. View all of the current days table reservations in details with the time and number of people shown.

• All of the headings are the same size, colour & font and the colour scheme is the same throughout.
• Also all of the buttons have the same colour schemes including when they are hovered over.
• The forms displaying data to the user have the same styling throughout the site so the the user is able to locate a form easily should they need to reference back to the items in their order.
• All input forms that require details from the user, are displayed in the card component from Bootstrap. These all have the same grey styling to make it easy for users to locate the sections that require their input.
• The background for each page is dependant on the content. For the menu and profile sections, the background is vector images such as the restaurant logo and food items. The pages relating to the restaurant dining have a black & white photograph style image of the restaurant. This shows a divide between the online ordering for takeaways & then the restaurant features.

• To ensure all passwords, secure URL's and API keys remain secure, these have all been set to be retrieved using os from the environment. In Gitpod, these are set as environment variables & then when deployed with Heroku, they are set as 'Config Variables'. This means that they will never appear in Git version control.
• To ensure the security of user's details, I have used Django's AllAuth to handle all of the user admin. This will ensure the user passwords are hashed and stored securely. Django AllAuth will also add an additional level of security when a user is creating an account by asking them to verify their email address before they can log into their account.

I have added some features to ensure unauthorised users cannot access pages outside their scope.

• For the restaurant admin page, I have ensured that only a superuser can access this page. Should a user who is not logged in, try and access this by adding 'profile/restaurant-admin' to the end of their url, they will be redirected to the sign in page. Once signed in, is a user again tries to access this url, they will be redirected back to the homepage and a toast message appears advising them that only restaurant users can do that.
  
• The same has been added to the 'add menu item' view to ensure that someone who is not a super user cannot just type in the url and add items to the menu. This is very important as if a user was able to access this, they could add menu items with very low prices and then complete an order.
• I have also added a custom 404 error page which will replace the generic 404 page. The design follows that of the website as a whole and contains a link for users to return to the homepage.

2 Google Fonts were used in this project:

1. Montserrat Subrayada - used for all headings & card headers
2. Short Stack - used for all body text.

This model was installed with the help of Django AllAuth to allow users to register and then sign in to their accounts.

1. NAVIGATION
2. VIEW MENU ITEMS
3. SEARCH MENU ITEMS
4. FILTER MENU ITEMS BY CATEGORY/SUBCATEGORY
5. ADD ITEMS TO SHOPPING BASKET
6. CALCULATE DELIVERY CHARGE
7. EDIT & REMOVE ITEMS IN SHOPPING BASKET
8. ADD PROMOTIONAL CODES TO GAIN DISCOUNT
9. SECURE CHECKOUT
10. REGISTRATION
11. LOGIN
12. LOGOUT
13. USER PROFILE
14. CHECK DINING AVAILABILITY
15. COMPLETE DINING RESERVATION
16. CANCEL DINING RESERVATION
17. RESTAURANT DASHBOARD

1. Automatically delete and remove past date dining reservations from the database and therefore from the user profile as well.
2. Create an 'address book' of the restaurants customers who have previously ordered or booked a table and only give access to the admin user.
3. Add additional functionality to the Restaurant Dashboard to allow the restaurant owner to contact customers by email directly from the dashboard.
4. Add an additional view to the user profile to allow the user to amend their dining reservation directly from their profile.
5. Use further functionality from Django AllAuth to enable users to sign up/log in using their social media accounts such as Facebook.
6. Provide functionality to the restaurant owner to remove items from the menu for a specified period of time in case of stock shortages. This will allow them to temporarily remove an item should they not have the ingredients to make it, but mean they don't then have to re-add the item when they are able to offer this item again.

• HTML5
• HTML5 has been used to create the core content and base structure for each page.
• CSS3
• CSS3 was used to style the HTML elements and create a responsive design.
• JavaScript
• Javascript was used on numerous elements to make them responsive to user input. For example, to sort & order menu items dependant on the users desired output.
• Python3
• Python was used to create all of the backend functionality of the web application.

• Django Framework
• Django has been used to create the whole project. The framework has provided a base for all apps that make up the web application.
• Django AllAuth
• This was used to create the sign up & sign in functionality of the application. Essentially, Django AllAuth provides the functionality to create a user for the site.
• Django Crispy Forms
• All forms were created using the crispy form framework to allow for standardisation throughtout the project.

• Bootstrap - Used to provide page structure, Navbar design and form components. Also used to provide generic styling using Bootstrap classes.
• JQuery - Used to simplify the javascript written in this project & used to activate some of the components provided by bootstrap i.e the toasts
• Stripe - Used to implement the payment system for completing orders. The payment form element was also provided by Stripe.
• Font Awesome - Icons for forms and styling.
• Google Fonts - Used to create a look in keeping with the website aim and to create uniform styling throughout.
• Balsamiq - Used to create the wireframes for the desktop & mobile views.

• GitHub
• GitHub was used to create the repository for storing all code aspects of this project.
• GitPod
• Gitpod was the platform used to create all of the files and content for my project.
• Git
• Git was used for version control.

• Heroku - Used to deploy the finished project.
• GitHub - Connected Github repository to Heroku to allow for deployment.
• Amazon Web Service - used to store static files & images.
• Gunicorn - Used to deploy the project from Gitpod to Heroku.
• Postgres Database - used to hold all models and database data for the deployed project.

• W3C HTML Validator
All pages of HTML content have been checked by the HTML validator and have passed on the HTML elements however there were errors advised as the validator does not recognise the Django templating within the HTML documents.
• W3C CSS Validator
The CSS has been passed through the validator & passed.
• PEP8 Compliant
I used Gitpod to detect an problems with the Python code such as trailing whitespace & lines of code that were over the character limit to be PEP8 compliant. I then passed the code through the PEP8 Online validator.

• The repository for this project was created in Github & I used the Code Institute Gitpod Full Template which can be found here. I then clicked the 'Use Template' button and created my repository with the name zolsha-online-ordering. You are required to be logged into your GitHub account to be able to view the 'Use Template' button.
• Once the repository had been successfully created in GitHub I was able to redirect to Gitpod directly using the 'Gitpod' button.
• Throughout the project, I used Gitpod to create all the folders & files to hold all my code.
• I used Git to add any changes to version control in GitHub. As I used the Code Institute template, my Git branch was already set up and so to commit any changes I just followed the below process:
  • git status (this gives a list of all modified or untracked files).
  • git add . (adds all modified/untracked files to commit staging area) or git add [filename] (adds only specified file to commit staging area).
  • git commit -m "commit message" (the commit message explains the changes made).
  • git push (this will push the changes up to GitHub).

• I logged into my Heroku account however if you do not have an account you can sign up here.
• Once signed in, I created a new app ensuring to select the region closest to my location i.e. Europe.
• With the app created, I selected the 'Resources' tab and searched for 'Postgres' which will create a Postgres database for this project. I just selected the FREE plan for use with this project.
• To use Postgres with my project, there are two installations that are required. I installed these in the gitpod terminal with the following commands:
• pip3 install dj_database_url
• pip3 install psychopg2-binary
• As new installation had been made, I updated my requirements.txt file which advises Heroku the installations it needs to make in order to run the app. The update this file I typed the following in the Gitpod terminal: pip3 freeze > requirements.txt
• To ensure that the project is set up to use Postgres when the project is deployed, I changed a few sections in the settings.py file of zolsha_ordering.
• Firstly at the top of the file, I added the following: import dj_database_ur
• Then to ensure all of the migrations are completed for Postgres as well as the SQLite database used in development, I commented out the current database settings.
• I then added the below to the database setting:
  DATABASES = {
  'default': dj_database_url.parse('DATABASE_URL')
  }
  The DATABASE_URL can be found in Heroku under the settings section. If you 'Reveal Config Variables' the DATABASE_URL is displayed there. This can be copied and entered into the settings as above. However this should not be added to version control as this is an environment variable and will eventually be gained from the Heroku Config Variables when deployed. But for setting up the Postgres database this can be entered directly into the settings.
• Once these settings are updated, I need to migrate all of the migrations using the following command:
  python3 manage.py migrate
• I also need to load all of the pre-set data into the Postgres database such as the categories, sub-categories and menu items. To do this I entered the following commands into the terminal:
  python3 manage.py loaddata categories
  python3 manage.py loaddata subcategories
  python3 manage.py loaddata menu
• I also needed to recreate the superuser with the following commmand:
  python3 manage.py createsuperuser
• Once all of these changes had been made, I removed the DATABASE_URL from the settings so I did not end up in version control and commited the changes.
• I then implemented an if statement in the settings.py under the DATABASE section. This will ensure that during development the SQLite database setting are used and when deployed, the Postgres database setting will be used.
• The following if statement was added:
  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': os.path.join(BASE_DIR, 'db.sqlite3'),
  }
  }
• This will ensure that the DATABASE_URL environment variable is retrieved from Heroku and not stored in version control.
• The Postgres database is now set up and ready to use for deployment.

• I order for the app to be deployed correctly to Heroku I needed to install Gunicorn.
• To do this I entered the command below into the terminal:
  pip3 install gunicorn
• This will need adding to the requirements.txt file using the following command:
  pip3 install gunicorn
• Heroku also requires a Procfile to know how to run the application.
• To create a Procfile in the workspace I entered the following into the terminal:
  touch Procfile
• The following is then added to the Procfile:
  web: gunicorn zolsha_ordering.wsgi:application
  The 'zolsha_ordering' is the name of the app in which the settings are located.

• Firstly, I logged into Heroku in the command line using: heroku login -i
• I then disabled the static files being deployed until I had set up my AWS bucket using the following: heroku config:set DISABLE_COLLECTSTATIC=1 --app zolsha-order-online
• I then added Heroku to the allowed hosts in my settings.py using the following:
  ALLOWED_HOSTS = ["zolsha-order-online.herokuapp.com", "localhost"]
  This will also allow the host to be the local hosting environment too.
• Ater pushing the changes to my Github repository, I then set up to push to Heroku as well using the following command in the terminal: heroku git:remote -a zolsha-order-online
• Finally, I used the following command to push everything up to Heroku: git push heroku main
  which will allow Heroku to deploy the project.
• I also connected to my Github repository from Heroku & set up 'Automatic Deployments' so that everytime I push to Github, the project is deployed by Heroku.

• Firstly, I created an AWS account by following the sign up steps & providing all the relevant details. This will be used to host my static files.
• Once my account was created, I searched for S3 which is the cloud based storage and created a bucket. I gave the bucket the same name as my Heroku app to keep everything consistent. I then selected the region that was closest to my location. I also disabled the 'block public access' as I will need everyone to be able to access the static files in order to view the website.
• I then made the following change to the properties for the bucket. I enabled static web hosting and entered a generic index.html and error.html in the relevant feilds as these are not required for our use of S3.
• Then I made the following changes to the permissions. In the CORS section, I entered the following:
  [
  {
  "AllowedHeaders": [
  "Authorization"
  ],
  "AllowedMethods": [
  "GET"
  ],
  "AllowedOrigins": [
  "*"
  ],
  "ExposeHeaders": []
  }
  ]
  I then clicked on 'edit' on the Bucket Policy section (you will need to copy the ARN from this page) & then followed the link to generate a policy. I selected 'S3 Policy' from the dropdown and added a * into the Principal field to ensure all were selected. Then the action I selected from the dropdown was 'get object'. I then entered my ARN from the previous page and clicked 'Add Statement' followed by the 'Generate Policy' button. Once the policy has been generated, I copied it and pasted into the Bucket Policy section. I made sure to add /* on to the end of the resource line. Finally, I edited the 'Access Control List' to allow everyone to access the list permission.
• I then needed to create a user for the bucket. To do this I used another section of AWS called IAM. I searched for this in AWS and started by creating a group for my user to be placed in. I clicked the 'Create Group' option and named the group a relatable name compared to my bucket.
• With the group created, I then needed to assign a policy to it. To do this, I accessed the policy section of the group and then clicked 'Create Policy'. Using the JSON tab, I then imported managed policies, searched for S3 and selected the AmazonS3FullAccess and imported this. Once this was imported I added my ARN to the resources section and added a second line with the /* at the end as well. I then reviewed the details, provided a name & description for the policy & finally generated it.
• In the group's permission section, I then attached the policy I had created by finding it in the list using the name I had given it.
• I was then able to create a user, giving the user a name & programmatic access. Finally I selected the group the user would be added to i.e. the group I had just created and clicked 'Create User'.
• This generated the user keys which are needed for Heroku to access the bucket. I downloaded the CSV file as these user keys are important and the file can only be downloaded at this point.
• Back in Gitpod, I then installed two packages to allow Django to connect to AWS. Please see the following commands entered below:
  pip3 install boto3
  pip3 install django-storages
• These were then frozen to the requirements.txt file as we have done previously. I also added storages to the list of installed apps in the settings.py file.
• In Heroku, I then set up a new Config Var : USE_AWS and set the value to True
• In settings.py I then added an if statement to check if there is a variable 'USE_AWS' and if so use AWS for static storage. Please see below:
  
• I then set up the custom_storages.py file to advise Heroku we want to use AWS for storage. Firstly I imported settings from django.conf and then S3Boto3Storage from storages.backends.s3boto3. The following classes were added to the custom_storages.py file:
  
• I was then able to push everything to Github & Heroku and the project was fully deployed on Heroku.

• You will first need to download or clone a copy of the code that is provided in my Github repository - please see above for the Github link. You can do this by clicking the 'code' dropdown on Github and either download the zip file and then upload to your own repository or you can use the following command in your own workspace: git clone https://github.com/elliemcavoy/zolsha-order-online.git
• Once you have all of the code files in your workspace, use the following command to download all of the required packages to run: pip3 install -r requirements.txt
• You will then need to enter your environment variables into your workspace. These easiest way to do this to avoid having to enter them each time you restart your workspace is via the settings section of your Gitpod (or whichever development tool you are using). The following environment variables are required:
  
  • SECRET_KEY = your django secret key which you can generate using the following link: Django secret key generator
  • STRIPE_PUBLIC_KEY = your Stripe public key (you will need to create an account at: Stripe
  • STRIPE_SECRET_KEY = your Stripe secret key from your Stripe Account
  • STRIPE_WH_SECRET = your Stripe webhook secret key
  • IN_DEVELOPMENT = True
• As you are setting up a new Django app, you will need to migrate all of the models to the database. In order to do this follow the below steps and enter these commands into your terminal:
  
  • python3 manage.py makemigrations --dry-run
  • python3 manage.py makemigrations
  • python3 manage.py migrate --plan
  • python3 manage.py migrate
  The --dry-run and --plan flags will just display the planned actions so you can ensure there are no migrations that are not correct.
• You will then need to create a super user to enable you to access the models & database items. To do this just enter the following into the terminal:
  python3 manage.py createsuperuser
  and follow the on screen prompts to set up your super user.
• You will also need to load the fixtures data to ensure the filtering, searching & adding items work correctly. To do this enter the below into your terminal:
  python3 manage.py loaddata categories
  python3 manage.py loaddata subcategories
  python3 manage.py loaddata menu
  Ensure you enter these in the above order as the subcategories & menu data require the categories data to upload.
• You are now ready to start running the website in the local host so you will just need to enter: python3 manage.py runserver in the terminal and open the exposed port in a separate browser window.

• The following elements and components have been taken from Bootstrap including the Jquery (when required) to operate them successfully:
• Navbar & Side Navbar
• Card Component for all menu items, availability section & order history.
• Toast component for messages section.
• Date & time selectors for dining availability.
• Bootstrap classes have also been used for styling the components.
• Google Fonts utilized for all font styles within the project.
• Font Awesome used for all icons throughout the project.

• Django Documentation- used to help implement AllAuth and also assisted with issues relating to Django such as correct settings to be applied in settings.py.
• Timepicker.co - used to implement the date & time picker elements in the correct format.
• Stripe Documentation - used to implement the payment system including the javascript to submit the payment form.
• W3Schools - used to help implement the while loop for the delivery charge functionality in contexts.py.
• 404 Page - used to add a 404 error page to replace the standard error page.
• Back to top button - used to implement the back to top button on the menu items.
• Python String Contains - used when adding the postcode functionality in contexts.py.
• Tutor Support assisted with bug fixes on elements of the project such as webhook errors & filtering issues. Please see the testing documentation for further details on the assistance received.
• Code Institute Tutorials were used for reference when creating functions & deploying to Heroku.
• Boutique Ado Mini Project was used as reference for this project as some of the functionality required for this project was similar to that created in the mini project. The code for the bag, checkout & add/edit item views was modified to make it suitable for use in this project. The Javascript for the quantity inputs was also taken from the Boutique Ado project.

• Font Awesome used for all icons and symbols.
• All photograph images were provided by Zolsha Restaurant.
• Image to show responsive design from http://ami.responsivedesign.is/#