Table of Content

Introduction

This is Part of my Fourth Project at Code Institute.

This is a simple Restaurant Booking System, were I can book tables based on a date and time I am also able to see the Restaurant's Menu and Chef's specials.

Live link can be found here

Table of Content

Planning
Deployment
Features
- Features that have been included in this project
- Future features to be added at a later stage
Testing
- Manual Testing
- Automated Testing
Bugs
Credits

Planning

These Wireframes and UX Designs were designed on Figma

Wireframes

Homepage

The message box in the middle is for where the carousel will go

Menu Page

The box in the middle is to represent the menu
breakfast, lunch, supper, alcohol or starter menu

About Page

The box in the middle is where I will place a section about our humble beginnings

Book a table Page

The big box in the middle is for all booking history
The top box on the left-hand side is for the last booking
The one under that is for vouchers
The voucher system has been taken out of the equation for now

Ux-design

Home Page

Menu Page

Book Table Page

About Page

ERD diagram

I have taken the voucher model out
as of now it became an unnecessary feature

Colour Pallet

Click here to see where I got this color pallet from

How I came by this color Pallet:

I went onto Google and googled: What would be a nice color theme for an exclusive restaurant

See results here
I had thought that a nice light gray would've worked well as some of the colors used with my UX design was already a grayish color

User Stories using MOSCOW Prioritization techniques

This Project was done in incremental stages, trying my best to follow the agile methods.

Header

kanban board

Explanation of the columns on the board:

Backlog: this is where the issues start from when they are created
Ready: these issues are ready to be picked up so work can be conducted
In Progress: This is what is busy being worked on
In review: This is the stage were the testing gets done
Done: for all completed issues

Milestones

This project was done in incremental stages, building it page by page. As such, the milestone percentage will change slightly in each iteration.

This is when I am 46% done, but only the header issue was added

Footer

The footer had only three issues in it, so I only labeled them as Must-have
There was also an issue that I created for Documentation

Once the footer had been completed, 84% was done.

Homepage

There were only four issues added for this section
As I didn't plan on doing a lot of work here

The milestone was taken after the homepage was done
When the Menu Page and About Page were added as issues

Menu Page

I created 10 sticky notes to decide on what I wanted for the issues
Once I knew what I wanted, then created the issues for the kanban board,
Sorting them out into Moscow priorities sticking with 60% Must-have
I have also created an issue for the documentation
Which I will do after all required issues are done

Sticky notes on Figma to plan what sort of issues I am wanting to solve

Once the Issues were created, I gave them their labels using MOSCOW priorities

After all, planning is in place the milestone section shows percentage done

About Page

Screenshot of the issues board using moscow priorities

The kanban board in action

When the last section was added, this is the milestone thus far

Table booking Page

Screenshot of the kanban board when busy on the bookings page

Screenshot of the Milestone project board

Technology Used

HTML/CSS - HTML templating and CSS styling
Python—logic used in this project
JavaScript—Used for Models and other front end logic
Django - Python Framework for developing this project
PostgresSQL - using elephantSQL for database
Heroku - cloud deployment
GitHub - version control
Pycharm - IDE for development

neat and clean code

Code always needs to be kept neat and tidy
As such, I have tried my best to organize my code readably

order of imports

standard libraries
third-party libraries
django imports
local imports
imported based on logic: like try/except or if statements

reference

order of methods in classes

magic methods: def magic_method(self)
public methods: def public_method(self)
class method: class within class
private methods: def private_methods(self): helper functions
get_queryset: this is used for gathering data for get_context_data
get_context_data: this is for rendering data to a template file

order of classes within files:

follow CRUD operations for views
follow alphabetical order for all other files

order in test files:

setUp method
helper functions: in alphabetical order, then grouped together by relevance
tests: in alphabetical order

reference

Deployment

Setting up on Heroku

head over to Heroku Dashboard to Login
once log in, click on New for creating a new project
type in the new name for the app
click on what region you are wanting your server to be in
once the app has been created, locate the tab that says, "Deploy"
under the deployment method, connect your GitHub account to your app and search for your repo
when you have connected your repo manual deploy your main branch
once manually deployed, it will fail next would be to get the environment variables up and running
locate the settings tab at the top
scroll down until you see config Vars
click the purple button that says, "Reveal Config Vars"
make sure that you have heroku/python build pack added to the project
add the environment variables on the Heroku Dashboard

Forking the GitHub Repository

Locate this repository
Make sure that you are on the tab that says, "Code"
When on that tab, locate the tab that says, "Fork"
Click on the Fork tab
Once it has been forked
You need to clone it to your local machine

