[RSS]

Football Pool Sample Application

main-deployed.png

Introduction

The purpose of this spec is to outline a web application of moderate complexity that could be used as a sample application and a basis for a tutorial for creating applications in NetBeans IDE. The resulting tutorial could cover the following topics, among others.

  • creating a project
  • working with components
  • working with databases and data sources
  • binding data to components
  • validation
  • inserts, updates, deletes (CRUD)
  • database joins
  • page navigation
  • and others
  • calculations

Important Notes

To create this spec, I used a daily build of NetBeans 6.0 (200720271200), a MySQL Database, and Apache Tomcat 6.0.

I've color-coded the two areas of the application to help eliminate confusion.

  • The USER area consists of red text on a yellow background.
  • The ADMINISTRATOR area consists of blue text on a green background.

Login

login-deployed.png

The first thing a user is the login screen. It's a simple page with two text fields: username and password. There is also a hyperlink for registering a new account. This links takes the user to a page where the following fields must be filled: First Name, Last Name, Username, and Email Address. Users already having a username can login and be taken to the main user page. The administrator will be taken to the Main Admin page. These two areas are explained in more detail below.

User Area

The Main User Page

main-deployed.png

The user come to the website to pick the winners of football games. The main page consists of the following:

  • A table with the current standings of users.
  • A button taking the user to the picks.html page to make his/her choices.
  • A button taking the user to the results.html page to view results from each week of the season.
  • A Logout hyperlink.

The Picks Page

picks-deployed.png

Here the user selects the week for which he/she wants to pick the winners. This page feature a drop down list (auto-submit on change). Upon choosing the week, the user is taken to the Weekly Picks page where the action picks are made.

The Weekly Picks Pages

picksweek5-deployed.png

The Weekly Picks Page (week 5 is shown here) is where most of the action happens. Using radio buttons, The user selects one winner per game. The picks are submitted by clicking the Submit Picks button. The user can also revisit this page to make corrections. There will be a cut-off time for making corrections, and code will have to be written to account for this.

Note: Code will have to be written to prevent the user from selecting both teams from the same game. A message should also appear if the user has forgotten to pick one or more games.

PatrickKeegan notes:

  • Wouldn't having radio buttons mean that one is automatically selected in each pairing? Might not be a bad thing (home team could be selected by default)
  • It might make sense to move the Submit button to the bottom of the page. Or have it in both places.

The Results Page

Note: There is no screen capture for this page.
It is almost identical to the Picks Page. The user selects a week from a drop down list.

The Weekly Results Pages

Note: There is no screen capture for this page.
This page will resemble a Weekly Picks Page, but with scores instead of radio buttons). An extra table showing user picks for that week will be placed at the bottom of the page.

These pages list the winners for each week, both for the games and football pool players.

Administrator Area

The Administrator Area is where the data is maintained. The administrator is responsible for the following:

  • user administration.
  • game schedules
  • game results

The Main Admin Page

mainadmin-deployed.png
The administrator is taken to this page after logging in. The page consists of three buttons, each representing one administrative function. There is also a Logout hyperlink on the page.

The Admin User Page

adminuser-deployed.png

This is the page where user administration is done. A table appears with each user's information. Using CRUD functionality, user information can be added, modified, and deleted. Each user row has a Delete button that delete all the information for that particular user. This could be useful is a user stops playing, etc. A hyperlink takes the administrator back to the Main Admin Page.

The Admin Schedule Page

adminsched-deployed.png

Here the administrator select the week for which he/she would like enter the games. A simple drop down list accomplishes this (auto-submit on change). There is also a hyperlink leading back to the Main Admin page.

The Admin Weekly Schedule Pages

schedweek5-deployed.png

On this page, the administrator enters each individual game. The table on the page contains two drop down lists, each with the complete list of teams.

Note: A message should appear when the administrator has inadvertently selected the same team twice for that week. Code needs to be written for this.

The Admin Results Page

adminresults-deployed.png

Here the administrator select the week for which he/she would like enter the game results. A simple drop down list accomplishes this (auto-submit on change). There is also a hyperlink leading back to the Main Admin page.

The Admin Weekly Results Page

resultsweek5-deployed.png

Note:

On this page, the administrator enters the final results of each individual game. The table on the page contains two drop down lists, each with a text field in which the administrator can enter the score. (Note: The screen capture is incorrect. Teams will be listed in static text.)

Note: A message should appear when the administrator has forgotten to enter some results. Code needs to be written for this.

Databases

I created a MySQL database for the purpose of designing this spec. The database is functional, but incomplete. If we agree to so this sample application, I could easily finish work on these. The following tables will be necessary for the application:

  • users - list of users' name, usernames, email addresses. Thjs is entered manually before and during the season.
  • teams - 32 football teams, entered manually before the season
  • schedule - one database for the whole season, a number representing the week of play. This is to be enter ed manually before the beginning of the season. Results are to be entered weekly
  • user standings - a dynamic table updated automatically based on the results columns of the schedule table. Some calculations will have to be made: correct picks, incorrect picks, 1st and 2nd place finishes, ranking, etc. (PatrickKeegan question would this be done with SQL JOIN statements?) * There would also have to be a secure database table to store password information. !! Conclusion As you can see, this sample application would go a long way in teaching the user to use NetBeans. It demonstrates many parts of the IDE, and shows the user a practical web application. With time and work, the application could also be expanded to include the following: * web service updates of scores (this would have to be maintained) * making the pool applicable to many different sports * adding league standings (updated from schedule table) as an option for the User Area