Issuu on Google+

MANG6180 Web Applications QFRMC Conference Registrations Website Solution To Christophe Mues and Mike Lister

MSc Digital Marketing

Mark Chen University ID: 23952326 University email: bh1e10@soton.ac.uk Solution accessible from http://www.personal.soton.ac.uk/bh1e10/frontpage.php


Content

1. Website structure………………………………………………………………………………………………………….2 2. Design notes………………………………………………………………………………………………………………….3 Appendix 1…………………………………………………………………………………………………………………………11 Appendix 2…………………………………………………………………………………………………………………………12

Word count: 1488

2


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.

1. Website Structure In developing the solution for QFRMC Conference Registrations, both client-side and server-side scripting are used and responsible for different validating and processing job. The entire user’s input is validated in local computer by javascript scripting. Furthermore, I wrote client-side codes to improve the usability and accessibility of user interface according to common sense and the requirements outlined in the developing manual such as the consecutive attending dates. In the light of many similar websites on the internet, I added “terms and conditions accepted” function to the confirmation page, to make my solution closer to the reality. All these functions I mentioned above are processed on client-side scripting, so that to speed up the web reaction, as well as release the pressure on the far-end server. When it comes to the server-side scripting, the combination of php and MySQL has been proved to be a light-weight and effective solution to handle enterprise-level database application. In this case, php scripting do not responsible for any user input validation; the role of php coding can be generally summarized as follow: 1. 2. 3.

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

Terms_and _condition.php

Confirmation.php

Register.php

Figure 1 Head.html

Frontpage.php

2.

Payment.php

Design notes

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

3


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

2.

Validate first name and last name input, only a-z and A-Z can be accepted

3.

Address omission checking

4.

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

8.

Membership status omission checking

9.

Attending date omission checking

10.

Conference dinner omission checking

11.

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

4


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:

5


1.

reg_date_sum: the sum of all checked attending date’s value

2.

reg_date_quantity: the number of checked attending date

3.

total_fees: the figure after calculation

4.

final_fees: the figure after two decimals formatting The calculate method is listed in Table 1: Reg_date_sum 5

6

7

11

13

18

Reg_date_quantity

1 day

1 day

1 day

2 days

2 days

3 days

Note:

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 6

6


Image 7

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).

7


Image 9 A function named setDisabled3() is also designed to allow users to activate “Go to payment page” button by checking the terms-and-conditions accepting box. The hyper-link attached on Terms of Service and Privacy Policy is referring to terms_and_condition.php, and it’s designed to be opened in a new window. Once users confirmed their input and clicked on “Go to payment page” button, all processed data will be forwarded to payment.php in a hidden way, and further inserted into the database. When everything is done, database connection will be closed, and a congratulation message will be showing on the page. All associated files in this solution have been located under one folder, and all links was directed to file names without local paths. This ensures the solution can be transplanted into servers without modification. Furthermore, this solution has been tested through various popular web browers in different platforms, this includes Internet Explorer 6/7/8 on Microsoft Windows OS (Image 10); Safari 5 on Apple iOS (Image 11); Mozilla Firefox 4 and Google Chrome 11 on both Windows and iOS platform (Image 12&13).

8


Image 10. Microsoft Internet Explorer 8 on Windows 7 OS

9


Image 11. Safari 5 on Apple iOS

Image 12. Mozilla Firefox 4 on Windows 7 OS

10


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

11


Appendix 1

Source of information that I’ve used during development:

PHP tutorial: W3schools URL: http://www.w3schools.com/php/default.asp UK postcode validation code: Qodo Web Designer & Developer URL : http://www.qodo.co.uk/blog/javascript-check-if-a-uk-postcode-is-valid E-mail validation code : Douban forum URL : http://www.douban.com/group/topic/12090851 Terms and conditions example : BusinessLink advice URL: http://www.businesslink.gov.uk/bdotg/action/detail?itemId=1076142035&type=RESOURCES

12


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.

13


Image 16. register.php

3.

confirmation.php (Image 17): Once the omission and input error has been cleared by users in the previous page, these data will be caught by confirmation.php through POST method, and shown on the “Registration Confirmation” section in an appropriate expressive way. When finishing the final check of their registering details, participants need to check “Accept for Terms of Service and Privacy Policy” to activate the “Go to payment page” button. They could also read its content by clicking the link attached on it.

14


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

5.

terms_and_condition.php (Image 19): This page contains details of Terms of Service and Privacy Policy, which is referenced from a similar page on the web.

15


Image 19. terms_and_condition.php

6.

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.

16


MANG6180 Web Applications QFRMC Conference Registrations Website Solution