Limitation exists on MySQL information storage.

There have few limitations exist on MySQL. As the database storage engine cannot have more than 64 indexes per MyISAM table. In this project, the limitation on index is not affects on application development. Cause less than 5 indexes has been created in each tale, so it doesn’t breach the limitation. In term of the key length limitation, in this project the key length under 50 bytes, this length doesn’t breach the MySQL limitation on “Maximum 1000 bytes on key length”. Even the combination key index length also under the MySQL limitation on “Maximum 16 columns pre index”, in this project the combination key index created by less than 3 columns that also not deal on that limitation.

For the table relationship, MySQL have few limitations on create table relationship. The limitations on InnoDB storage engine have this limitation:

• Maximum 1000 columns per table
• Maximum 64 TB table space per table
• Total of row length is 4GB

In this project, there are less than 50 columns in all the tables. No deal with the first limitation. In term of table space limitation, table space increasing will not over 64 TB per table at next 3 years because of data type majority used “tinyint”, “bit”, “datetime” and “char” on 8 letters fixed size or “varchar” on 100 letters, few in “double”. Roughly, the lengths will less than 3 Kbytes information space per record. The amount space requires on table will not over 64 TB at next three years. Therefore, there is no deal with the second limitation. At the last limitation, the total of row length in this project less than 3 Kbytes. I believe this length also no deal with the third limitation on InnoDB storage engine’s limitation.

Result input page is designed for Cricket Club matching result management.

Each player has their own result when they attend the match. For the next game plan preparation, the caption needs to analyze the matching result for each player and than find out the possible way to improve the result on next time. This page is provided to the administrator input the grades for each player at each match. Result can be browse for user interest on cricket match. Thus the result, the cricket caption understand what player should play attention more. Player could review the result any time they like as well as discuses the result with other players. This result will be showed at the player’s profile page as well.

A problem on keeping the matching result, Batting and Bowling result can not place in same table because of the table fields are different. Therefore, information needs categorized in two tables. The “CSUID” field will be the table relation key. The key index will be the “CSUID” plus the row number “Rowno”. Batting table design sees as Screenshot-1. Bowling table design sees as Screenshot-2.

Screenshot-1

Screenshot-2

Browse a cricket club player profile’s information.

For the player’s profile browsing, user can chose the initial letter for the name of player, than select and click the correct name of the player. The content will be showing. The page layout showed as screenshot-1. There have two parts in content page; first part is the common information about the player, including the name of the player, age, personal photo and the play role of the player in matching. Second part is the current grades that player who got at last matching. The page layout sees as the screenshot-2 showed.

Screenshot-1

Screenshot-2

A portable web application development environment been used in this project.

In term of system implementation in this project, the tools have been used on application development with uniform server suite, the core elements in development issues as the following:

1. programming langue with HTML4.0 and PHP5
2. information store based on MySQL5.0.67
3. programs will run at Apache Core 2.2.9 web server

Uniform server is a lightweight server; it included the current versions of Apache2, Perl5, PHP5, MySQL5. This uniform server suite is NO INSTALLATION REQUIRED and NO REGISTRY at all. For development purpose, it is costless because of an open source. Uniform server suit can run under Windows XP Operating System and just needs less than 10MB spaces. In addition, it can be run on simple USB driver; that mean all the development materials are portable. It is quite convenient. The final web application can be uploaded to some of the free ISP and place it there and used it.

Can administrator have a backup for the job?

In term of the job transformation or job agency, administrator can create a user for the backup. Even though just have a few days break that should have a backup take care the information management, either a temporary or the other official administrator. A limitation for adding other administrator, all the fields need to be fills in and the password also provide at the same time. The details in the request form on creating other administrator sees as the screenshot-1. The password will be encrypted keeping in database; nobody can retrieve it back if the password was forgotten. In the password rest process, the current password needs to be presented during the password change or rest. If the current password doesn’t match, the new password cannot be updated or changed. The alternative on password was forgotten is creating other account by other administrator. May be this method would be change if the sponsor disagree this solution.

