A restaurant website capable of reserving a table, canceling a reservations and viewing your resrvations.
It showcases my ability to use the Python Django Framework.

The deployed web application can be found here.

• 1. Introduction
• 2. How to use
• 3. Frameworks and Technologies
• 4. Testing
• 5. Bugs
• 6. Future Updates
• 7. Contribution Links
• 8. Deployment
• 9. Design Phase
• 10. Wireframes

Go to the top

This is my first web application using the Django Framework. It is part of my project portfolio required in the Full-Stack Software Development Diploma I am currently undertaking. Django is a Python-based free and open-source web framework that follows the model–template–views architectural pattern.
The aim of the project is to create a restaurant reservations website. The website should allow the user to book one or more guests into the restaurant at a time and date of the users choice. The site owner will have a ability to take online bookings for their restaurant.

The main features consist of:

1. The ability to register on the website to access the reservations page.
2. The ability to login to the website once registered to view/make or cancel the users booking.
3. The ability to logout from the website once the user has viewed/made or canceled their booking.
4. The ability to view the menu page, opening times and where the restaurant is located.

Running a restaurant is a huge task that comes with a never-ending to-do-list. Most operators probably don’t like the idea of adding another assignment but there is one that is very important – a website. According to a Constant Contact/Single Platform survey, “75% of consumers surveyed often choose a restaurant to dine at based on search results”.
If a restaurant doesn’t have a website, they’re missing out on a massive audience. Online visibility is huge for restaurants and can ultimately determine whether customers come to at that restaurant or not. Some reasons to have a website for a restaurant are:

• Brand Image
• Convenience
• Improves Trust and Loyalty
• Keep Guests Informed
• Promote Other Services

Go to the top

When the user first opens the web application they will be able to view:

1. The landing page
2. The menu page
3. The login page
4. The register page

The user will need to create an account to view:

1. The reservations page
2. The booking page

The following walkthrough with images shows the web application functionality:

When the user first opens the web application they are greeted with a landing image and and the navbar.
The landing image indicates to the user that they will need to Login/Register to make a reservation.
The navbar allows the user to visit our menu page and also provides direction the both the login and register pages.
The footer informs the user of:

1. The location of the restaurant (As this is a college project, the restaurant location is made up. the Show on Google Maps link is actaully the location of the National Gallery of Ireland).
2. Contact Details.
3. Opening Hours.
4. Links to Social media pages (As this is a college project, the social media links Facebook Instagram direct the user to the social media sign up pages).

The register page is a form that requests the following details:

1. E-mail address
2. Password
3. Password confirmation

Onces the user provides these details, they can then access the web application and view/make or cancel a reservation.
If a user accesses the register page that is already registered there a link to the sign in page.

The login page is a form that requests the following details:

1. E-mail address
2. Password

Onces the user provides these details, they can then access the web application and view/make or cancel a reservation.
If the user accesses the login page that has not already registered there is a link to the register page.

The menu page contains the menu available at the restaurant.

When the user registers they are greeted with a similar landing image and and the navbar with a few additional changes.
The landing image indicates to the user that they can reserve a table if they wish
The navbar allows the user to visit our menu page and also the reservation page and view mybooking page
The footer is unchanged from the unregistered view

The Reservations page is a form that requests the following details:

1. Title
2. Number of Guests
3. Date
4. Time
5. Comments

Onces the user provides these details, they can reserve a table on a particalar date at a perticalar time.
Once the user submits the form they will be redirected to the my bookings page.

The My Bookings page shows the users bookings.
If there are no bookings made it will say "No Reservations made"
If there is a booking the user has the ability to edit or delete an existing booking and create a new booking if they wish.

The edit function on the My Booking page when clicked allows the user to edit there existing bookings on the reservations page.

The delete function on the My Booking page allows the user to cancel their booking, once clicked the user will be asked "Are you sure you want to cancel this reservation" The title of the booking is also provided.
Their is also a "Go Back" link if the user changes their mind or clicked delete by mistake which brings the user back to the My Bookings page.

The create a new booking function allows the user to create a new booking by directing the the user to the reservations page once clicked on.

The logout page allows the user to logout.

Go to the top