Making a Local Clone

Making a local clone of this repo can either be done by ssh or http
make sure that ssh is set up correctly on your PC before using it
to ssh use the following command

git clone git@github.com:douglas86/ci-project4-restaurant-booking-system.git

to use http use the following command

git clone https://github.com/douglas86/ci-project4-restaurant-booking-system.git

once it has been cloned, make sure to look at runtime.txt to see what python version is used
to install all the python packages that are required for this project, use the following command

pip install -r requirements.txt

to start the virtual environment, use the following command

source .venv/bin/activate

once started to create a file called env.py
you only need to create three environment variables for local development
CLOUDINARY_URL
DATABASE_URL
DJANGO_SECRET_KEY
see detailed instructions down below in the environment variables section

Environment variables

CLOUDINARY_URL environment variable

Login to your cloudinary account
Locate your Profile image, which you should see at the bottom of the tab on the left
Once on your profile page, go to your API Keys section
At the top of that page copy the one that says, API environment variable
place the API Key and API Secret in the correct places in the key parameters
this key can now be placed in Heroku or for local development
on the Heroku dashboard, there are two sections of the key and the value
place CLOUDINARY_URL in the key section
and your api key in the value section
on local development in the env.py file, you need to use the os module for environment variables
import the os module at the top
and create the following method:
os.environ.setdefault("key", "value")
placing CLOUDINARY_URL as the key
and the api key for cloudinary as the value

DATABASE_URL environment variable

To get this env login to ElephantSQL
create a new Instance (The big green button on the right-hand side)
fill in all the details make sure to select Postgres 13 and above
once the new instance has been created
locate the tab that says, "Details" on the left-hand side
once you have clicked on that tab, there is a URL that you need to copy for Heroku
That URL you will paste it into the Heroku environment variables section or for local development
on local development in the env.py file, you need to use the os module for environment variables
import the os module at the top
and create the following method:
os.environ.setdefault("key", "value")
placing DATABASE_URL as the key
and the api key for elephantSQL as the value

DISABLE_COLLECTSTATIC environment variable

This env is used for heroku it needs to be set to 1
If you don't have it, heroku will give you an error
This is used for the styling in the site
place this environment variable in the Heroku section or for local development
for DISABLE_COLLECTSTATIC

DJANGO_SECRET_KEY environment variable

Django secret keys should never be committed to GitHub
when running this project, you need to generate a new secret key
once you have generated the key place it in the Heroku section or for local development
on local development in the env.py file, you need to use the os module for environment variables
import the os module at the top
and create the following method:
os.environ.setdefault("key", "value")
placing DJANGO_SECRET_KEY as the key
and the newly generated secret key for the value

Features

Features that have been included in this project

hamburger image on smaller devices

When screen gets minimised all content gets reduced to hamburger menu

This has since been changed to the three horizontal lines
as it made for better UX design

Authentication

When the user is not logged in, this image will be displayed

When the user is logged in, a welcome message will be displayed with a different image

Description of the restaurant

Created a description about the restaurant
With its very beginnings

scrolling left and right arrows for carousel

There is an arrow that you can use to scroll left and right
I have tried to blend it in to the rest of the site

The design layout has changed slightly since this image
I have added it as a card, giving it better styling

table booking with booking history and next booking

You can only book a table if you are logged in
The icon in the header will not be displayed if you are logged out
There is a section to show all history of your bookings
I have left out pagination, as I will be implementing it at a later date
Displaying all history bookings as a table
I have also added it to display your next booking
But at this time it will only display the last booking that you have booked for
I have not added the logic needed to work out the next booking
as if you had a few bookings after the current date
it will just display the last one
As I believe at this stage, it will be a performance issue, as async has not been worked out properly yet
What it looks like on mobile devices

What it looks like on desktop devices

deleting table records

Once the Delete button is clicked
a modal will pop up for deleting the record from the database

reset password based on username

when you want to reset your password, enter your username

If the username is correct, it will take you to a page for a temporary password

There is a link on that page that takes you to the change password page
Which you can only access if you log in with the temp password

As a future feature, I would like to authenticate by email
As it will be more secure

Future features to be added at a later stage

I would like to add a dashboard for the admin logged-in user
I have already included a role in the database for this feature
Search based on Foreign Key in an admin panel:
- I would like to search based on a foreign key in the admin panel
- for some reason, I can't seem to search using the search_filed as it does not work on foreign keys
I am wanting to implement async/await for fetching data
As a future feature, I would like to add email for reset password

Testing

This is generally the cycle that I tried to follow for testing

