Handout #7 for Server Side Programming

01 - Create a new directory inside C:/csci2442 called handout7. This directory will eventually contain the following:

Four jpg files called image1.jpg through image4.jpg
Ten png files called zero.png through nine.png
Two text files called date.txt and counter.txt
Two asp files called controls.asp and counter.asp
One html file called login.htm

Open a image editor and create an new image which is 50 pixels wide by 75 pixels high. Make the background color black, then enter the digit "0" in a different color. Save the file as zero.png. Repeat the procedure for digits 1 through 9, making the images the same color and size, then name the files one.png through nine.png.

02 - Create the file called counters.txt and open it with notepad. Enter a value of 100 on the first line and do NOT press the ENTER key. Save and close the file. Create the file called date.txt and open it with notepad. Enter a value of 12 on the first line, 1 on the second line and 2008 on the third line. (This represents the date December 1st, 2008) Do NOT press Enter after entering the third line and save the file.

03 - Find four landscape photos that you like and resize them to 200 pixels wide by 150 pixels high. Save the photos as image1.jpg through image4.jpg.

04 - Create the file counter.asp and open it. Enter the standard HTML tags and place "Handout #7" in the title tag. Set the body background color to black then place an H1 tag containing the text "Handout #7 - Counter" aligned in the center of the page. Next construct a centered table with two rows and two columns. Inside each cell, place an image from step 3. Close the table then create a paragraph tag containing the text "This webpage has been accessed". Beneath this paragraph tag, create opening and closing ASP script tags. The content of these tags will be described in steps 5, 6 and 7. After the closing tag, insert closing body and html tags.

05 - Insert the following comments into the scripting section of counter.asp: "Read the counter file", "Print error message if counter out of range","Convert to string and find length","Increment the counter file","Pad the string with zeros if needed","Define the pick_image function","Display the six images","Read and display the date file info". Under the "Read the counter file" section, open the counter.txt file, read the first line, set the value equal to a variable called count_num and then close the counter.txt file. The variable count_num should be a numeric variable between the values of 0 and 999999. Under the "Print error message if counter out of range" section, test if either count_num is less than 0 or greater than 999999. If this is true, print out the message "Counter currently unavailable" followed by a Response.End statement, then close the if structure. Under the "Convert to string and find length" create two variables called count_str and string_len. Convert count_num to a string variable and assign it to count_str, then find the length of that string and assign that value to string_len.

06 - Under the "Increment the counter file" section, increase the value of count_num by one then write it back to the counter.txt file, overwriting the original value. NOTE: You may need to move both the counter.txt and date.txt file to a USB drive if you encounter read/write permission problems. Be sure to change all paths and drive letters if this occurs. Under the "Pad the string with zeros if needed" section, create a case statement involving the string_len variable. The redefine the str_len variable if it does NOT have six characters by padding the left side with zero to make it six characters. Under the "Define the pick_image function", create a function called pick_image with one input parameter called number. This function will take a string input of "0" through "9". Create a case statement which sets the return variable equal to the corresponding png image. For example, if number = "0", set the return variable equal to "zero.png".

07 - Under the "Display the six images" section, create an array with six elements called image. Set image(0) equal to the left most character of the count_str variable. This will involve using the pick_image function defined in Step 6 as well as the mid() function described in class. Repeat this procedure for image(1) through image(5). Next, use multiple Response.Write statements to create a div box containing the six images. Lastly, under the "Read and display the date file info" section, read the three lines from date.txt. The first line should be the month, the second the date and the third line the year. Beneath the display of numbers, display the message "times since MONTH, DATE, YEAR" substituting the values for month, date and year. Please display the month in text format (January, February, etc) instead of numerical format. After this statement, place a small link on the far right side of the page to the file called login.htm. Place the text "Reset Counter" inside this link. This completes the counter.asp file.

08 - The login.htm is a simple HTML form file. In the body section, place an h3 tag reading, Please enter your username and password to reset the counter". Use the "post" method and redirect the results to controls.asp. Place a text input called username and and password input called password inside the form along with a submit button. At the bottom of the page, place a link back to counter.asp with the text "Return to Counter Page" inside the link.

09 - Create the controls.asp file. Create the following comment sections: "Test username and password", "Reset counter", "Get current date" and "Reset the date file". Under the "Test username and password" section, get the values passed from login.htm. Create an if statement testing if both username is equal to "jsmith" and password is set to "qwerty". Place the remaining three comments under this section if both conditions are true. If the condition is false, display the message "Invalid Username and/or Password". For the "Reset counter" section, overwrite the counter.txt file with a value of 0. Under the "Get current date" section, define three variables and set them equal to the numerical values of the month, date and year. Under the "Reset the date file", write these three variables in the proper order to the date.txt file, then display the message "The counter has been reset to zero". Outside of the if statement, place a link to counter.asp with the text "Return to Counter". Review the counter.asp, login.htm and controls.asp and modify colors, fonts and layouts as desired.

