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