Handout #2 - CSCI 2442

01 - Find three portrait photos and resize them to a width of 400px and a height of 300 pixels. Save them as image_a.jpg, image_b.jpg and image_c.jpg to the top level of your USB drive.

02 - Create a folder under your htdocs directory called handout2. This folder will contain 5 files created by you and will eventually contain the three uploaded photos. The five files will be called index.htm, page2.php, page3.php, page4.php and page5.php. Use the post method for all form tags.

03 - index.htm will be similar to the upload1.htm created in class. In the form tag, the action should direct to page2.php while the name value inside the input tag should be img1.

04 - The first section of page2.php should save the uploaded file from index.htm as image1.jpg to the handout2 directory. The second part of page2.php should prompt the user to upload the second image. In the form tag, the action should direct to page3.php while the name value inside the input tag should be img2.

05 - The first section of page3.php should save the uploaded file from page2.php as image2.jpg to the handout2 directory. The second part of page3.php should prompt the user to upload the third image. In the form tag, the action should direct to page4.php while the name value inside the input tag should be img3.

06 - The first section of page4.php should save the uploaded file from page3.php as image3.jpg to the handout2 directory. The second part of page4.php should display a table with seven rows and three columns. All column widths should be set to 400px. The content of each of the rows is described below:

Row 1 - Using the img tag, display image1.jpg, image2.jpg and image3.jpg in the 1st, 2nd and 3rd columns.
Row 2 - Display text "Caption for Image1" in the 1st column, repeat for 2nd and 3rd columns using Image2 and Image3.
Row 3 - Insert three input text boxes, named caption1, caption2 and caption3. Set the text box width to 25.
Row 4 - Display text "Text Color for Caption1" in the 1st column, repeat for 2nd and 3rd columns using Caption2 and Caption3.
Row 5 - Each column should contain a selection box called color1, color2 and color3. For each box, allow 3 options of Red, Green and Blue.
Row 6 - Spanning across all three columns, displaying the text "Select a background color".
Row 7 - Spanning across all three columns, create a selection box called bgcolor. Allow three options of Orange, Brown and Yellow.
After the table, remember to include a Submit button.

07 - Inside the body tag of page5.php, set the background color to the value selected from row 7 of page4.php. Next, define three variables called fsize1, fsize2 and fsize 3. Set each variable equal to a random number between 30 and 60. Next, create a table with three rows and three columns. All column widths should be set to 400px. The content of each of the rows is described below:

Row 1 - Using the img tag, display image1.jpg, image2.jpg and image3.jpg in the 1st, 2nd and 3rd columns.
Row 2 - Inside each cell, align the text with the center of the cell and display caption1, caption2 and caption3 inputs from row 4 of page4.php. Apply color1, color2 and color3 from row 5 of page4.php to each font and set the font-size of each to fsize1, fsize2 and fsize3.
Row 3 - Display the text "Font-Size is fsize1" in the first cell, followed by fsize2 and fsize3 for the 2nd and 3rd cells, substituting the variable names. Also align the text with the center of the cell.

08 - Set your URL to http://localhost/handout2 and upload the 3 photos from step 1. Print out browser views of page4.php and page5.php. Also turn in the local source code views of page4.php and page5.php. Include your name on the top sheet.

A working example of this code can be found HERE










		Handout #2 - CSCI 2442 01 - Find three portrait photos and resize them to a width of 400px and a height of 300 pixels. Save them as image_a.jpg, image_b.jpg and image_c.jpg to the top level of your USB drive. 02 - Create a folder under your htdocs directory called handout2. This folder will contain 5 files created by you and will eventually contain the three uploaded photos. The five files will be called index.htm, page2.php, page3.php, page4.php and page5.php. Use the post method for all form tags. 03 - index.htm will be similar to the upload1.htm created in class. In the form tag, the action should direct to page2.php while the name value inside the input tag should be img1. 04 - The first section of page2.php should save the uploaded file from index.htm as image1.jpg to the handout2 directory. The second part of page2.php should prompt the user to upload the second image. In the form tag, the action should direct to page3.php while the name value inside the input tag should be img2. 05 - The first section of page3.php should save the uploaded file from page2.php as image2.jpg to the handout2 directory. The second part of page3.php should prompt the user to upload the third image. In the form tag, the action should direct to page4.php while the name value inside the input tag should be img3. 06 - The first section of page4.php should save the uploaded file from page3.php as image3.jpg to the handout2 directory. The second part of page4.php should display a table with seven rows and three columns. All column widths should be set to 400px. The content of each of the rows is described below: Row 1 - Using the img tag, display image1.jpg, image2.jpg and image3.jpg in the 1st, 2nd and 3rd columns. Row 2 - Display text "Caption for Image1" in the 1st column, repeat for 2nd and 3rd columns using Image2 and Image3. Row 3 - Insert three input text boxes, named caption1, caption2 and caption3. Set the text box width to 25. Row 4 - Display text "Text Color for Caption1" in the 1st column, repeat for 2nd and 3rd columns using Caption2 and Caption3. Row 5 - Each column should contain a selection box called color1, color2 and color3. For each box, allow 3 options of Red, Green and Blue. Row 6 - Spanning across all three columns, displaying the text "Select a background color". Row 7 - Spanning across all three columns, create a selection box called bgcolor. Allow three options of Orange, Brown and Yellow. After the table, remember to include a Submit button. 07 - Inside the body tag of page5.php, set the background color to the value selected from row 7 of page4.php. Next, define three variables called fsize1, fsize2 and fsize 3. Set each variable equal to a random number between 30 and 60. Next, create a table with three rows and three columns. All column widths should be set to 400px. The content of each of the rows is described below: Row 1 - Using the img tag, display image1.jpg, image2.jpg and image3.jpg in the 1st, 2nd and 3rd columns. Row 2 - Inside each cell, align the text with the center of the cell and display caption1, caption2 and caption3 inputs from row 4 of page4.php. Apply color1, color2 and color3 from row 5 of page4.php to each font and set the font-size of each to fsize1, fsize2 and fsize3. Row 3 - Display the text "Font-Size is fsize1" in the first cell, followed by fsize2 and fsize3 for the 2nd and 3rd cells, substituting the variable names. Also align the text with the center of the cell. 08 - Set your URL to http://localhost/handout2 and upload the 3 photos from step 1. Print out browser views of page4.php and page5.php. Also turn in the local source code views of page4.php and page5.php. Include your name on the top sheet. A working example of this code can be found HERE BACK


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

Handout #2 - CSCI 2442

BACK