10 - Test out the project by opening counter.asp and verify it displays "000100" for the images and "December 1, 2008" for the date access time. Press the page reload button multiple times and verify the counter increments as expected. Take a screen shot of the result. Next click the Reset counter button and enter "jsmith" and "qwerty" as th username and password. Take a screen shot of the page displaying the message the counter has been reset. Return to the counter.asp page and verify both the counter and date have been changed. Take a screenshot of the result. Turn in all three screenshots, plus the source code of counter.asp and controls.asp. Be prepared to demonstrate the results in class.










		Handout #7 for Server Side Programming 01 - Create a new directory inside C:/csci2442 called handout7. This directory will eventually contain the following: Four jpg files called image1.jpg through image4.jpg Ten png files called zero.png through nine.png Two text files called date.txt and counter.txt Two asp files called controls.asp and counter.asp One html file called login.htm Open a image editor and create an new image which is 50 pixels wide by 75 pixels high. Make the background color black, then enter the digit "0" in a different color. Save the file as zero.png. Repeat the procedure for digits 1 through 9, making the images the same color and size, then name the files one.png through nine.png. 02 - Create the file called counters.txt and open it with notepad. Enter a value of 100 on the first line and do NOT press the ENTER key. Save and close the file. Create the file called date.txt and open it with notepad. Enter a value of 12 on the first line, 1 on the second line and 2008 on the third line. (This represents the date December 1st, 2008) Do NOT press Enter after entering the third line and save the file. 03 - Find four landscape photos that you like and resize them to 200 pixels wide by 150 pixels high. Save the photos as image1.jpg through image4.jpg. 04 - Create the file counter.asp and open it. Enter the standard HTML tags and place "Handout #7" in the title tag. Set the body background color to black then place an H1 tag containing the text "Handout #7 - Counter" aligned in the center of the page. Next construct a centered table with two rows and two columns. Inside each cell, place an image from step 3. Close the table then create a paragraph tag containing the text "This webpage has been accessed". Beneath this paragraph tag, create opening and closing ASP script tags. The content of these tags will be described in steps 5, 6 and 7. After the closing tag, insert closing body and html tags. 05 - Insert the following comments into the scripting section of counter.asp: "Read the counter file", "Print error message if counter out of range","Convert to string and find length","Increment the counter file","Pad the string with zeros if needed","Define the pick_image function","Display the six images","Read and display the date file info". Under the "Read the counter file" section, open the counter.txt file, read the first line, set the value equal to a variable called count_num and then close the counter.txt file. The variable count_num should be a numeric variable between the values of 0 and 999999. Under the "Print error message if counter out of range" section, test if either count_num is less than 0 or greater than 999999. If this is true, print out the message "Counter currently unavailable" followed by a Response.End statement, then close the if structure. Under the "Convert to string and find length" create two variables called count_str and string_len. Convert count_num to a string variable and assign it to count_str, then find the length of that string and assign that value to string_len. 06 - Under the "Increment the counter file" section, increase the value of count_num by one then write it back to the counter.txt file, overwriting the original value. NOTE: You may need to move both the counter.txt and date.txt file to a USB drive if you encounter read/write permission problems. Be sure to change all paths and drive letters if this occurs. Under the "Pad the string with zeros if needed" section, create a case statement involving the string_len variable. The redefine the str_len variable if it does NOT have six characters by padding the left side with zero to make it six characters. Under the "Define the pick_image function", create a function called pick_image with one input parameter called number. This function will take a string input of "0" through "9". Create a case statement which sets the return variable equal to the corresponding png image. For example, if number = "0", set the return variable equal to "zero.png". 07 - Under the "Display the six images" section, create an array with six elements called image. Set image(0) equal to the left most character of the count_str variable. This will involve using the pick_image function defined in Step 6 as well as the mid() function described in class. Repeat this procedure for image(1) through image(5). Next, use multiple Response.Write statements to create a div box containing the six images. Lastly, under the "Read and display the date file info" section, read the three lines from date.txt. The first line should be the month, the second the date and the third line the year. Beneath the display of numbers, display the message "times since MONTH, DATE, YEAR" substituting the values for month, date and year. Please display the month in text format (January, February, etc) instead of numerical format. After this statement, place a small link on the far right side of the page to the file called login.htm. Place the text "Reset Counter" inside this link. This completes the counter.asp file. 08 - The login.htm is a simple HTML form file. In the body section, place an h3 tag reading, Please enter your username and password to reset the counter". Use the "post" method and redirect the results to controls.asp. Place a text input called username and and password input called password inside the form along with a submit button. At the bottom of the page, place a link back to counter.asp with the text "Return to Counter Page" inside the link. 09 - Create the controls.asp file. Create the following comment sections: "Test username and password", "Reset counter", "Get current date" and "Reset the date file". Under the "Test username and password" section, get the values passed from login.htm. Create an if statement testing if both username is equal to "jsmith" and password is set to "qwerty". Place the remaining three comments under this section if both conditions are true. If the condition is false, display the message "Invalid Username and/or Password". For the "Reset counter" section, overwrite the counter.txt file with a value of 0. Under the "Get current date" section, define three variables and set them equal to the numerical values of the month, date and year. Under the "Reset the date file", write these three variables in the proper order to the date.txt file, then display the message "The counter has been reset to zero". Outside of the if statement, place a link to counter.asp with the text "Return to Counter". Review the counter.asp, login.htm and controls.asp and modify colors, fonts and layouts as desired. 10 - Test out the project by opening counter.asp and verify it displays "000100" for the images and "December 1, 2008" for the date access time. Press the page reload button multiple times and verify the counter increments as expected. Take a screen shot of the result. Next click the Reset counter button and enter "jsmith" and "qwerty" as th username and password. Take a screen shot of the page displaying the message the counter has been reset. Return to the counter.asp page and verify both the counter and date have been changed. Take a screenshot of the result. Turn in all three screenshots, plus the source code of counter.asp and controls.asp. Be prepared to demonstrate the results in class. BACK


	Home \| Portfolio \| Blog \| Podcast \| Misc \| Contact \| Sitemap

Handout #7 for Server Side Programming

BACK