Woodland Heath Golf Club, is a golf club based in norfolk. The purpose of this site is to be able to provide information to future customers and also a booking system for members to be able to book tee times online.

The targetted audience is all who have a love of golf and also family and friend time.

Live Site - Woodland Health Golf Club
Project Repository - Woodland Heath Golf Club - Repository

• Requirements
• Agile Methods
• Design
  • Database Schema
  • Wireframes
  • Colour Scheme
• Features
  • Existing Features
  • Future Features
• Testing
  • Development Process
  • Usability Testing
  • User Requirement Testing
  • Functional Testing
  • Validator Testing
  • Automated Testing
• Technologies Used
  • Main Languages Used
• Deployment
• Credits
  • Content
  • Media

Please see below a table showing the key requirements of the site and their importance.

Through this object I have taken an agile approach to my development. To do this, I used the github issue and project board to organise my user stories. Please see link below.

Agile Development - Project Board

To be able to create an online booking system a PostgreSQL database was implemented to hold user information and booking information. The User model was used from the pre-built one supplied by Django.
For the booking details, a custom model was created that was relational to the existing user model. Please see below the database diagram.

• Please find link to Full Screen Wireframe
• Please find link to Mobile Screen Wireframe

A neutral colour scheme was selected with a green accent colour to compliment the golf course image back ground.

The navigation bar is a fixed element of the top of the page and is uniform accross all areas of the site. It have the company logo and clear links to explore different areas of the site. When the user is not logged in, the nav bar shows links to 'login' and 'register'. Once logged in, this changes to 'memberzone' and 'log out'

The navigation also changed to a hamburger menu when the screen size is smaller for viewability and usability.

In addition to the navigation bar, on the bottom on every page is a footer. This shows the golf club logo and basic contact information for easy access for the site user.

When you first access the site, you are directed to the home page. This has a bold welcome statement so the user can verify the site they have visited quickly.

There is a summary of the course, club house and membership for quick information. For a user that is not logged in, it presents them with the following buttons which sign posts them to key areas of the site.

• 'Check out our facilities'
• 'Register to make a booking'
• 'Login in you already have an account'

The facilities page presents the site user with an overview of facilities available at the golf course. This is shown with relevant images to show case them with overlaying banners in the accent green colour enhance them and make them eye catching.

The 'Contact Us' page give the user basic location and contact information, with an embeded google maps. Additionally, for ease of submitting an enquiry the user is able to complete a contact form. This form will then send an email to the [email protected] account and send an automatic reply to the user to confirm receipt.

If the user is logged in, this online enquiry form will auto populate their basic details for ease of use.

Within the navigation bar, there is a link to register for a new account. This takes the user to a registration page to complete.

Once completed, the user is redirected back to the home page and a success alert is displayed.

Within the navigation bar, there is a link to login for users who already have an account. This takes the user to a login page. Upon sucessful login, the user is directed to the home page.

Within the navigation bar, there is a link to logout for users who have already logged in. This logs the user out, returning them to the home page with a success alert displayed.

When a user has sucessfully logged in, they are able to click into the memberzone from the navigation bar. From here they are greated with a welcome message including their name. From this page they are able to select to create a new booking or view and edit existing ones.

Booking a tee time is completed in two steps. In the first instance, the site user is directed to the page to select a date they wish to book from. The date will default to the next calendar day.

To prevent the user from selecting a date prior to this, an error message will be displayed and the button to progress the booking is no longer visible.

After the date is selected, the user can then view available times for that day. They will need to select their time, and the number of players for the booking to then submit it.

Once the booking is complete, the user will be redirected back to the memberzone page and an alert will appear confirming the booking.

Within the memberzone, the user is able to select to view and edit bookings. This directs the user to a page listing their current bookings. If there are no bookings present it will display a message to let them know that this is the case.

Each booking displayed has a button to enable to the user to edit the number of players for their booking. This redirects the user to an edit page which displays the selected booking and a drop down to change the total number of players.

Each booking also has a cancel button. Upon clicking this a modal pops up for the user to confirm that they want to cancel that particular booking.

