ProGroup is a website that allows hotels to keep track and organize their group reservations.
Users will be able to create/update/delete new Group Profiles and New Reservations based on the Profiles.
Users also able to see basic statistics and send email to the owner of the website.
There are two type of users: user and admin.
Users are able to create/update and delete profiles and reservations but not able to add new users or edit and delete existing users.
Admin will be able to add new users.
Login for admin: username: admin password: code2545
Login for user: username: nikolett password: 12345678
View the live site here
- Project overview
- UX
- Features
- Technologies Used
- Testing
- APIs
- Deployment
- Bugs
- Credits
- Content
- Media
- Acknowledgements
- ProGroup project is a website that allows users to add/edit/delete Group reservation for submission as milestone project 3 as part of the Code Institute - Diploma in Software Development (Full stack) course. The project based on a real world use when the hotel reservation is able to keep track the various groups arriving in the 2022 seasn.
- The website is deployed using Heroku pages at the following url: ProGroup
- The repository on GitHub that contains the website source code and assets is available at the following url: Code Repository
- The website was built with a responsive look and feel for desktop, tablet and mobile devices
The primary goal of the website from the site owners perspective is as follows:
- To create/edit/delete profiles so users can add a reservation
- To allow users reservations to a selected profile
- To allow users modify their reservations and / or profiles
- To allow users delete profiles and / or profiles
- To allow users to send messages to the owners
- To view statistics on the usage of the site
The primary goal of the website from a site users perspective is as follows:
- To allow users reservations to a selected profile
- To allow users modify their reservations and / or profiles
- To allow users delete profiles and / or profiles
- To send messages to the owners
- To view statistics on the usage of the site
- The applications was designed to use in hospitality setting
- Main target audience are reservations workforce and hotel managers
- Secodnary target audience are owner / sharholders who could look at various statistics
- A simple and intuitive navigation system
- Quickly and easily find relevant information
- Links and functions that work as expected
- Good presentation and a visually appealing design regardless of screen size
- An easy way to contact the admin/s
- Simple content that the user can skim read
- Accessibility
The website contains 18 pages in a logical structure, information and purpose.
- Home / Landing Page: The first page the user would see when they access the website before they can login to the site.
- Login: This page allows the user to login to the website. There was no register page added to the landing page to ensure that only authorised personnel could access the website when given access by one of the admin.
- Reservations: The first page when user would arrive after successful login. It display all the reservation / navigations and some basic statistics of the exsiting reservations.
- Add Reservations: This page allows user add new reservation.
- Edit Reservations: This page allows user to edit existing reservation.
- Delete Reservations: This page allows user to delete reservation.
- Profiles: This contains all the exisitng group profiles in aplhabetical order.
- Add Profiles: This page allows user add new profiles.
- Edit Profiles: This page allows user to edit existing profiles.
- Delete Profiles: This page allows user to delete profiles.
- Users: / admin only / This page lists all existing users but visible only for people with admin role.
- Add users: This page allows admin users add new users.
- Edit users: This page allows admin users to edit existing users.
- Delete users: This page allows admin users to delete users.
- Help: This page allows users to send message to the website owner.
- Logout: This link allows the user to logout of the site.
- 404: The 404 error page is displayed if the user enters an incorrect url when accessing the site.
- 400, 401, 405 and 500: The error page is displayed if the user encounters an error on the site
- My project is built using a Blueprints structure
- Flask blueprint is a way to organize a flask application into smaller and re-usable application.
- Just like a normal flask application, a blueprint defines a collection of views, templates and static assets.
- I found the following videos and website to help my project.
- The project is structured as follows
- authentication: Contains a flask route for authentication for example login, logout
- errors: Contains a flask route for error pages for example 404
- reservation: Contains a flask route for Group reservations, adding, editing etc
- static
- css (Project style css)
- pictures (Project and readme images)
- js (Project javascript structured into individual files)
- templates: Html templates to match the routes for Authentication, Email, Errors, Profiles, Reservations, Users and a base.html file
- profiles: Contains a flask route for profiles code, adding, editing etc
- users: Contains a flask route for users code, adding, editing etc
- An app.py that setups, creates and runs the application
- A local env.py(that is not committed to source control) - This ensures passwords and security-sensitive information are stored in environment variables or in files that are in .gitignore, and are never committed to the repository
- The website is a data-centric one with html, javascript, css used with the materialize framework as a frontend
- The backend consists of Python, flask and jinja templates with a database of a mongodb open-source document-oriented database
Once I designed the conceptual database model it help to have a better understanding of database strucutre and their realations between them.
With the conceptual database model in place I created the physical database model.
The model is the exact copy of the MongoDB collection data structure and name fields.
- One production database(group_manager) was created to store site information, it contains three collections described below
- profiles - contains contact information for a group operator
- reservations - contatins the group operator names and reservation details such
- users - to store registered user information
The user stories for the website user "regular user" (users with "user" role) are described as follows:
- User Story 1.1: As a regular user the navigation bar is displayed with a logo on all pages for easy navigation, with a burger menu on mobile devices when user logged in
- User Story 1.2: As a regular user the navigation item selected is highlighted
- User Story 1.3: As a regular user, when logged out, the home/landing page is the default page and there is an option for Login
- User Story 1.4: As a regular user, when logged in, the reservation page is the default page and there are five options with a logo: Profiles, Account, Help, Logout
- User Story 1.5: As a regular user if I encounter a route that does not exist, I am navigated to a 404 error page
- User Story 2.1: As a regular user I can view a hero image with login on the home/landing page
- User Story 2.2: As a regular user I can view four reservations added on the website, with group name, arrival date, los, rooms / pax, board and status
- User Story 2.3: As a regular user if I encounter a route that does not exist I am navigated to a 404 error page
- User Story 2.4: As a regular user if I encounter an error with the application starting up I am navigated to a 500 error page
- User Story 3.1: As a regular user my username must be a minimum of 6 characters, and contain at least one lowercase letter, with no special characters
- User Story 3.2: As a regular user my username and / or password must match my confirm username and / or password
- User Story 3.3: As a regular user I can log in to my account by providing my username and password and clicking Login and I will be navigated to the reservation page. A username and password must be provided. If the username and/or password entered is incorrectly a relevant message will be displayed
- User Story 3.4: As a regular user, when I am logged into the site, and I click Logout I am successfully logged out of the site, and brought to the home/landing page, with the Login option
- User Story 4.1: Add Reservation - As a regular user I can add a new reservation by selecting a Group name selection, reservation details, room details, room rates and notes, when clicking on the add reservation the page would redirect to reservations and the new reservation would be added
- User Story 4.2: Edit Reservation - As a regular user I can edit an existing reservation by updating any Group name selection, reservation details, room details, room rates and notes, when clicking on the edit reservation the page would redirect to reservations and the new reservation would be updated
- User Story 4.3: Delete Reservation - As a regular user I can delete a reservation by confirming I want to delete
- User Story 4.4: View Reservation - As a regular user I can view a memory by clicking on a Reservation when additional info would be revealed
- User Story 5.1: Add Profile - As a regular user I can add a new profile by typing a Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the add profile the page would redirect to Profiles and the new reservation would be added
- User Story 5.2: Edit Profile - As a regular user I can edit an existing profile by updating any Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the edit profile the page would redirect to profiles and the profiles would be updated
- User Story 5.3: Delete Profile - As a regular user I can delete a profile by confirming I want to delete
- User Story 6.1: Help – As a regular user I can send an email to the admin by clicking on the Help button in the navbar and filling up the Name, Email address and Message and click on Send Message
- User Story 7.1: Account – As a regular user I can see my account information such as Full Name, Position, Email, Username and Role
- User Story 7.2: Edit Account – As a regular user I can edit my account information such as Full Name, Position, Email, Username when clicking on the Save Changes
User Stories Website Owner The user stories for the website owner(admin user) are described as follows: There is a lot of overlap between the two user types, the admin user however has more administrative rights throughout
- User Story 1.1: As an admin user the navigation bar is displayed with a logo on all pages for easy navigation, with a burger menu on mobile devices when user logged in
- User Story 1.2: As an admin user the navigation item selected is highlighted
- User Story 1.3: As an admin user, when logged out, the home/landing page is the default page and there is an option for Login
- User Story 1.4: As an admin user, when logged in, the reservation page is the default page and there are five options with a logo: Profiles, Account, Help, Logout
- User Story 1.5: As an admin user if I encounter a route that does not exist, I am navigated to a 404 error page
- User Story 2.1: As an admin user I can view a hero image with login on the home/landing page
- User Story 2.2: As an admin user I can view four reservations added on the website, with group name, arrival date, los, rooms / pax, board and status
- User Story 2.3: As an admin user if I encounter a route that does not exist I am navigated to a 404 error page
- User Story 2.4: As an admin user if I encounter an error with the application starting up I am navigated to a 500 error page
- User Story 3.1: As an admin user my username must be a minimum of 6 characters, and contain at least one lowercase letter, with no special characters
- User Story 3.2: As an admin user my username and / or password must match my confirm username and / or password
- User Story 3.3: As an admin user I can log in to my account by providing my username and password and clicking Login and I will be navigated to the reservation page. A username and password must be provided. If the username and/or password entered is incorrectly a relevant message will be displayed
- User Story 3.4: As an admin user, when I am logged into the site, and I click Logout I am successfully logged out of the site, and brought to the home/landing page, with the Login option
- User Story 4.1: Add Reservation - As an admin user I can add a new reservation by selecting a Group name selection, reservation details, room details, room rates and notes, when clicking on the add reservation the page would redirect to reservations and the new reservation would be added
- User Story 4.2: Edit Reservation - As an admin user I can edit an existing reservation by updating any Group name selection, reservation details, room details, room rates and notes, when clicking on the edit reservation the page would redirect to reservations and the new reservation would be updated
- User Story 4.3: Delete Reservation - As an admin user I can delete a reservation by confirming I want to delete
- User Story 4.4: View Reservation - As an admin user I can view a memory by clicking on a Reservation when additional info would be revealed
- User Story 5.1: Add Profile - As an admin user I can add a new profile by typing a Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the add profile the page would redirect to Profiles and the new reservation would be added
- User Story 5.2: Edit Profile - As an admin user I can edit an existing profile by updating any Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the edit profile the page would redirect to profiles and the profiles would be updated
- User Story 5.3: Delete Profile - As an admin user I can delete a profile by confirming I want to delete
- User Story 5.4: View Profiles - As an admin or regular user I can see existing profiles by navigating to the Profiles page
- User Story 6.1: Add User - As an admin user I can add a new user by typing a First name, Last name, Email, Password, Position, and select either user or admin for the Role, when clicking on the add user the page would redirect to Users and the new reservation would be added
- User Story 6.2: Edit User - As an admin user I can edit an existing user by updating any First name, Last name, Email, Password, Position, and select either user or admin for the Role, when clicking on the edit profile the page would redirect to profiles and the user would be updated
- User Story 6.3: Delete Profile - As an admin user I can delete a user by confirming I want to delete
- User Story 6.4: View Users - As an admin user I can see existing users by navigating to the users page
- User Story 7.1: Help – As an admin user I can send an email to the admin by clicking on the Help button in the navbar and filling up the Name, Email address and Message and click on Send Message
- User Story 8.1: Account – As an admin user I can see my account information such as Full Name, Position, Email, Username and Role
- User Story 8.2: Edit Account – As an admin user I can edit my account information such as Full Name, Position, Email, Username when clicking on the Save Changes
Each wireframe contains three sub images, one for desktop, tablet and mobile
| Page | Wireframe |
|---|---|
| Login | Desktop/Tablet/Mobile |
| Reservations | Desktop/Tablet/Mobile |
| Add Reservations | Desktop/Tablet/Mobile |
| Edit Reservations | Desktop/Tablet/Mobile |
| Profiles | Desktop/Tablet/Mobile |
| Add Profiles | Desktop/Tablet/Mobile |
| Edit Profiles | Desktop/Tablet/Mobile |
| Users | Desktop/Tablet/Mobile |
| Add Users | Desktop/Tablet/Mobile |
| Edit Users | Desktop/Tablet/Mobile |
| Help | Desktop/Tablet/Mobile |
| Account | Desktop/Tablet/Mobile |
There are six main colors what I used throughout of this project.
- #ECECEC - Light grey colour for background
- #37474F - main background clor for the navigation theme
- #CF9109 - Font color for the navigation
- #039be5 - Add / Save / Search Button colour
- #F44336 - Delete button color
I choose those colours after testing a number of palettes while making sure the colour palette met accessibility standards.
The Roboto font is the main font used throughout the whole website with Sans Serif as the fallback font. This font is from the Google fonts library.
- There is no navigation available for users on the login/landing only the login facility what will be covered in feature three.
- When the user is logged in there are five options with a logo: Reservations Profiles, Account, Help, Logout (Users can be seen only by admin users).
- The navigation for the logged in users ensure the easy use of the website.
- User Story 1.1: As an admin user the navigation bar is displayed with a logo on all pages for easy navigation, with a burger menu on mobile devices when user logged in
- User Story 1.2: As an admin user the navigation item selected is highlighted
- User Story 1.3: As an admin user, when logged out, the home/landing page is the default page and there is an option for Login
- User Story 1.4: As an admin user, when logged in, the reservation page is the default page and there are five options with a logo: Reservations Profiles, Account, Help, Logout (Users can be seen only by admin users)
- User Story 1.5: As an admin user if I encounter a route that does not exist, I am navigated to a 404 error page
- The login/landing page is displayed when the user first accessing the site or i they log out.
- It displays a hero image and login facilities.
- User Story 2.1: As an admin user I can view a hero image with login on the home/landing page
- User Story 2.2: As an admin user I can view four reservations added on the website, with group name, arrival date, los, rooms / pax, board and status
- User Story 2.3: As an admin user if I encounter a route that does not exist I am navigated to a 404 error page
- User Story 2.4: As an admin user if I encounter an error with the application starting up I am navigated to a 500 error page
- The user cannot register on the website but admin can add users to ensure unauthorized access to sensitive business infromation.
- username is manadtory fields and if they are not entered correctly error message will appear.
- password is manadtory fields and if they are not entered correctly error message will appear.
- After logout the user will be redirected to the login / landing page.
- User Story 3.1: As an admin user my username must be a minimum of 5 characters, and contain lowercase, uppercase letters and numbers, but no special characters
- User Story 3.2: As an admin user my username and / or password must match my confirm username and / or password
- User Story 3.3: As an admin user I can log in to my account by providing my username and password and clicking Login and I will be navigated to the reservation page. A username and password must be provided. If the username and/or password entered is incorrectly a relevant message will be displayed
- User Story 3.4: As an admin user, when I am logged into the site, and I click Logout I am successfully logged out of the site, and brought to the home/landing page, with the Login option
- Users can add reservation to the database by entering all the mandatory fields and clicking the add reservation button.
- Users can edit existing reservations by clicking the edit (pen & envelope) icon.
- Users can delete existing reservation by clicking the delete (trash can) icon.
- User can view more details about reservation by clicking on the reservation line itself. (collapsible feature)
- User Story 4.1: Add Reservation - As an admin user I can add a new reservation by selecting a Group name selection, reservation details, room details, room rates and notes, when clicking on the add reservation the page would redirect to reservations and the new reservation would be added
- User Story 4.2: Edit Reservation - As an admin user I can edit an existing reservation by updating any Group name selection, reservation details, room details, room rates and notes, when clicking on the edit reservation the page would redirect to reservations and the new reservation would be updated
- User Story 4.3: Delete Reservation - As an admin user I can delete a reservation by confirming I want to delete
- User Story 4.4: View Reservation - As an admin user I can view a memory by clicking on a Reservation when additional info would be revealed
- Users can add profile to the database by entering all the mandatory fields and clicking the add profile button.
- Users can edit existing reservations by clicking the edit (pen & envelope) icon.
- Users can delete existing profile by clicking the delete (trash can) icon.
- Users can check existing profiles by navigating to the Profiles page
- User Story 5.1: Add Profile - As an admin user I can add a new profile by typing a Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the add profile the page would redirect to Profiles and the new reservation would be added
- User Story 5.2: Edit Profile - As an admin user I can edit an existing profile by updating any Group name, Contact name, Contact Email, Contact Phone, Line Address, City, Post Code, Country, when clicking on the edit profile the page would redirect to profiles and the profiles would be updated
- User Story 5.3: Delete Profile - As an admin user I can delete a profile by confirming I want to delete
- User Story 5.4: View Profile - As an admin user I can see all the existing Profiles by navigating to the Profiles page
- Admin users can add user to the database by entering all the mandatory fields and clicking the add user button.
- Admin users can edit existing reservations by clicking the edit (pen & envelope) icon.
- Admin users can delete existing user by clicking the delete (trash can) icon.
- Admin users can check existing users by navigating to the users page
- User Story 6.1: Add User - As an admin user I can add a new user by typing a First name, Last name, Email, Password, Position, and select either user or admin for the Role, when clicking on the add user the page would redirect to Users and the new reservation would be added
- User Story 6.2: Edit User - As an admin user I can edit an existing user by updating any First name, Last name, Email, Password, Position, and select either user or admin for the Role, when clicking on the edit profile the page would redirect to profiles and the user would be updated
- User Story 6.3: Delete Profile - As an admin user I can delete a user by confirming I want to delete
- User Story 6.4: View users - As an admin user I can see all the existing users by navigating to the Users page
- Users can send emails to the admins directly on the website.
- The process is straightforward when the full name and email address and message filled the email can be sent with the send button.
- Flash message will confirm that message was sent.
- User Story 7.1: Help – As an admin user I can send an email to the admin by clicking on the Help button in the navbar and filling up the Name, Email address and Message and click on Send Message
- User can access their basic profile information.
- All information displayed can be update byclicking on the edit (pen & envelope) symbol.
- All changes executed by the user will be saved.
- User Story 8.1: Account – As an admin user I can see my account information such as Full Name, Position, Email, Username and Role
- User Story 8.2: Edit Account – As an admin user I can edit my account information such as Full Name, Position, Email, Username when clicking on the Save Changes
- Send email directly to the contact person including the reservation details
- Send automated email directly on 1st day of each month to contact person whether the group is still go ahead
- Send automated email to users and admins about group statistic on the 1st day of the month
- Make calculation such as room,F&B and total revenue
- Having a report page with preloaded querys for periods
- Have an invoicing facilites to send ProForma and Final invoice
- Adding payments to reservations
- Adding customized items to reservation e.g. Dinner including net value and VAT
- Summary report to hotel owners in pdf format
- Make that group_selected variable dynamic (see comment on the reservation/route.py file line 147-152)
- Repo was forked to work on future implementation and fulfill CI requirements and do not commit after submission
- JQuery
- Materialize
- Fontawesome
- Heroku
- Flask framework
- Balsamiq
- Google Font
- GitHub
- GitPod
- MongoDB
- Coolors - Color palette generator
The testing information and results for this project are documented in TESTING.md
- Create an account at emailjs.com
- In the integration screen in the emailjs dashboard, note your userid
- Create an email service in the Email Services section and note the id
- Create an email template in the Email templates section and note the id
- Update the script sendEmail.js, method sendMail with your user id, email service id and email template id
There are several applications that need to be configured to run this application locally or on a cloud based service.
Mongodb is the database used in the application
- Create an account at mongodb
- Create a database cluster
- Select the cluster, and in the collections section create a database and create 3 collections under the database: reservations, profiles and users
- In the database access, create a user and allow the user read/write access. Note the username
- In the network access tab, allow network access from the ip-address of the application connecting to the database
- In the Databases section click Connect, and select connect your application
- Note the MONGO_URI, MONGO_DBNAME and user, these parameters are used when deploying locally(env.py file) and deploying on the likes of heroku(config vars)
To deploy this application to Heroku, run the following steps.
- In the app.py file, ensure that debug is not enabled, i.e. set to True
- Create a file called ProcFile in the root directory, and add the line
web: python app.pyif the file does not already exist - Create a requirements.txt file by running the command
pip freeze > requirements.txtin your terminal if the file doesn't already exist - Both the ProcFile and requirements.txt files should be added to your git repo in the root directory
- Create an account on heroku.com
- Create a new application and give it a unique name
- In the application dashboard, navigate to the deploy section and connect your application to your git repo, by selecting your repo
- Select the branch for example master and enable automatic deploys if desired. Otherwise, a deployment will be manual
- The next step is to set the config variables in the Settings section
- Set key/value pairs for the following keys: IP, MONGO_DBNAME, MONGO_URI, PORT, SECRET_KEY
- Go to the dashboard and trigger a deployment
- This will trigger a deployment, once the deployment has been successful click on the "Open App" link to open the app
- If you encounter any issues accessing the build logs is a good way to troubleshoot the issue
To run this project locally, you will need to clone the repository
-
Login to GitHub (https://wwww.github.com)
-
Select the repository syler/MS3-ProGroup-App
-
Click the Code button and copy the HTTPS url, for example: https://github.com/syler11/MS3-ProGroup-App.git
-
In your IDE, open a terminal and run the git clone command, for example
git clone https://github.com/syler11/MS3-ProGroup-App.git -
The repository will now be cloned in your workspace
-
Create an env.py file in the root folder in your project, and add in the following code with the relevant key, value pairs, and ensure you enter the correct key values
import os
os.environ.setdefault("IP", TO BE ADDED BY USER)
os.environ.setdefault("PORT", TO BE ADDED BY USER)
os.environ.setdefault("SECRET_KEY", TO BE ADDED BY USER)
os.environ.setdefault("MONGO_URI", TO BE ADDED BY USER)
os.environ.setdefault("MONGO_DBNAME", TO BE ADDED BY USER) -
Install the relevant packages as per the requirements.txt file
-
Start the application by running
python3 app.py
Bugs:
- Heroku deployment issue: I kept getting an error message "failed to push some refs to git@heroku.com" which was due that the Procfile was sitting in the templates foolder instead of the root. After a short research and systematic reference back to the CI modules the issue was indetified and resolved. The heroku deployment was succesful afterwards.
- Glitch with switch button for is_admin function: the label were name for user and admin but code looking for =="on" therefor the function didn't work properly. Attribute was renamed to == "admin" abd fubction is no working fine.
- Login page inputfield label and prefill text were overlapping. Issue solved with placeholder=" " within the input tags.
- Populate fileds from exisiting collection into another collection
- Search by dates
- Database wasn't registering the PAX and Rooms field value as the field was disabled.
Credit to https://codeinstitute.net/ for the lesson on email.js
Credit to https://favicon.io/favicon-converter/ for the Favicon
Credit to https://websitemockupgenerator.com/ for the Website mockup picture
Credit to https://fontawesome.com/ for the Icona displayed on the website
Credit to https://validator.w3.org/ for the html and css validation
Credit to https://wave.webaim.org/ for accessibility check for the website
Credit to https://www.emailjs.com/ for email sending functionality for the website
Credit to https://www.google.com/ for the Lighthouse report
Credit to https://stackoverflow.com/ for being a valuabe source for various functions
Credit to https://www.youtube.com/watch?v=Zcw1cgXwKCg & https://prettyprinted.com/ for Flask Blueprint structure
Credit to Paul Meeneghan whose project's readme and testing files inspisred me a more extensive documentation
- Font Awesome (http://fontawesome.com)
- The icons used on the site from font awesome
Photos:
- hotel_room from Pexels via Pixabay
- hotel_logo from bridgeoforchy.co.uk website
- website-mockup.png from https://websitemockupgenerator.com/
I would like to thank my wife who is also my co-worker who helped me to test the functionalities and gave me ideas how to include certain features. I would like to thank my mentor Mo Shami for the guidance and support.