SCHOOL OF COMPUTING, ENGINEERING & MATHEMATICS 300582: Technologies for Web Applications Autumn 2017: Web Application Assignment Due by 7:00pm on Friday 19th May 2017 Assessment Weight: 30% A. Requirements a) ALL instructions given in this document MUST be followed in order to be eligible for full marks for the Web Application Assignment. This document has nine (9) pages. b) This assignment is NOT a group assignment; collusion, plagiarism, cheating of any kind is not acceptable. As part of your submission you MUST certify that all work submitted is your own. If you cannot honestly certify that the work is your own then do not submit the assignment. Breaches of the Misconduct Rule will be dealt with according to the university policy (see the learning guide for more information). c) All assignment submissions will be checked for academic misconduct by the use of the MOSS program from Stanford University. Details on MOSS can be obtained from the MOSS web site http://theory.stanford.edu/~aiken/moss/ d) Design the web pages with ease of navigation and operation, attractiveness and accessibility in mind. Images other than those provided in the assignment zip file may also be used in the assignment. For the problem definition described in section B you must e) include your authorship details at the top of each file in coded comments; f) reference all sources that you used for inspiration of your solution as per Section C of this document; g) ensure that your web application renders correctly in Chrome and runs correctly from the TWA web server. B. Web Application Assignment Details B(i) - Background information and description The National Rugby League (NRL) is a Rugby League competition played by professional players in sixteen teams from three states of Australia and from New Zealand. The competition is played from autumn through to spring for twenty-six rounds of matches with the top eight ranked teams then advancing to a finals series culminating in a Grand Final to determine the competition winner. Five rounds for the 2017 competition were completed at the date of creating this document. The rankings of each team as at 4th April are shown in Appendix 1. The ranking of each team on a weekly basis produces what is commonly known as the competition ladder. For each round of the competition, a series of matches are played between the sixteen teams; this is known as the draw. The official NRL draw for the 2017 competition is found in a pdf in the zip file for this assignment. In the draw, there are normally eight (8) matches played each round1. Hence, each round normally produces eight winning and eight losing teams (unless there is one or more drawn matches). At the conclusion of each round the results from each match are gathered to produce the competition ladder in which each team is ranked according to the total number of competition points achieved to date (see Appendix 2 for a description of how competition points are achieved). Hence, at the completion of any given round the competition ladder may have different team rankings depending upon the total number of wins, losses and drawn matches for each team. For teams that are on the same number of competition points a ‘score differential’ is used to determine the correct rank (see Appendix 3 for an explanation) of each team. In this assignment, you will create a web application that is able to generate the competition ladder for the current round of the NRL competition, display fixture information for any round of the NRL competition, display fixture information for any NRL team, and update match results. To do this your web application will need to read data from web forms and from the NRL Competition database, and write output data to both the user’s browser and to the NRL Competition database. The specific functional requirements for the assignment are described in section B(ii) of this document. The NRL Competition database is described in section B(iii) of this document. 1 Some rounds have less than eight (8) matches since they are played as a split round. Your web application cannot assume which rounds will be split nor how many matches will be in the split rounds. For rounds that don't have eight (8) matches, the teams that do not play have a bye and are awarded 2 competition points. The maximum number of matches per round is eight (8). Page 2 of 9 B(ii) – Functional Requirements Your Web Application must a) be coded using HTML 5, CSS, JavaScript, and PHP as necessary. b) provide easy-to-use navigation for the user. The main functionality of the web application will be accessed by the user via the following required hypertext links: 1. Fixtures 2. Ladder 3. Enter Results 4. Logoff These navigation links must be accessible from each of the web pages described in the following sections (including the index page). c) provide the following functionality for the links indicated above: 1. Fixtures – This link provides the user with multiple views of data for the matches/fixtures in the competition. The views are as follows: i. The default view that is to be displayed when the Fixtures link is clicked must show all fixtures for the current round as shown by the example in Appendix 4. The data items that must be displayed are: Round number, Home Team logo, Home Team abbreviated name, Away Team Logo, Away Team abbreviated name, date of fixture, kick off time, ground name. In this display of data, the ground name for each fixture should be a hypertext link; when clicked, the link will open a php page named ground.php. The ground.php page must display the ground Name, ground address and a google map showing the location of the ground by using a marker. In this view, the user may choose a round from the ROUND drop-down list (see Appendix 4). Doing so will display all fixtures for the chosen round. If the chosen round has been completed then the scores of the matches must be shown (see Appendix 6 for example output for Round 1 with match scores shown). ii. The second view must display all the fixtures for the chosen team for rounds 1 to 26. To achieve this the team is chosen from the TEAM drop-down list – See Appendix 5 for example output for Manly-Warringah. In this view, completed matches must show match scores. iii. The third view must display all fixtures for all teams for all rounds. This view is achieved by the user choosing “All Teams” from the TEAM drop-down list (note: it does not matter what the value of the ROUND drop-down list is in this view). See Appendix 6 for example output. Completed matches must show match scores. Important Note: it is not expected that navigation to these different views is via a tabbed interface as depicted in Appendix 4, 5 or 6. Instead, it is suggested that you implement two separate PHP pages to provide this functionality (roundFixtures.php and teamFixtures.php). 2. Ladder – This link provides the user with a view of the ladder (team rankings) at the current date/current round. See Appendix 1 which shows the ladder as at 4th April 2017 after 5 rounds had been completed. The data items that must be displayed are: Position, Team logo, Team name, Played, Won, Lost, Drawn, Bye, For, Against, Score Differential, Competition Points Notes: (i) As per the example shown in Appendix 1, the ladder must be displayed such that the highest ranked team is displayed at the top of the output followed by the team ranked second, then third, and so on until the lowest ranked team is displayed last; (ii) the data items to be displayed in this output are shown in Appendix 1 and listed above. (iii) this page should be named ladder.php. Page 3 of 9 3. Enter Results – this link enables the match scores to be entered for a round. Once the match scores have been entered for the round, the web application should calculate and update team statistics (eg, number of matches played, won, lost, drawn, etc) in the database. This page should be named scoreEntry.php. However, this functionality is for administrators only so must be protected by appropriate authentication and access control. Hence, when this link is clicked, and if the user is not logged-in, the user must be redirected to the login page (named login.php). The login page will need to obtain the user’s credentials (username and password) and authenticate them against the details stored in the database; this must be done via postback. Upon successful authentication, the user will be redirected to the scoreEntry page. Unsuccessful authentication will result in the user being redirected to the index page (see Web Application Start-Up section below for details). In the scoreEntry page, scores for each match in the round will be obtained from the user and written to the database (after passing appropriate input validation). That is, the web application will need to display the details for each match in the round and obtain the score for the home-team and the away-team for each match. The scores for each match must be validated both client-side, using JavaScript, and server-side, using PHP, before being written to the database. Validation Rule: The score for each team in each match must be zero or positive whole numbers only. 4. Logoff – This link should only be visible to logged-in users. When clicked, the user will be logged off the web application and redirected to the index page (see Web Application Start-Up section below for details). Hint: you will need to implement a logoff.php page. Web Application Start-Up d) Normally, a web application such as this would automatically determine the current round based upon the server’s current date. However, to assist with testing of the application it is suggested that you use the provided index.php file as your landing page for the application. The supplied Index.php page enables the user to choose between using the current server date to determine the round or to use form input from the user. This will make testing and marking easier. This page will need further php code added to it to achieve the required functionality but the major structure has been provided. B(iii) – Database Description You have your own copy of the NRL2017 database. To access this database, you have to use a username and password. The following generic connection information can be used to connect to your NRL2017 database from your php scripts: Database name: NRL2017### Username: twa### Password: twa###XX Server: localhost where ### is your twa site number, and XX refers to the first two characters of your twa site password. For example, if your TWA site is twa999, and your password is abcd7890, then the following would be your connection information: Database name: NRL2017999 Username: twa999 Password: twa999ab Server: localhost Hence, to connect to the NRL2017999 database from your php script you would require code similar to the following: $connection = mysqli_connect('localhost', 'twa999', 'twa999ab', 'NRL2017999') or die('Could not connect: ' . mysqli_error()); Note: The tables within the database already have data but some will need to be updated as the semester progresses (i.e. as competition rounds are completed and match results become known). Tables in the database are described as follows: Table Name: team This table contains details of all of the teams in the 2017 NRL competition. Each row within this table represents an NRL team, and has the following fields: Page 4 of 9 Field Name Data Type Description teamID INT unique identifier for the NRL team teamName VARCHAR the name of the NRL team abbrieviatedName abbreviatedName CHAR Three letter abbreviation of the team name teamMascot VARCHAR the mascot or emblem or commonly used name for the NRL team logo VARCHAR the path information for an image that is used as the team logo groundID INT the Ground ID of the sports ground where the NRL team play their home games played INT number of matches played to date won INT Number of matches won to date lost INT Number of matches lost to date drawn INT Number of matches drawn to date bye INT Number of byes to date for INT Accumulated scores achieved by the team against INT Accumulated scores scored against the team scoreDiff INT Score differential – difference between total score for and score against - explained in Appendix 3 points INT Total competition points to date – accumulating points is explained in Appendix 2 Table Name: ground This table contains details of the grounds where matches are played. Each row in this table represents a ground, and has the following fields: Field Name Data Type Description groundID INT unique identifier for the ground where matches are played groundName VARCHAR the name of the sports ground address VARCHAR Street address for the sports ground latitude VARCHAR the latitude of the home ground (used for Google Maps) longitude VARCHAR the longitude of the home ground (used for Google Maps) Table Name: fixtures This table contains the details of all matches (fixture/game) for each round of the NRL competition. This information is generated by the NRL prior to the start of the competition hence the results of each match are not known at the time this fixtures table is created. Each row within the table represents a match (fixture/game), and has the following fields: Field Name Data Type Description matchID INT Unique identifier for match/fixture roundID INT The round in which the match is played homeTeam INT Team ID for the home team awayTeam INT Team ID for the away team venue INT Ground ID for where the match is being played (normally this will be the Home Team’s home ground) matchDate DATE Date of the match matchTime TIME Kick off (start) time for the match score1 INT score of home team for the match score2 INT score of away team for the match Table Name: round This table contains the details of each Round. Each row within the table represents a Round within the competition, and has the following fields: Field Name Data Type Description roundID INT unique numeric identifier for the round startDate DATE Date of the first match in the round endDate DATE Date of the last match in the round matches INT the number of matches in the round Page 5 of 9 Important Notes: Most rounds of the NRL competition have eight (8) matches. However, some rounds may have less than eight (8) matches since some rounds are played as a split round. Your web application needs to be able to cater for this. Your web application cannot assume which rounds will be split nor how many matches will be in the split rounds. The maximum number of matches per round is eight (8). Table Name: byes This table contains the details of each bye within the competition. Each row within the table represents a bye within a round, and has the following fields: Field Name Data Type Description byeID INT unique numeric identifier for the bye roundID INT the round in which the bye takes place teamID INT Id for the team with the bye in the round Table Name: user This table contains the login details of each administrator: Field Name Data Type Description id INT unique numeric identifier email VARCHAR (100) the administrator email address (also the username) password VARCHAR (256) the administrator hashed password Note: the following users exist in this table: email password [email protected] fred [email protected] bob [email protected] notharry C. Referencing Referencing must follow the guidelines given in Section 2.5.1 of the TWA Learning Guide. D. Submission Procedure To submit your Assignment, you must do the following by the due date and time specified on page 1 of this document. 1. Upload all your assignment files in the assignment1 folder in your TWA web site on the TL28serv server 2. Run the submission script located at http://TL28serv.uws.edu.au/twainfo/submit.asp. As part of the submission, you will be prompted for your TWA website username and password. You will then be asked to read the WSU policy on plagiarism and certify that work submitted by you is your own work. This action will be logged in a database for future reference and is deemed to be evidence that you claim that your work is original. Next, you will need to select from a drop down list the Assessment you are submitting, eg, Assignment 1, and click the ”Submit Assessment” button. The web page will then display a listing of the files you have submitted along with a receipt number. You should print this page for proof of submission. E. Marking Criteria and Standards The marking criteria and standards for the Web Application Assignment are published in Section 2.5.1 of the Learning guide and will be used to assess your assignment submission according to the specific weightings identified in the table below: Code Functionality/Correctness: 55% Web Page Design 30% Form Design 10% Code Readability 5% Appendices start on the next page. Page 6 of 9 F. Appendices Appendix 1 – Example information display for menu item 3 – Ladder (Team Rankings) as at 4th April 2017 (5 competition rounds had been completed by this date) Key: Column Heading Meaning Further Description Pos Position or Rank The ranking is determined based upon accumulated competition points (see Appendix 2) and a Score Differential (see Appendix 3) if necessary. Team Image, Name and Mascot Name of Team Team logo image, Team name followed by the Mascot name. P Number of matches played W Number of matches won L Number of matches lost D Number of matches drawn B Number of Byes A Bye is when a team does not play a match in a particular round. F Points ‘For’. Total number of points scored by the team A Points ‘Against’ Total number of points scored against the team Pts Total Competition points See Appendix 2. The screen shots in this document are sourced from http://www.smh.com.au/rugby-league/nrl-ladder and are used for educational purposes only. Page 7 of 9 Appendix 2 – Accumulating Competition Points For each match that a team plays they receives two (2) points for a win, zero (0) points for a loss, and one (1) point for a draw. A Bye is awarded two (2) competition points. Each team during the twenty-six (26) rounds will have two Byes in total. Appendix 3 – Score Differential When two or more teams have accumulated the same number of total competition points the correct ranking of the teams is determined by using a ‘score differential’. The Score Differential is calculated as ‘Points For’ minus ‘Points Against’ (ie, diff = F - A). The team with a larger score differential is ranked higher than a team with a smaller score differential. For example, in Appendix 1 St George-Illawarra Dragons (Pos 2) are ranked ahead of Sydney Roosters (Pos 3) since their score differential (128 – 72 = 56) is greater than the score differential (106 – 78 = 28) of Sydney Roosters even though they both have the same total competition points (8). Appendix 4 – Default View for menu item 1 - Fixtures This example output shows the default view for Fixtures. It displays all fixtures for Round 6 (the current round at the date of creating this document). The user may choose a different round from the Round drop-down list which will then display all fixtures for the chosen round. If the round has been completed then the scores of the matches must be shown (see Appendix 6 for example output for Round 1 with match scores). Appendix 5 on next page Page 8 of 9 Appendix 5 – Second View for menu item 1 - Fixtures This example output shows all fixtures for Manly-Warringah from Round 1 to Round 26. Match scores are displayed for completed rounds. FULLTIME is displayed instead of date of match for completed matches. Current round is displayed using appropriate highlight. Further example output on next page Page 9 of 9 Appendix 6 – Third View for menu item 1 - Fixtures This example output shows all fixtures for all rounds.