If the user continues to cancel the booking, they are returned to the view bookings page and an alert is displayed to confirm this has been completed.

• A blog style feature that enables members to share pictures and information about their rounds.
• An area within the memberzone which enables the user to record, view, and get statistics on their golf rounds.

Throughout the development process, each feature added was manually tested locally to ensure it worked as intended. Once I was happy with the result whilst in localhost, I would then add, commit and push to GitHub. This resulted in realtime changes and adjustments before committing the new code through to main.
This particularly enabled me to highlight styling issues where I predominantly used bootstrap and then customised accordingly in a separate style.css. For instance, on one circumstance through the debugging process I found that bootstrap had used !important. Although not best practice, I had to use this in my own css to be able to override it.

All text throughout the site has been styled to be clear and easy to ready. Although the background is an image through out the website, I used a translucent layer between this and text to ensure it was still readable.
Within my colour scheme, I also ensure I had an accent colour which I was able to use to direct the user to the next steps.

To ensure that the website meets the expectation of user, please see below user cases which summarise whether they pass and also which tests relate to them.

Upon deployment through heroku, a total of 42 functional tests were carried out to ensure the website functioned correctly.

Please expand 'Functional Test Cases' below to see a breakdown of the tests carried out.

Lighthouse tests were carried out accross the site to ensure performance and accessibility scored highly.

• Home
• Facilities
• Contact Us
• Booking - Date
• Booking - Time
• View Bookings

HTML validator tests were carried out accross the site.

Through the IDE pep8 compliance was checked to ensure the code was validated

Towards the end of my testing I added 1 test within test_models.py to test whether a record could sucessfully be added to the BookingTimes database, which it passes.

In the future, I would like to spend more time creating extensive tests on the models and views.

• Whitenoise was used to serve the static files - Whitenoise
• Bootstrap was used for basic html styling - Bootstrap
• jQuery was used for dom manipulation in the script files - jQuery
• Elephantsql was used for the sites database - ElephantSQL
• EmailJS was used to send online requests to the proshop and an autoreply to the site user - EmailJS

• Python
• Javascript
• HTML5
• CSS3

This site is deployed through Heruko. The following steps where followed within Heroku -

Whilst on the main dashboard, click 'Create new app' Then enter the name of the project, select your region, and the click 'Create App' Within the settings tab, you must update the 'Config Vars' to include the following: DATABASE_URL, DEBUG, HEROKU_POSTGRESQL_PURPLE_URL, SECRET_KEY. Click 'Reveal Config Vars' to add. In the deploy tab, under deployment method select 'GitHub' Next search and connect to the correct repository from GitHub Finally, scroll down towards the bottom and you will see 'Manual Deployment'. Select the branch you would like to deploy from and click 'Deploy Branch'. Once complete, you will be presented with a link to open the deployed site. You can also set up auto deployments, this means Heroku will re-deploy the site every time you push an update to your GitHub repository.

To carry out further development on the project you can clone the repository locally. This is completed by carrying out the following steps -

Within your repository, make sure you are on the 'Code' tab Click on the button that shows '<> Code' Then select how you wish to clone To create an isolated version of the project, you may add a branch off of main. To do this follow the below steps -

Whilst in the code section, click on 'branch' You will then see a breakdown of the exisiting branches To add a new branch, click 'New Branch' which is a green button Then name your branch and select the branch source

Set up for EmailJS was aided by the CodeInstitue tutorials and the EmaiJS suppoting documentation.

Django tutorial videos from Codemy on youtube to help implement the register, login and logout functionality - Codemy

The following online tool was used to compress the size of images for the site - tinypng & tinyjpeg

The following images were sourced from Pexels

• Background golf course
• Features - Mini Golf
• Features - Golf Tuition
• Features - Pro Shop
• Features - Putting Area
• Features - Golf Buggy
• Features - Practice Range

The logo was created using Adobe Express

The following generator was used for the sites favicon - favicon.io

The following was used for icons on the site - font awesone