This was a online beginner course project where I learned to make a web based booking system.
The document I made for the project to show the process and development of the project.
| In the welcome page: | |
|---|---|
 |
The initail screen shows a simple and well developed page giving images of the business and buttons to move user to chosen locations/web pages. |
| This is the page after clicking the 'make a booking' button: | |
 |
User is moved to a booking form in order to fill their details and place a booking. in addition current date and time with available times for that day are shown for the user to choose from. |
| This is the page after clicking the 'Check out' button: | |
 |
A simple confirmation page to show information about the appointment made by the customer and to show some details about the appointment. |
| The other button called “view Location” on the welcome page takes the user to a google map image of the business location | |
 |
Button redirects the user to a a pager thats pulls the live google map's data and displays its. |
| The other button called “Admin” on the welcome page takes admin/s to a login page. | |
 |
User is taken to the login in page so the barber/admin can sign in so they may access the admin page. |
| This is the admin home page. | |
 |
Once the admin/s have correctly login, the admin home page displays buttons to move user to chosen locations/web pages, like the logout button to exit the admin home page and return to the main/master page. |
| This is the page after clicking the '“View appointments”' button: | |
 |
Admin now can view their upcoming appointments and may edit the appointment details. |
| This is the page after clicking the “update” button: | |
 |
Admin are redirected to the “make a booking” page where the customers details will be filled into the correct fields clicking the checkout button to be redirected to the admin home page or clicking clear to re-do the form for the customer. |
| The other button called “view services” on the admin page takes the user to see all active and inactive services. | |
 |
Admin/s can update all services or add a service. |
| This is the page after clicking the “add service” button or "update" button: | |
 |
Admin can fill out a form that will store the new service or updated service in the database. Admin clicks “completes” to store the new service or updates existing service. |