Perfecto's Restaurant is the restaurant that serves the most delicious and famous all over the world. where you can eat Brunch because it is open from 10:00am-10:00pm. you can book thru online to reserve a seat or table.
The purpose of this Portfolio Project #4(Full Stack Project), this is part of me achieving the Diploma in Full Stack Software Development at Code Institute.A Restaurant web page where Users can book or reserve a table.
- Project
- 1.1 Objective
- 1.2 Site Users Goal
- 1.3 Site Owners Goal
- 1.4 Project Management
- User Experience
- 2.1 Wireframes
- 2.2 User Stories
- 2.3 Site Stracture
- 2.4 Design
- 2.4.1 Typography
- 2.4.2 Color scheme
- Features
- 3.1 Navigation bar
- 3.2 Login
- 3.3 Register
- 3.4 Make a reservation
- 3.5 Reservation list
- 3.6 Update reservation
- 3.7 Cancel reservation
- 3.8 Hero section
- 3.9 About section
- 3.10 Our menu section
- 3.11 Footer
- Technologies Used
- 4.1 Languages
- 4.2 Frameworks, Toolkit & Software
- 4.3 Libraries
- Testing
- 5.1 Code Validation
- 5.2 Fixed bugs
- 5.3 Supported screens and browsers
- 5.4 Test cases
- 5.5 Automation test
- Deployment
- Credits
Since I was a child, I love to cook and I learned this from my mother, I love to experiment with my dishes to have different flavors that are delicious. the idea of the name Perfecto it is my grandfather's name which I love very much. and I want to build a restaurant one day with a variety of delicious dishes that are famous in different countries. this is my dedication to my grandfather and my dear mother.
This restaurant will provide a unique experience and taste to those who love to eat and try different cuisines.
The purpose of the site owner is to deliver to users the website where they can eat Global Cuisine such as Japanese, Indian, German, American, and many others in this restaurant.
I used a project board as instructed in the module tutorial, but I haven't practiced using it much and I don't know what I should put in it. and due to my lack of time to do this project I won't be able to use it much because I'm always in a hurry, but in the next projects and if it's my time to do it full time I'm sure I'll be able to use it more and I'll be able to use it right ### Github Project Board
-
I used balsamiq to create wireframes for my project.
-
as a Site User:
- I can register an account so that I can book a reservation.
- I can login to my account using username and password so that the system can authenticate me.
- I can view the list of food menu so that i can decide what i want to eat and make a reservation.
- I can book a reservation to the website so that it is easy and fast.
- I can choose the time and date so that i can be sure that i have a table on that day and time.
- I can enter how many people I am with so that there are many. they can prepare a big table for us.
- I can leave a note on my reservation so that i can say what my request are.
- I can see that my reservation is successful or valid so that i can make sure that i have a reservation.
- I can see the list of my booking so that I can see its details in case I forget it.
- I can update my booking in case I entered a wrong detail I can change it.
- I can see the validation when I cancel my booking so I'm sure it's canceled.
- I can logout to my account so that no one else can use my site using my details.
-
as a Site Admin:
- I can create, read, update and delete bookings/reservations so that I can manage my restaurant booking system
- I can prohibit double booking so that our operation is not disturbed and other guests can book.
- This website is divided into two parts, when the User is logged out and when the User is logged in. there is a slight difference here. that when the User is logged out it cannot book a reservation. but when the User is logged in User can book a reservation, view reservation, update, and cancel.
-
In the design of my website I chose an appropriate font-color and font-style that is clear and easy to read by the User.
In this project I used only two font-styles. it is the Phudu and the Open sans. I used Phudu mostly for headers and Open sans for paragraphs and so on. I want to use only simple fonts and easy to read by the User.
In this Perfecto's restaurant project I used #fffff, #0c0b09, #fea116 for the general font-color of the page and #d9ba85 for the hover links. i used #000000 for the background color of the spinner. I also used an rgb color like rgb(0, 0, 0) which is linear-gradient and transparent for the background of the navbar so that it looks nice and doesn't get in the way of the page when it is scrolled down. For the buttons I used the color #fea116, #ffb639 and #ffffff to match the color of my logo and the backgournd picture and #cda45e for the hover. I used the color #a40000 for validation in the log-in modal and registration-modal.
-
A Simple, Easy to Remember URL:Perfecto's Restaurant
- Here in the navigation bar there is a slight difference when the User is logged in or logged out. we can also see here the customize logo of Perfecto's Restaurant ang hom, about, menu, and book a reservation.
when logged out
- Here in screen shot of the navbar logout this is what we can see when a User is logged out, the images also show the appearance when desktop and mobile view.
when logged in
- Here in screen shot of the navbar login this is what we can see when a Users is logged in, the images also show the appearance when desktop and mobile view.
feature differences
-
The feature difference is the image of logged out and logged in views, there is not much difference in its appearance except for LOGIN | REGISTER and BOOK A RERVATION on click. When the Users is logged in, this is what the Users will see that is different.
-
Its other difference is that when the Users is logged in, Users can make a reservation and view his reservation, update and cancel the reservation. and when the Users is logged out, the Users does not have access to view and make a reservation and see reservation... except for this Users can see the food menu to choose what the Users wants to eat before booking.
- I used a modal on my login page so it looks good and has an engaging and stylish design. The Restaurant Logo can be seen here and Users must login using their registered username and password.
- I also used it on my registration page a modal to make it look nice and engaging.
- In this page, I just made a simple and old style page because I have very little time to do my project due to my full time job. I just used a background to make it look nice.
-
Similar to the make a reservation page it is simple and old style. Users can see what they have booked here. And on this page Users can update or cancel their bookings. But there is also a difference here in the feature when there is no book and when it is my book. See the difference in the screen shot below.
- This page is just like make a reservation the look is simple old style. I could make it more beautiful and unique design but I really don't have enough time because of my work and responsibilities at home.
- Here on the cancel reservation, I used a modal to view it interactively. I didn't change the style from bootsrap.
- Here in the Hero section I used a carousel to display different images as a background so that it is beautiful and engaging to look at. In the middle of this section Users can see the big title Welcome to Perfecto's to let the Users know that I am glad that the Users visit my webpage and see what is available in our restaurant.
below it, the Users will also see the
view our menu
buttons so that Users can easily see our food offerings.
- This is our about us section telling restaurant services we can offer.
- This is our menu section, Users can see here the different food cuisine, the name, the rate, the description and the price. in rating the food at the moment users cannot rate it but it will be added later on in the future features of the project.
- In the footer, this is where Users can see the restaurant's social links. this is just a very simple footer
- In the login modal page, add a remember me box and forgot password?. Where the Users does not need to type again and again on his/her login page and it will login automatically. And in case the Users forgets his/her password the Users can restore it or create a new passwork to make his account more secure.
- In the Registration modal it is also necessary to add that when the Users register there is a confirmation email that will be sent to the Users email address to verify the Users who registered.
- In our menu section add a drinks menu the Users are able to rate the food by their own.
- Add Contact Us with map location of the restaurant section.
- Add more style to Make a reservation and update a reservation page.
- A photo gallery section.
- A comment ang rate us section.
- Am I Responsive - online tool used to create mockup to present responsive design of this project.
- Balsamiq - design tool used for creating wireframes.
- Bootsrap 5 - a CSS framework and toolkit used for developing responsive and mobile-first websites.
- Canva - used to create the Perfecto's Restaurant logo.
- Chrome DevTools - used to inspect the rendered HTML (DOM) and network activity of my pages. Used to troubleshoot ad serving issues.
- Cloudinary - a service that hosts image files in the project.
- Coolors.co - used to create color palette.
- CSS Valitadtion - used to validate CSS code.
- Django - Python web framework used for this project.
- Fontawesome - where i import font icons for this project.
- Favicon.io - generator i use to create favicon for this project.
- Google Fonts - where i import and use font-style for this project.
- Git - Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- Gitpod - IDE used to code the project.
- GitHub - GitHub is used to store the project's code after being pushed from Git.
- Heroku - a container-based cloud Platform used to deploy, manage, and scale apps.
- HTML Validation -used to validate HTML code.
- JSHint Validation - used to validate JavaScript code.
- Lighthouse - used to test site perfomance
- Visual Studio Code for Windows - IDE used to code the project.
- Unsplash - for the webpage main background image.
- Windows Snipping Tool - used to save the screen shot.
- asgiref==3.6.0 - ASGI is a standard for Python asynchronous web apps and servers to communicate with each other, and positioned as an asynchronous successor to WSGI. You can read more at https://asgi.readthedocs.io/en/latest/.
- cloudinary==1.32.0 - The Cloudinary Python SDK allows you to quickly and easily integrate your application with Cloudinary. Effortlessly optimize, transform, upload and manage your cloud's assets.
- coverage==7.2.1 - Coverage.py measures code coverage, typically during test execution. It uses the code analysis tools and tracing hooks provided in the Python standard library to determine which lines are executable, and which have been executed.
- dj-database-url==0.5.0 - This simple Django utility allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.
- dj3-cloudinary-storage==0.0.6 - Django Cloudinary Storage is a Django package that facilitates integration with Cloudinary by implementing Django Storage API.
- Django==3.2.18 - Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel.
- gunicorn==20.1.0 - Gunicorn ‘Green Unicorn’ is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model ported from Ruby’s Unicorn project. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resource usage, and fairly speedy.
- Pillow==9.4.0 - Pillow is the friendly PIL fork by Alex Clark and Contributors. PIL is the Python Imaging Library by Fredrik Lundh and Contributors
- psycopg2==2.9.5 - Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
- pytz==2022.7.1 - pytz brings the Olson tz database into Python. This library allows accurate and cross platform timezone calculations using Python 2.4 or higher.
- sqlparse==0.4.3 - sqlparse is a non-validating SQL parser for Python. It provides support for parsing, splitting and formatting SQL statements.
-
JS Hint - used to check JavaScript codes.
-
W3C CSS Validation Service - used to validate the project CSS codes.
-
Nu Html Checker - used to check the project html codes.
-
Pylint - used to check the project python codes.
var pagination = document.getElementById('pagination');
var paginationElement = document.querySelector('.pagination');
if (document.querySelectorAll('.card').length === 0 && paginationElement) {
paginationElement.style.display = 'none';
}
- to fix the bug:
var paginationElement = document.querySelector('.pagination');
var cardElements = document.querySelectorAll('.card');
if (cardElements.length === 0 && paginationElement !== null) {
paginationElement.style.display = 'none';
}
- Food list not rendering to home page our menu section view.
- to fix this bug:
-
Supported browsers
- Google Chrome
- Microsoft Edge
- Safari
-
Supported screens
- Such a viewport was obtained from the am i responsive website where it was used to have an appropriate size for responsive design.
- Apple products:
- iPad Pro = 1024x1366px
- iPad and iPad Mini = 768x1024px
- iPad Air = 820x1180px
- iPhone 13 Pro Max = 428x926px
- iPhone 13, iPhone 13 Pro, iPhone 12 Pro = 390x844px
- iPhone X = 375x812px
- iPhone 5 = 320x568
- I used google developer tools to test the responsiveness of given iPad and iPhone devices.
Test description | Status |
---|---|
✓ | Clicking the Home button on the nav bar re-loads the home page |
✓ | clicking the About button on the nav bar scrolls down to the About me section of the homepage |
✓ | clicking the Menu button on the nav bar scrolls down to the Our menu section of the homepage |
✓ | clicking the View our menu button on the hero section scrolls down to Our menu section of the homepage |
✓ | clicking the Book a reservation button on the nav bar redirect to the add_reservation.html page but user can't see the booking form |
✓ | clicking the Login here button on the add_reservation.html page drops the login modal |
✓ | Clicking the Login button on the nav bar drops the login modal |
✓ | Clicking the Register button on the nav bar drops the registration modal |
✓ | The user could not see make a reservation button when clicking book a reservation button in the nav bar |
✓ | The user could not see view my reservation button when clicking book a reservation button in the nav bar |
✓ | The user can see the list of food with food name, rate, description, and price in our menu section |
✓ | Clicking the Twitter link in the footer area opens Twitter |
✓ | Clicking the Facebook link in the footer area opens Facebook |
✓ | Clicking the Instagram link in the footer area opens Instagram |
✓ | Clicking the Tiktok link in the footer area opens Tiktok |
Test description | Status |
---|---|
✓ | Clicking the Home button on the nav bar re-loads the home page |
✓ | clicking the About button on the nav bar scrolls down to the About me section of the homepage |
✓ | clicking the Menu button on the nav bar scrolls down to the Our menu section of the homepage |
✓ | clicking the View our menu button on the hero section scrolls down to Our menu section of the homepage |
✓ | clicking the Book a reservation button on the nav bar drops down a list make a reservation and view resevation button |
✓ | Log in button could not be seen by user and change it into Welcome, name of user and logout button |
✓ | Clicking the Log out button on the nav bar redirect to home page |
✓ | The user can see make a reservation button when clicking book a reservation button in the nav bar |
✓ | The user can see view my reservation button when clicking book a reservation button in the nav bar |
✓ | The user could not see view my reservation button when clicking book a reservation button in the nav bar |
✓ | The user can see the list of food with food name, rate, description, and price in our menu section |
✓ | Clicking the Twitter link in the footer area opens Twitter |
✓ | Clicking the Facebook link in the footer area opens Facebook |
✓ | Clicking the Instagram link in the footer area opens Instagram |
✓ | Clicking the Tiktok link in the footer area opens Tiktok |
Test description | Status |
---|---|
✓ | The user can view the add_reservation.html page book form |
✓ | The user cannot reserve a table when the view book form is not filled up except for the note |
✓ | When the user is trying to 'reserve table' without filling the form that is needed to be filled a message validation message shows up "Please fill out this field" |
✓ | When the user 'reserve table' with the date from the past an error message will pop up "Book date cannot be in the past" |
✓ | The user can only 'reserve table' a time between 10:00 to 19:00 or else error message will pop up "You can only reserve table between 10:00 to 19:00" |
✓ | When the user 'reserve table' with the date from the past and the time is not restaurant opening hours both error message pops up |
✓ | When the user 'reserve table' with more than maximum of no. of guest an error message shows up "Value must be less than or equal to 10" |
✓ | When the user already have reservation on that date an error message will pop up "You have already reserved a table for this date." |
✓ | When the user filled up a valid form and click 'reserve table' a success message validation shows up "Your booking request was sent. We will call back or send an Email to confirm your reservation. Thank you!" |
Test description | Status |
---|---|
✓ | The user can view the reservation_list.html page |
✓ | The user cannot view the pagination when the user doesnt book a reservation |
✓ | When the user does have a reservation, user can view the pagination |
✓ | When the user doesnt book a reservation yet the view is Reservation list empty |
✓ | clicking update button opens the update_reservation.html page |
Test description | Status |
---|---|
✓ | The user can view the update_reservation.html page |
✓ | The user cannot update the reservation when the view book form is not filled up except for the note |
✓ | When the user is trying to 'update' without filling the form that is needed to be filled a message validation message shows up "Please fill out this field" |
✓ | When the user 'update reservation' with the date from the past an error message will pop up "Book date cannot be in the past" |
✓ | The user can only 'update reservation' a time between 10:00 to 19:00 or else error message will pop up "You can only reserve table between 10:00 to 19:00" |
✓ | When the user 'update reservation' with the date from the past and the time is not restaurant opening hours both error message pops up |
✓ | When the user 'update reservation' with more than maximum of no. of guest an error message shows up "Value must be less than or equal to 10" |
✓ | When the user already have reservation on that date an error message will pop up "You have already reserved a table for this date." |
✓ | When the user filled up a valid form and click 'update' a success message validation shows up "Reservation updated successfully. We will call back or send an Email to confirm your reservation. Thank you!" |
Test description | Status |
---|---|
✓ | The user can view the delete_reservation_modal.html |
✓ | Clicking close button will redirect the user to reservation list page |
✓ | Clicking cancel reservation button will throw a validation "Your reservation is successfully canceled." it will delete the reservation and redirect to reservation list page |
-
To run the Automation test
- change the database setting in settings.py into default database setting and uncomment the sql database
- run
coverage run --source=book manage.py test
into the terminal
- Coverage report
- There are two ways to view the coverage report
- Views into the terminal
- type
coverage report
into the terminal
- type
- Views into the html page
- type
coverage html
into the terminal - type
python3 -m http.server
then select open browser - select htmlcov/
- type
- Views into the terminal
- There are two ways to view the coverage report
This project is deployed on Heroku, these are the steps:
-
First create a new Github repository using the Code institute template.
-
Find in the middle of the page
Use this template
and click it, after clicking you will see theCreate a new repository
link. Ande select it. -
Enter your repository name and click
create a repository from template
at the bottom of the page. -
After creating a new repository. press the green
gitpod
button. to open the Gitpod editor. -
In IDE(integrated development environment) you need to install the following libraries for this project.
pip3 install 'django<4' gunicorn
pip3 install dj_database_url==0.5.0 psycopg2
pip install dj3-cloudinary-storage
pip install Pillow
-
After installing the libraries. you need to create a requirements.txt file.
pip3 freeze --local > requirements.txt
-
After installing your necessary libraries, now you can start and create a project . to create a project type this:
django-admin startproject name_of_project
-
Next to this is the creation of apps.
python3 manage.py startapp name_of_app
-
Remember that for each app you need to put it in the settings of your project inside the INSTALLED_APPS list.
- in my project i made two apps it is book and food.
-
The next thing you need to do is to migrate the changes to the database. You also need to migrate every time you have new apps or there is a changes in your app models. -
python3 manage.py migrate
-
Now you can run your project using
python3 manage.py runserver
. -
Next step is to create your Heroku app. Log into Heroku and go to the dashboard.
Creating Heroku app process
1. Click "New"
2. Click "Create new app"
3. Give your app a name and select the region closest to you. When you're done, click "Create app" to confirm. Heroku app names must be unique. If yours isn't, Heroku will give you a warning
-
Next step is to create your database. These steps will create a new PostgreSQL database instance for use with your project. The database provided by Django is only accessible within Gitpod and is not suitable for a production environment. Your deployed project on Heroku will not be able to access it. So, you need to create a new database that can be accessed by Heroku.
If you don't have an ElephantSQL.com account yet, the steps to create one are here.
Create a database process
1. Log in to your ElephantSQL.com to access your dashboard
2. Click “Create New Instance”
3. Set up your plan. Give your plan a Name (this is commonly the name of the project). Select the Tiny Turtle (Free) plan. You can leave the Tags field blank
4. Select "Select Region"
5. Select a data center near you
6. Then click “Review”
7. Check your details are correct and then click “Create instance”
8. Return to the ElephantSQL dashboard and click on the database instance name for this project
9. In the URL section, click the copy icon to copy the database URL
-
Next step is you need to create an env.py file to keep things secret.There are a variety of variables that we don’t want to publish in your repository. In fact if you do, you may get an email from GitHub warning our about an exposed secret. To ensure your application works properly when deployed, you need a way to provide these variables without exposing them to the public.
- In the code above set environment variables then set a DATABASE_URL variable, with the value you just copied from ElephantSQL as follows
Replace copiedURL with the relevant string from ElephantSQL.
- As this is a Django application it has a SECRET_KEY, which it uses to encrypt session cookies. The secret key can be whatever you like.
Replace secretKey with your key.
- Make sure you save the file.
-
Next step is you need to make some changes to your settings.py file.
Modifying settings.py process
1. Now you have created an env.py file, you need to make your Django project aware of it. Open up your settings.py file and add the following code below your Path import
The if statement here acts as a little protection for the application in case you try to run it without an env.py file present. You will use the other import in a moment.
2. A little further down, remove the insecure secret key provided by Django. Instead, we will reference the variable in the env.py file, so change your SECRET_KEY variable to the following:
3. Now that is taken care of, we need to hook up your database. We are going to use the dj_database_url import for this, so scroll down in your settings file to the database section. Comment out the original DATABASES variable and add the code below, as shown
4. With those changes in place, make sure to save your file. Your application will now connect to your remote database hosted on ElephantSQL. Run the migration command in your terminal to migrate your database structure to the newly-connected ElephantSQL database.
-
Next step is to connect your app to Cloudinary.
if you don't have account Cloudinary, you may click the link to create an account.
Connecting Cloudinary app process
1. Go to your Cloudinary dashboard, go to more info and click copy API Environment variable, you will use this to connect our app to Cloudinary.
2. Now go back to env.py file and add another line at the bottom. Set the CLOUDINARY_URL, and then paste in the value that you copied. see image below:
3. Then proceed to your project settings and add "cloudinary_storage" and "cloudinary" apps in INSTALLED_APPS like the image below:
4. You need to store your media and static files down near the end of your settings.py file and add few lines, see image below:
5. Back up to the top of settings.py and under the base directory add in the template directory.
6. Then scroll down to midway in settings.py file and change the DIRS key, like the image below.
-
Now you need to connect your Heroku app to your database.
Connecting Heroku app to database process
1. Go back to the Heroku dashboard open the Settings tab.
2. Go to Reveal Config Vars.
3. Add 5 config vars: DATABASE_URL, SECRET_KEY, CLOUDINARY_URL, PORT, DISABLE_COLLECSTATIC.
DATABASE_URL, and for the value, copy in your database URL from ElephantSQL, no need to add quotation marks.
CLOUDINARY_URL, and for the value, copy in your API Environment variable URL, remove the "CLOUDINARY_URL=" written in from of the url.
SECRET_KEY containing your secret key.
DISABLE_COLLECSTATIC, and for the value is set to 1, don't forget to remove this when it comes to deplyoment of full project.
PORT, with the value of 8000.
4. After that add Heroku host name into "ALLOWED_HOSTS" in your settings.py file, and this is your Heroku app name followed by herokuapp.com and add `localhost` too, to run locally. see the image below
-
Now you can just create three directories, the directories you need are going to be media, static and template folders. and you can create these on the top level next to your manage.py file.
-
You also need to create procfile, Heroku needs this so that it knows hot to run the project. remember the capital P on Procfile. procfile is short for process file. you need to add your project name in here in my case it is "restaurant".
-
Now that's all done let's try deployment so save your files, add commit and push to our repository. And we're going to use Github as our deployment method here.
-
So go back to your Heroku dashboard and click on the deploy tab. And click on Github for deployment method, you might need to connect your Github account.
-
Then search the name of your repository, then scroll down to the bottom of the page and click on deploy branch.
-
So when it says that the app has been deployed successfully. Click on open app to view it.
- Hello Django - code institute tutorial videos on how to do testing.
- I think therefore i blog - code institute tutorial videos on how to do my project.
- Django Documentaion - to help me understand and solve some problems for my project.
- Codemy - Youtube tutorials i used on how to build my project.
- W3C School - helps me to solve some bugs and additional knowledge and understanding on my project journey.
- Stack Overflow - used to solve bugs, and learn to understand more about what the code does and how it works properly.
- Bootsrap made - template ideas to make my front end.
- Real python - used to understand and solve some problems for my project.
- Google images - were i got background photos for my project.
- Technology IT - Youtube tutorials i used on how to build my project.
- Mr. Rohit to my mentor
- Student Support team
- Slack community
- Code institute
- Perfecto's Restaurant was created for educational purpose only.