This web application was created using the Django Framework.
Django is a Python-based free and open-source web application framework for the backend development of web applications and websites.
It follows the Model View Template (MVT) architectural pattern. It separates the code into three distinct parts – Model, View and Templates. The developers just have to code what should be displayed to the user and Django will take care of all the background details.
Maintained by the Django Software Foundation, the primary goal of Django is to ease the creation of complex, database-driven websites.
The Python web framework Django emphasizes the following core areas:

• Reusability
• Pluggability of components
• Less code
• Low coupling
• Rapid development

Django Allauth is an integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.

• It supports multiple authentication schemes (e.g. login by user name, or by e-mail), as well as multiple strategies for account verification (ranging from none to e-mail verification).
• All access tokens are consistently stored so that you can publish wall updates etc.

Go to the top

Google Developer Tools is used test bug fixes on the fly.
Google Developer Tools was really important when making the website responsive.

I used W3C Markup Validator to check for any errors within my HTML pages.

I used W3C CSS Validator to check for any errors within my CSS page.

I used the PEP8 online validator to check my python code for errors.

I used Am I Responsive to view how my website is displayed on different media viewports. The results suggust that the webisite is responsive for the follwoing devices:

• Widescreen desktop.
• Laptop.
• Ipad.
• Mobile Phone (iPhone X).

• When “Kevs Place” is left clicked with the mouse, the browser sends the user to the Landing page. It worked as expected.

• When “Home” is left clicked with the mouse, the browser sends the user to the Landing page. It worked as expected.

• When “Menu” is left clicked with the mouse, the browser sends the user to the "Menu" webpage. It worked as expected.

• When “Login” is left clicked with the mouse, the browser sends the user to the "Login" webpage. It worked as expected.

• When “Reservations” is left clicked with the mouse, the browser sends the user to the "Reservations" webpage. It worked as expected.

• When “My Bookings” is left clicked with the mouse, the browser sends the user to the "My Bookings" webpage. It worked as expected.

• When “Register” is left clicked with the mouse, the browser sends the user to the "Register" webpage. It worked as expected.

• When “Logout” is left clicked with the mouse, the browser sends the user to the "Logout" webpage. It worked as expected.

• When “Login/Register” is left clicked with the mouse, the browser sends the user to the "Login/Register" webpage. It worked as expected.

• When “Reserve a Table” is left clicked with the mouse, the browser sends the user to the "Login/Register" webpage. It worked as expected.

• When “Show on Google Maps” is left clicked with the mouse, the browser sends the user to the "Google Maps" webpage. It worked as expected.

• When “Facebook Icon” is left clicked with the mouse, the browser sends the user to the "Facebook" webpage. It worked as expected.

• When “Instagram Icon ” is left clicked with the mouse, the browser sends the user to the "Instagram" webpage. It worked as expected.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• Once the user enters a valid email and a password that contains at least 8 characters a new user is created and they can access the web application

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• Once the user enters their email and password they registered with they can access the web application.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

• can add text to the input tag, It works as expected.

The inofrmation that is submited is posted to a Heroku Postgress database. It Submits as expected.

• When “Edit” is left clicked with the mouse, the user is able to edit their booking. It worked as expected.

• When “Delete” is left clicked with the mouse, the user is able to cancel their booking. It worked as expected.

• When “Create a new Booking” is left clicked with the mouse, the user is able to create a new booking. It worked as expected.

• When “Sign Out ” is left clicked with the mouse, the user is logged out of the web application. It worked as expected.

Go to the top

1. Django [Errno 111] connection refused error when running the server

• Fix: Database details missing from settings.py file, received assistance from my Code Institute Mentor and StackOverflow to resolve the issue.

2. Django.db.utils.Intrety Error: could not create unique index "restaurant-reservations_title_key"

Detail: Key(title)=(1) is duplicated

• Fix: The Heroku Postgres Database needed to be reset with the help of Code Institute Tutor Support

3. Issue with Django-allauth. Once a user is registered they can access the web application, when the user then logs out there is a problem where the registered user cannot log back in with with the credentails they used to register. When the user trys to log back in they "The e-mail address and/or password you specified are not correct" but they are correct. This means that if the user wants to make a booking they have to re-register with new register details.