Screenshot-1

Player’s state control page has designed for the administrator.

In this management page, there provided the function like add, modify and remove on player’s profile management. Browsing the players’ details just press the “edit” link than system will display all the information been saved. Create a new player profile just click the “I want add a new player” link, system will redirect to the details page. Players want to update their information that must inform the club administrator, otherwise, the information will incorrect when admin analyze the player’s playing information or contact information. In default, all club players’ account state will be inactive. Administrator can active those accounts later when it has been required. Those functions only the Administrator have it. However, others are restricted. Again all the management page accessing, administrator must login first than have it. The layout of this page sees as following Screenshot-1.

Screenshot-1

Page layout has been designed for News publishing.

For the news publishing, administrator can posts news via this function in page. News listed order by the date and time while it been posted. In term of the news management, a little bit different design compare to the comments management page, administrator can remove the news any time. The idea for this operation is some news may be out of time or the information is changed by some factors. Therefore, the news needs to be update; thus the news remove function should be in place. The page layout sees as the Screenshot-1. All news information only the administrator has the rights on news publishing. However, others are restricted.

Screenshot-1

The Information printing page is provided for cricket club administrator.

In the information printing page, there have four different types of information printing that provided to the admin used. The types of report listed as following:

• "Bowler Report" - is information about the player’s play role is “Bowler”. Example sees as the Schreenshot-1.
  
• "Batsman Report" - is information about the player’s play role is “Batsman”.
  
• "WicketKeeper Report" - is information about the player’s play role is “WicketKeeper”.
  
• "Contact Report" - is information about the contact for all players in the club. Example sees as the Schreenshot-2.

That information only the administrator can print it out. However, others are restricted.

Screenshot-1

Screenshot-2

Administrator Confirm Fan’s Comments on Publishing.

For cricket club's fans comment management, administrator has two options on it. The page layout sees as the Screenshot-1. One is “visible” mean that comment allows to publish on board. Otherwise, the comment still state on invisible or the comment can be deleted if the administrator doesn’t want to keep it forever. There has a limitation for the comment management. The comment can not be change the state (visible / invisible) when it has been published because of the comment won’t show in the page when the comment’s state is “visible”. Only the new comment posted by cricket club fans will show in the management page.



Screenshot-1

CSU-SCM Web Application System Decomposition on It’s functionally.

In the following Diagram-1 showed CSU-SCM web application’s system functionally decomposition, there have two types of function serve to normal users and admin, Level A showed the function for the normal users. There have seven functions Home, Players, Officials, News, Comments, Photos and Contact US. Level B showed the function only for the administrator. For the administrator, there have sever functions including result management, News management, Active user, Comment management, Add admin, Photos management and Report management. The decomposition details see as the Diagram-1.

Diagram-1

System operation & Information access flow.

Each system has different operation model, CSU-SCM system is running on the client/server model with web technology and centralized information management. The system infrastructure sees as the Diagram-1. User accesses information over internet or intranet. Take web application on administration to saving the resources (such as papers, man power and etc.); reduce the operation cost on cricket club document printing and information delivery. In addition, make the information sharing more efficient also reduce the workload when the club's player will increase day by day to a bigger number.



Diagram-1

Information management console design for the CSU-SCM Cricket Club administration.

In term of the information management, the club’s manager or administrative group can manage the information with the admin page which design look like the Screenshot-1. Inside the admin page, there have seven functions that listed as following:

“Active User” - This function provided admin on user information management including add, modify and delete information.

“Add admin”- This function provided admin add other user who has been authorized work on the admin job.

“News Management” - This function provided admin add or delete news about the cricket club.
“Photos management” - This function provided admin upload the photos has been taken during match or other events.

“Result management” - This function provided admin add the result after each match.

“Report management” - This function provided admin prints the information about the player in the cricket club.

“Comment management” - This function provided admin control the comment displays to public or hidden it cause the comment had bad language inside or the content doesn’t related to the cricket club.

Screenshot-1