Manual Testing

Title	Pass
Header	Yes
Homepage	Yes
Testing responsive of the menu page	Yes
Testing responsive of the about page	Yes
Testing of updating records	Yes
Testing if I can navigate to table page	Yes
Testing model form for booking a table	Yes
HTML Validation testing	Yes
CSS Validation testings	Yes
Wave testing for accessibility	Yes
Lighthouse testing	Yes

Header

I have tested the responsive design of the header There is a collapsable hamburger menu on devices smaller than laptop

This is what it looks like on a laptop and larger

When the navbar becomes smaller than laptop, this is what it will look like

The hamburger-menu has changed to the three horizontal lines

When the hamburger icon menu is open

Testing with HTML validator

The results can be found here

Testing with a CSS validator

The results can be found here

This testing was conducted on Lighthouse with Desktop in mind

This testing was conducted on Lighthouse with Mobile in mind

Homepage

When do I have added data for the Carousel?
You are only allowed to add three entries per meal
For instance, you are only allowed three breakfasts, three lunches and three suppers
The carousel will auto choose which one based on the time of day
I have allowed for four entries, based on the fact that if you need to update one of them

If all data is correct, it will show this in the admin panel

If you are trying to enter more than three entries for breakfast

Was testing to see if I could get the correct meals from the database
Just by changing the filter variable
When you enter what type of meal you want, it is done as a choice based on three numbers
Zero being breakfast, one being lunched and 2 being supper
There is also a number three that means that if it doesn't correspond to any number that will then run

Tested responsiveness of the carousel
I don't test for anything below 400 pixels

Responsive on Mobile devices

Responsive on Tablet devices

Responsive on Laptop devices

This design has changed to a card since it was taken

Testing responsiveness of the menu page

Testing to see how responsive the menu page is
on different screen sizes

Responsive design on laptop

Responsive design on tablet

Responsive design on mobile

I have changed the background color for the headings

Testing the responsiveness of the about page

This testing section was to test it to see how the about page
is going to look at different screen sizes

Responsive design on mobile

Responsive design on Tablet

Responsive design on Laptop

Testing of updating records

When the update button is clicked
The modal will popup using form validation
I have not yet been able to pre-populate the form using JavaScript
That will be added as a future feature
However, the update does work
You have to update both fields at the sametime
Clicking the "X" or the Cancel button will exit the modal
When submit is clicked, it will send it to a database for updating
which will send you a message to say it has been updated

Testing if I can navigate to table page

when I am logged out and I try to log in to the table page
it redirects me to sign in page
manually entering the address in address bar

when hit enters the address bar

Testing model form for booking a table

The number of seats only allows you to select from 1 to 10
The validation of the timeslots only allows you to select from 1 hour of present time
As a logged-in user, you are only allowed to book once a day, to eliminate double booking on the same day
The modal is also fully responsive
I have not been able to work out daylight savings mode

Modal form

Modal booking message

Modal testing of incorrect time slot

Html validation testing

I tested this on HTML Validator
Using the Heroku link of my live site
As the validator won't work when copying and pasting code
This link was tested on the about page
But all the pages are only giving info warnings

Css validation testing

The only errors that CSS picked up were with bootstrap
There were no other errors with my CSS code

Wave testing for accessibility

With the wave validator, there seems to be just two contrast issues on all pages
This is a small issue with the contrast of the developer section in footer

lighthouse testing

this lighthouse testing was done in incognito mode
As some of my extensions were messing with the results

home page on mobile

home page on desktop

menu page on mobile

menu page on desktop

table booking page on mobile

table booking page on desktop

about page on mobile

about page on desktop

Automated Testing

The following command can be used to run tests in Parallel Auto means that it will only run tests on threads that are available python manage.py test --parallel auto

If you are just wanting to test conventionally

Title	Pass
Authentication	Yes
Homepage	Yes
Test if correct menu gets returned based on slug	Yes
Test form invalid on Booking a table page	Yes
Test form valid on Booking a table page	Yes
Test protected pages against anonymous user	Yes
Test protected pages against users that are logged in or not	Yes

Authentication

What was tested in this scenario:

I wanted to test it if a user can be created
I wanted to test it if a user was able to log in

As this is the first time I have written auto tests by myself, I wanted to keep it basic

Homepage

What was tested in this scenario

I first created a failing test for breakfast

Changing the assertEqual variable to a number that is not zero

The results of a failing test

Testing for a passing test

Test if correct menu gets returned based on slug

What was tested?

I purposefully made a spelling error to see if the Supper Menu fails
Then pass the correct test to see if it passes

Failing test