4. On the My Bookings page I created a For Loop to show the users reservations and if there were no reservations it would say "No reservations made":

5. The Date format on the reservations page only accepts yyyy-mm-dd format wich can cause confussion for users that are more familiar with dd/mm/yyyy.

6. Deployed issue, when deploying to heroku the web application fails to pick up the static folders in cloudinary. when running the web application locally there is no issue with the static files. I have used <link rel="stylesheet" href="https://res.cloudinary.com/dz4qzokh5/raw/upload/v1640102377/static/css/style.f424d33c7c57.css"> to hard code the css to my deployed project but have not been able to do the same the images, not sure hard coding is the correct solution. when running the project locally I remove the hard cooded link and replace it with <link rel="stylesheet" href="{% static 'css/style.css' %}"> and all styling and images appear as they should.

Go to the top

1. Fix Bugs

Go to the top

• Django

• Font Awesome Icons

• Bootstrap

• Cloudinary

• Heroku

• Postgresql

• Django-Allauth

• MDN Web Docs

• W3schools

• Google fonts

• Stack exchange

• Stack overflow

• Am I responsive?

• W3C Markup validation

• W3C CSS validation

• Python Docs

• Python Tutor

• PEP8 online

Go to the top

1. Create the Heroku app
2. Attach the database
3. Prepare our environment and settings.py file
4. Get our static and media files stored on Cloudinary.

Create new Heroku App

Add Database to AppResources

Copy DATABASE_URL

Create new env.py file on top level directory

Import os library

Set environment variables

Add in secret key

Add Secret Key to Config Vars

Reference env.py

Remove the insecure secret key and replace - links to the secret key variable on Heroku

Replace DATABASES Section(Comment out the old DataBases Section) - links to the DATATBASE_URL variable on Heroku

Make Migrations

Copy your CLOUDINARY_URL e.g. API Environment Variable

Add Cloudinary URL to env.py - be sure to paste in the correct section of the link

Add Cloudinary URL to Heroku Config Vars - be sure to paste in the correct section of the link

Add DISABLE_COLLECTSTATIC to Heroku Config Vars (temporary step for the moment, must be removed before deployment)

Add Cloudinary Libraries to installed apps

Tell Django to use Cloudinary to store media and static files Place under the Static files Note

Link file to the templates directory in Heroku Place under the BASE_DIR line

Change the templates directory to TEMPLATES_DIR Place within the TEMPLATES array

Add Heroku Hostname to ALLOWED_HOSTS

Create 3 new folders on top level directory

Create procfile on the top level directory

Add code

Add, Commit and Push

Deploy Content manually through heroku/

Go to the top

The design phase helped me set and end goal and provided clarity at an early stage of what I wanted the appliication to be. The following steps outlines how I designed my web application.

Before I created my models I used excel to design a model I beleieved would best suit me application

Once I was happy with the design I incorporated it into project.

Once my models were created I then had to think what functionality I wanted, I decided to make a list of what was required:

1. The user needed to be able to make a booking.
2. The user needed to be able to edit there booking.
3. The user needed to be able to delete there booking.

Once I had my models and knew what functionality I wanted to include, I decided that my next step was to design my front end and user experience. My initial landing page wireframe was a little different to what I finally decided on:

The intial landing page looks quite different to the final landing page which can be seen in the wireframes chapther below. The initial landing page had a landing image that took up a third of the page, while a details section and map section took up another third leaving the remaining third comprised of the navigation bar and footer. When looking at this I felt that their was to much going on and that the user should be more focused, so I decided to create a div in the middle of the image and add a sign up button which I felt was more inviting to the user, I also made the landing image bigger and added the details section and map link to the footer so the user would be more focused on signing up. The final landing page can be seen in the wireframes chapther below.
The menu page I decided to have an opaque dark image with bright text that popped for the user.
For the reservations form I decided that the form should be centered and clear cut.
For the my bookings page I wanted to design a page that enabled the user to use the applications CRUD functionality. So I felt that when designing it, first it should be simple to use and two, the user should understand immediately how to use it. The design I implemented I beleive does this as the buttons to edit and delete are in line with the reservatiosn title so it's clear to the user what booking he/she is about to edit or delete.

Go to the top