Where is the CSU-SCM Cricket Club’s office?

Somebody wants to join the cricket club, the first question would be where and how to contact the cricket club; here provided a contact us page to user who interest the cricket club. User can contacts the cricket club on three ways, first is e-mail, the second way make a phone call to the office or third way visits the office in person. User can get the details within this contact us page, the page layout see as the Screenshot-1.

Screenshot - 1

Solving the dynamic innerHTML function incompatible between IE7 and Firefox 3.

In term of the innerHTML function working in Internet Explorer version 6 and 7, but that function had some problems run on Firefox 3.

According to Microsoft MSDN document shows the syntax (object.innerHTML = ‘ <b> Hello World</b>’) of the innerHTML is correct under IE7. The “object” could be the HTML element Div, Span, Label and such. It worked on IE7.

But this syntax “object.innerHTML = ‘<b> Hello World</b>’” doesn’t work on Firefox 3. An error message shows at JavaScript Console on Firefox is “object is undefined”.

On the Net, someone also had the similar problem with innerHTML property. An Example 1 that somebody used the title “Problems with innerHTML property” posted on a forum. Example 2, someone used the title “innerHTML not working in Firefox” on other forum.

The solution also been posted on a forum as Example 3. The solution on solving the innerHTML property problem is change the syntax on “document.getElementById("object").innerHTML="<b>Hello World </b> "” which can run on IE7 and Firefox 3.

I am not sure other guys solving their problem yet or not. In my case, the problem has been fixed.

Post a comment to Cricket Club by Friends.

The cricket club supporters can post their comment to the cricket club, the example sees as screenshot-1. But all the comment won’t be display unless the administrator proofs it. Supporter with the interface see as the screenshot-2 post their comment to cricket club. System will return a feedback to the poster see as screenshot-3 if comment posting successfully.

Screenshot-1

Screenshot-2

Screenshot-3

Information Printing with Cascading Style Sheets (CSS).

In term of the information printing, with a print-friendly style sheet represented information clearly and save resources. With print-friendly style sheet remove all the non-friendly options on pages. This made higher readability on each page. There have few points on print-friendly style sheet design, the points as following:

• With the black color shows information on all the text including titles.
• With a regular font-style and font-size presents information.
• With underline style shows the links inside the pages.
• Remove non-essential icons or images in pages.
• Remove the Menu or Navigation Bar in pages.
• All heading illustrate with the bold style.
• Resizing the page margin fits presentation.

Focus on the CSS defining in web page, used the link element to define the print style sheet each web page. The following examples are different on the attribute with media=”screen” for screen style, media=”print” for printing. The syntax format on link element in web page as next:

<link media="screen" href="screen.css" type="text/css" rel="stylesheet">
<link media="print" href="print.css" type="text/css" rel="stylesheet">

We can use one link element in web page with screen style and print style. The syntax format on link element in web page as coming:
<link href="alltype.css" type="text/css" rel="stylesheet">

But inside the file ”alltype.css”, two keyword “@media screen” and “@media print” needs to be used in format definition.
@media screen { ‘all screen style put in here’ }
@media print { ‘all print style put in here’ }

Compare the information page layout on print-preview with print-friendly style sheet and not include print-friendly style sheet. See as the screenshot-1 without print-friendly style sheet. Screenshot-2 showed with print-friendly style sheet. It is a draft version of information printing; this information printing style would be changed if the program sponsors have other idea.

Screenshot-1

Screenshot-2

File type filtering out of control on photo file upload process

A problem was occurred on the photo file upload process in photograph upload page. The file upload page sees as Screenshot-1.

Screenshot-1

A common input object with type attribute on file is being used on file selecting, but the file type filtering is a malfunction even an “accept” attribute can be used for file filtering that information can be found in HTML learning documentation, such as Microsoft, w3Schools. The file type filtering is still not working during the file selecting, sees as Screenshot-2. Checked the input object in HTML reference in Microsoft Technet web site that showed “accept” attribute had been removed in the input object’s attribute listed. Therefore, give up the file type filtering function on input object. Shift the file type filtering run on the server side script (PHP). The first step on checking the file type is allowed or not, if the file type is not match the requirement, the upload file kept in the system temp folder will be deleted. The PHP script has been used on file type checking sees as Screenshot-3.