Passing test

Test form invalid on Booking a table page

First testing for a negative test
changed seats form data to 2
wanting to see what happens if the correct data is entered
to make sure that form validation is working correctly
Then changed form seats data to 20
wanting to see if it gives me a false reading
making this test, test for a false value
Testing form invalid failing test

Testing form invalid passing test

Test form valid on Booking a table page

Tested for incorrect value changed seats data to 20
Just to get a negative result
Tested for correct value changed seats data to 2
To get a positive test result
Testing form valid failing test

Testing form valid passing test

Test protected pages against anonymous user

Test for a failing test, if status code is not 302
For some reason this test, tests against a 302 http status code
302 status codes mean resources permanently removed, in other words, it was there but then were moved somewhere else
Test anonymous user failing test

Test anonymous user passing test

Test protected pages against users that are logged in or not

Testing if the status code is something other than 200 if it returns an error message
Testing if the status code is 200, a passing test
Test user failing test

Test user passing test

Bugs

Title	Solved
The text is not aligned correctly to the Authentication Icon	Yes
Labels are not correctly sitting next to the Icons	Yes
Problem with Hamburger Menu	Yes
Hamburger menu jumps as I try and open and close menu	No
Operational error in database as trying to run auto test	Yes
Carousel image not being aligned correctly	Yes
Favicon icon not displaying	Yes
Heroku auto refreshing unnecessarily	Yes
Navbar not at top of screen	Yes
Performance issues in page loading	Yes
Too many connections to database at once	Yes
Styling of homepage	Yes
Carousel arrows	Yes
Copyright test not showing in footer	Yes
Copyright text overlapping with developer content	Yes
Next booking not being displayed	Yes
Not recognizing daylight savings mode	No
Table over lapping on smaller devices	Yes
TypeError in console	Yes
Am I Responsive does not display image	No

The text is not aligned correctly to the Authentication Icon

The text was not aligned correctly to the icon above it

This bug was solved
by placing it inside a container
then I could manipulate it with CSS

Labels are not correctly sitting next to the Icons

The label is sitting to far below the icons And not aligning correctly

This issue was solved with flexbox and CSS They were already in their own container class I just had to alter the CSS properties

Problem with Hamburger Menu

What is the Problem?

When I am testing responsive design and the Hamburger menu is open
It doesn't want to display the page icons

How was this Problem solved?

