MANG6180 Web Applications QFRMC Conference Registrations Website Solution To Christophe Mues and Mike Lister
MSc Digital Marketing
Mark Chen University ID: 23952326 University email: firstname.lastname@example.org Solution accessible from http://www.personal.soton.ac.uk/bh1e10/frontpage.php
1. Website structure………………………………………………………………………………………………………….2 2. Design notes………………………………………………………………………………………………………………….3 Appendix 1…………………………………………………………………………………………………………………………11 Appendix 2…………………………………………………………………………………………………………………………12
Word count: 1488
Based on the given resources and developing requirements, the main purpose of my solution is to provide users a comprehensive and error-free registration website, combining with a fresh looking and user-friendly interface.
Showing a header at the top of each page prior to loading its own content. Receiving user’s input from previous pages and processing these data to make calculation and transform them into valid format that can be accepted by the database. Connecting database, inserting record into it and close database. Further looking down to the structure of this solution, six major web pages are linked with each other (Figure 1), a comprehensive introduction about each page could be found in Appendix 2
Figure 1 Head.html
During the overall design stage, I got some useful information while I was searching Quantitative Financial Risk Management Centre on the internet: the colour scheme of the official QFRMC website
is blue and white, and a navigation bar is always attached at the top of each page. This finding gave me significant inspiration when I designed this solution. I made header picture, web page background image and navigation background image using photoshop 7; then I import them into Frontpage 2003 to create the basic web page framework. All these effort is aimed at making a conference registration website that possesses a consistent style as the existing official QFRMC site. Furthermore, as a registration web solution, it’s necessary to provide users adequate information about this conference and its organizer. While I was doing the research, I found a 2009 QFRMC Conference review, a current related research review, and a list of the project leader on QFRMC official website. I put them into hyper-links on the header, allowing users to learn more about this event by just one click within their current page. In the development stage, the development environment I adopted is Dreamweaver CS5 and Notepad++, both of them significantly improved the efficiency of programming, and they are deployed in library computer and my own laptop respectively. First of all, in order to achieve a consistent look of all pages, I employed php server-side includes. Specifically, the Head.html will be loading from the server ahead of any other content. Its advantages are not just confined in making the whole website in a unified appearance and colour scheme; it also releases the developer’s workload, making maintenance easier as well. Secondly, it’s vital to note that, I don’t want the user to be interrupted by system message while they are typing. Therefore I put all validating scripting into one function (showmessage()), and trigger it only when users click the submit button, so that to make sure the registration page can be interacted with users in a friendly manner. The validating function is designed following this logic flow: 1.
First name and last name omission checking
Validate first name and last name input, only a-z and A-Z can be accepted
Address omission checking
Postcode omission checking
5. 6. 7.
Validate postcode input, only UK postcode format is accepted, this chunk of scripting code is referencing from Qodo Web Designer & Developer website E-mail omission checking Validate E-mail input, only valid E-mail address is accepted, this chunk of scripting code is referencing from Douban forum
Membership status omission checking
Attending date omission checking
Conference dinner omission checking
Payment method omission checking Corresponding message will pop up if any input omission or error occurred. When all input have been validated, the registration process will be continued and all obtaining data will be posted to the
confirmation.php. It is worth noting that, all data in this solution are transferred between pages by POST method, since there is no need in this case to showing participants’ personal details and billing information on the URL, and it’s not a safe way to passing these parameters. Considering the organizer only accept consecutive attending date, I also write a function (setDisabled1()) for register.php to block the last conference date choice once participants choose to register for the first day and do not do so for the second (Image 1). However, once people choose to attend the conference in the second day, it will activate the last date choice though (Image 2).
Image 1. Last attending date choice is block
Image 2. Last attending date choice is activited A similar function is also needed for the vegetarian food choice. Because when participants do not require for the conference dinner, it’s unnecessary to ask them vegetarian question. Therefore, I developed a function named “setDisabled2()” to solve this problem. Once people do not require for the dinner, vegetarian choice will be blocked (Image 3), even if the vegetarian options have been specified before (Image 4). Moreover, considering most people are not vegetarian, I further added that, if one does register for the dinner and do not specify their food orientation yet, non-vegetarian food will be checked as default (Image 5). But if he or she does have specified the vegetarian option, their choice will be reserved.
Image 3. Vegetarian choice is block
Image 4. Vegetarian choice is block
Image 5. Non-vegetarian is specified as default When all validation is done, confirmation.php will be loaded. This page is responsible for making calculation and showing confirmation copy according to the input data. In order to calculate the registration fees, values of the three attending date checkboxes have been specified as 5, 6, and 7 respectively. Several auxiliary variables are also established in php on confirmation.php to help calculate the fees:
reg_date_sum: the sum of all checked attending dateâ€™s value
reg_date_quantity: the number of checked attending date
total_fees: the figure after calculation
final_fees: the figure after two decimals formatting The calculate method is listed in Table 1: Reg_date_sum 5
Day 1 is checked
Day 2 is checked
Day 3 is checked
Day 1&2 are checked
Day 2&3 are checked
All days are checked
Table 1 Furthermore, many other variables are also created for the use of transforming the receiving data into appropriate sentences which will be inserted into database (Image 6), or showing on payment.php (Image 7&8).
Image 8 The total registration fees will be calculated according to membership status, number of attending days, dinner choice and payment method choice, the final figure charged to the participant will be formatted with two decimals (Image 9).
Image 10. Microsoft Internet Explorer 8 on Windows 7 OS
Image 11. Safari 5 on Apple iOS
Image 12. Mozilla Firefox 4 on Windows 7 OS
Image 13. Google Chrome 11 on Windows XP OS I also created a PHP file which is named show.php, to show all records stored in the database. During the debug stage I used this file to check whether the receiving data has been successfully added to the given database (Image 14).
Image 14. Showing database records
Source of information that Iâ€™ve used during development:
Appendix 2 1.
frontpage.php (Image 15): This page is designed as a welcome page, and it’s also identified as the “HOME” of this website. It contains a brief of Quantitative Financial Risk Management Centre and a “What’s on?” section, which briefly introduces the QFRMC Conference to the audiences. People could further jump into registration page by clicking “BOOKING ONLINE NOW!” button at the bottom.
Image 15. frontpage.php 2.
register.php (Image 16): This page allowing users to enter their personal details and billing information. “Tariff description” is shown at the left hand side of this page. “Back” button refers to frontpage.php. Client-side validating will be occurred once the “Submit” button is clicked, then different message box would be popped up accordingly.
Image 16. register.php
Image 17. confirmation.php 4.
payment.php (Image 18): Because we are not required to implement the payment process, so the purpose of this page is to adding record to the database and showing feedback to users. If particupants clicked “Go to payment page” button on the previous page, it means that the registration details they offered is correct and the data will be transferred to payment.php by POST method in a hidden way. Once the record has been successfully inserted into the database, a confirmation message will be shown on this page. “Back” button refers to frontpage.php.
Image 18. payment.php
Image 19. terms_and_condition.php
head.html: this html page is designed as a header showing at the top of each page. It incorporates five hyper-links, including one for frontpage.php, one for register.php, and three external web links. At the top right corner of this header, you can also find an Email link which refers to my university email address. Once people click it, the local email software will be started, and the subject of this mail will be set as â€œfeadbackâ€? by defalt.