Screenshot-2

Screenshot-3

Information access control on the system

In term of the information access control, there have four kinds of security control on this system.

Firstly, each member needs to registration first and then access their private information after logon to the system. The membership login page sees as screenshot-1. Each member’s account default status is disabled. A remind message will prompt up to users while member registration process successfully. Remind message sees as screenshot-2. If user register same name which is existing in database, an error message also will prompt up to the user inform that account name has been taken. Error message sees as the screenshot-3.

Screenshot-1

Screenshot-2

Screenshot-3

Secondly, there has three times user login failed control, system will lockout the information access after three times login failed until the browser restart. System won’t show anything before the login failed counter equal to 3. The system lockout message sees as screenshot-4.

Screenshot-4

Thirdly, system will perform the page accessing rights checking. If user accesses the page without user login, a message will prompt up to the user sees as screenshot-5 and logout the response until the browser restart.

Screenshot-5

Finally, user must change their default login password at the first time login. The password update page sees as screenshot-6. If user forgot the login password, member needs to inform the manager to reset their password.

Screenshot-6

Information store structure design

In term of the database design, there have four parts, member information, photo collection, team events news, and messages.

The member’s information has been created, information has been divided in three parts in three tables; first part is the contact information (screenshot -1), second part is the health information (screenshot-2), the last part is the sport category (screenshot-3). The links between those three tables is the primary key “CSUID”. The relationships on those three tables are with one to one.

The sample data of contact information table as screenshot – 4.

Screenshot - 1

Screenshot - 2

Screenshot - 3
Screenshot - 4

The second part of the information is the photo collection table (screenshot - 5), there includes the fields as name of the photo, name of event, taking date and caption of the photo. Photos classified by the event in store. Photo collection table doesn’t set the relationship between member’s information table and events news table.

Screenshot - 5

The third part of information about the events news table (screenshot – 6), there includes the title of the events, the description of the events and the date of the events. For example as following:
Title à team practice at somewhere
Date à the coming Sunday, 2:00PM
Description à this practice focus on the new member who did not play on the real competition at last two games on uni level competition. The ground will be at the Burwood cub.

Screenshot - 6

The last part of the information table is the messages table (screenshot – 7). There includes few fields, the sender, receiver, subject, message body, date and status. The relationship between members table and messages table is one to many.

Screenshot - 7

Data validation got trouble on the submission with different browser

For the data submission with default setting on Internet Explore is fine as well as the Mozilla Firefox Explore. But there has an exception on the explore information security control setting, for instance, disabled the in the cookie, or change the setting on the personal private tab in the tool item in Mozilla Firefox menu bar. If the setting has been changed or disabled, that affects data validation goes wrong.
At this stage, the web page will focus on one of the platform first, the Internet Explore 6.0 will be the target, others explore may be give up if the time is not enough. A web page disclaimer will be at to the web page to inform the user which platform is better for user browsing this web site. The content of the web page disclaimer is like this “This website is best viewed with IE6.0 sp3 or higher & at 1024 x 768 resolutions.”

Screenshot 1

Member’s Photo uploads out of control within member registration form

Member’s photo can not upload to server within the member registration HTML form. Because of the HTML form submit process can not handle different types of member data in one process. Usually member’s information illustrated with the data type of “text” including the Boolean, but the member’s photo is represented with the data type of “binary”. Therefore, the photo submit process needs to be separated in other form submit process compare to the basic member personal details submit process. For the HTML form design, the web form needs using two parts, basic information included member name, student ID, contact number, email and such within one HTML form submit process. The member’s photo submit to server within other’s HTML form submit process. For this purpose, the server side PHP application must use the difference. For example, the data.php focuses on the information submission, photo.php focuses on the member photo submission. An example see as screenshot1.

Screenshot 1