I separated my code out into a services directory inside the templates directory
Created two div containers giving each one its own class
The first had a class of mobile
The Second had a class of tablet
I would then hide and un hide the two depending on what size screen it was on
The reason for breaking up the code is that I needed to call the icons in two different locations
I am attempting to practice DRY (Don't Repeat Yourself) run coding style

Hamburger menu jumps as I try and open and close menu

What is the Issue?

The hamburger menu is jumping up and down as the menu is opened or closed
The bug is not visible from the screenshot below

I have since changed to the horizontal icon but the bug is still there

Operational error in database as trying to run auto test

Problem?

When I tied to run python manage.py test
I get the following error
error message "django.db.utils.OperationalError: near 'None': syntax error"

Solution?

Destroy all data in database using the flush command
I used this command as I suspected that it was an issue in the database
I then went on to delete all migration files, but accidentally deleted directories at the same time
Then tried to makemigrations and migrate
But, for some reason it was not picking up my app like: home, menu, about, book_table models
so I did a bit of googling to find that I can makemigrations on a single app
which is what I did: python manage.py makemigrations home
doing that for all of my apps
this then created the migrations directory and the initial migration for that app
after running makemigrations on all my apps, I then had to migrate my db
then the page could load properly after that and all was sorted out
which I could also run python manage.py test
I was no longer getting that error
Then test files were now running as they were supposed to
the issue was all sorted, but now I have to create all my data again
re-populating my database with data from fixtures JSON files
I had to run the command one at a time python manage.py loaddata fixtures/fixture/chef_special.json

Note to myself for a future reference?

In future don't use the flush command as it will completely wipe my db
try and delete my migrations directory and start from there

Carousel image not being aligned correctly

Problem?

The image is not being aligned neatly to the carousel on Mobile devices
This was tested on the iPhone 6/7/8 display

Solution?

This bug has been solved using cards
as cards were easier to keep content in a container

Favicon icon not displaying

Problem?

Favicon icon does not want to load on server start

favicon is not loaded in the browser tab

favicon is not loaded in the console

Solution?

As soon as I turned some methods in the class Menu
To functions, as they were static methods
The icon loaded correctly as intended
Not quiet sure why or how it worked

Heroku auto refreshing unnecessarily

Problem?

for some reason, heroku is auto refreshing
I expected that it is a problem with django_browser_reload package
This package I use for in development
It refreshes my server on file change

Refreshes browser tab unnecessarily

Refreshing in the Heroku console logs

Solution?

I solved this problem by adding a simple logic to settings.py and urls.py
If Debug == 'True' then add django_browser_reload to constant lists
It needed to be a string for the Debug constant for when environment variables load
It loads it as a string

Added logic to settings.py file

Added logic to urls.py file

Navbar not at top of screen

Problem?

The navbar is not quite sitting at the top of the screen

Solution?

this bug was solved with simple CSS

Performance issues in page loading

Problem?

The score that I received is too low for lighthouse testing
I need to bring that score up
I think that there is too much logic that is happening in the background
I might have to consider a pip package for multi threading

Solution?

I have solved this bug by simplify some of my logic that I use

Too many connections to database at once

Problem?

When trying to connect to the database on the menu page, I am getting a connection error
There are too many models trying to connect at once

Solution?

with this error, I was using thread module
with using thread module, you sometimes might get a thread lock issue
the computer doesn't know what todo, or it sends to many signals to elephantSQL
whichever issue it was, I have now completely removed thread module
and made two global variables to gather data that I needed
then filter it out for when I need it

These variables have since been moved inside the class

styling of homepage

Problem?

The styling of the homepage does not look the same as the rest of the site

Solution?

I have now created it as a card within the carousel
It is responsive from 375 pixels
the indicators at the bottom will disappear on screen sizes less than 400 px
the indicator is clickable for if you want to go to a specific item
with side indicators to click for left or right images

carousel arrows

carousel arrows are being displayed when there is no carousel to display
on certain devices the arrows don't seem to want to show up properly
at this stage, I am not sure how to change that

copyright text not showing in footer

The current year is not showing when
on the logout, login and sign out forms

copyright text overlapping with developer content

Problem?

Overlapping text in footer

Solution?

changed the left and right margin from 0.5em to 1 em

next booking not being displayed

Problem?

The Next booking is supposed to show the last booking in the history table

Solution?

There was just a simple variable that I had to add
I also changed from next booking to last booking
As last booking made more sense

not recognizing daylight savings mode

Problem?

Django does not recognize daylight savings time
For some reason, Django does not change time zones
As I have just reached daylight savings mode

This is the current date and time of my computer

Solution?

This bug has not been solved yet
This is also added as an extra feature for future reference

This is what was saved in the database with current model Notice that the Booking created time is an hour difference

table over lapping on smaller devices

Problem?

The table was not responding when getting to smaller devices

Solution?

Hide the last child element on smaller devices
In this case, the Delete and Update buttons

I have decided that delete and update buttons
it will only be used for screen sizes bigger than tablet

TypeError in console

Problem?

TypeError occurs after a few seconds of page load
This error occurs from the timeout section in the script.js file

Solution?

added a try/catch block for TypeError
in the catch block nothing will occur
I didn't see anywhere on the internet were you can't do a try/catch like this

Am I Responsive does not display image

Problem?

Am I Responsive does not want to display a screenshot of my live website

Solution?

Not sure what this problem is it might be a loading issue

Credits

How the hamburger menu was achieved was taken from here
All icons in this project were designed by Icons8 with the help of Figma
All images that you see on the homepage for Chef's Specials were taken from homepage, I tried my best to make sure that there was no copyright on it
Document that assisted me with CRUD operation using Class-Based Views
Document that help me with form validation and success url
Setting form validation with widgets
How to display messages in the template
example on how to test if file exists
convert to base64 string this was used for themes, but decided to take themes out, I am planning on this for a future feature
Luke Buchanan - Mentor
Code Institute - Bootcamp
reference for the success message
Example of how to use the Delete View

Name		Name	Last commit message	Last commit date
Latest commit History 616 Commits
.devcontainer		.devcontainer
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
about		about
book_table		book_table
booking_system		booking_system
home		home
menu		menu
static		static
staticfiles		staticfiles
templates		templates
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
db.sqlite3		db.sqlite3
manage.py		manage.py
package-lock.json		package-lock.json
package.json		package.json
requirements.txt		requirements.txt
runtime.txt		runtime.txt

douglas86/ci-project4-restaurant-booking-system

Folders and files

Latest commit

History

Repository files navigation

Table of Content

Homepage

Menu Page

About Page

Book a table Page

Home Page

Menu Page

Book Table Page

About Page

ERD diagram

Header

Homepage

About

Resources

Stars

Watchers

Forks

Languages