Part 1: for practice

In a file called for.php, write a PHP script that uses for-loops to output each of the following:

Part 2: Slip into something more comfortable?

This exercise is also for practice: to see if you know how to invoke my validation functions correctly.

Take a copy of dress.html; do not edit it. It allows the user to enter his/her dress size.

Write dress.php, which validates the user's dress size. It must be an integer between 4 and 24 inclusive. If it isn't, then output the error message(s) from my validation function. If the size is OK, then echo it.

Ask one of us to check your PHP before you move on to the next exercise.

Part 3: Get the picture?

So far, our PHP scripts use echo commands to output HTML. Each script produces a web page that gets sent back to the client, e.g. to the user's browser, for display.

But there's nothing to stop us from writing PHP scripts that output things other than web pages. For example, we could write a PHP script that outputs a CSS stylesheet, if we want.

More fun, perhaps, we can output images. Building on what you already learned in CS1107, we will use PHP to output PNG images.

Create a file called rectangle.php and enter exactly and only what you see below but without the line numbers:

01 <?php
02     $width = 200;
03     $height = 300;
04     $im = imagecreatetruecolor($width, $height);
05    
06     $yellow = imagecolorallocate($im, 255, 255, 0);
07     $blue = imagecolorallocate($im, 0, 0, 255);
08    
09     imagefill($im, 0, 0, $yellow);
10    
11     imagerectangle($im, 20, 10, 180, 290, $blue);
12    
13     header('Content-type: image/png');
14     imagepng($im);
15     imagedestroy($im);
16 ?>

Note that you do not include any HTML. This is because the output is a PNG, not a Web page. Feel free to ask if you need more explanation.

Briefly, here is what is going on.

• Lines 01 and 16 are, of course, the PHP start and end tags.
• Lines 02-04 invoke a function to create an image of the specified size, with a black background. (Technically, it doesn't create the actual image yet, but this needn't concern you in CS1109.)
• Lines 06 and 07 invoke a function to create colours. The parameters are the image we created earlier ($im, line 04) and the RGB values for the colour.
• The background color of the image will be black. If you want something different, include something like line 09, which fills the image with the yellow colour we created earlier.
• Line 11 draws a rectangle using a blue line. The four numbers give the co-ordinates of its top-left and bottom-right corners. To understand these co-ordinates, it is important for you to know that 0,0 is the top-left corner of the image, and 50,25 for example means 50 pixels across and 25 pixels down. (This is different from graph paper in school, where 0,0 was the bottom-left corner, and 50,25 would be 50 across and 25 up.) So the rectangle being drawn here has its top-left corner 20 across and 10 down; and it has its bottom-right corner 180 across and 290 down.
• Line 13 says that the output of this script is a PNG image, not a web page.
• Line 14 actually outputs the image. (Think of it as the PNG equivalent of the echo command.)
• And line 15 simply tidies up afterwards.

Once you've entered the above into your file, run the script in the usual way, and a PNG image should appear: a blue rectangle on a yellow background, like this:

Part 4: Now it's your turn

Take a copy of circle.html; do not edit it. It allows the user to enter the diameter of a circle.

You must write circle.php, which outputs a 200 by 200 pixel PNG containing a circle that has the specified diameter. The border of the circle should be red on a yellow background. The user's input must be checked ('validated') to ensure that it is an integer between 10 and 100 inclusive. Place an error message into the PNG if the user's input is invalid.

For example, if the user enters a diameter of 50, your script will produce a PNG like this:

But if the user enters 101, s/he will see a PNG like this:

Some notes:

• Validation: use my library of functions.
• Use the built-in function imageellipse for drawing circles.
• Use the built-in function imagestring for outputting text into an image.

Part 5: Flags of the world

Take a copy of flag.html; do not modify it:

You must write flag.php, which draws a flag and outputs it as a PNG. Here are some details:

• The user enters the width of the flag.
• The height is always 2/3 of the width, rounded.
• Like the Irish flag, the flag that you draw will have three equal-width rectangles. The user has 9 textfields so that s/he can enter the RGB values for each rectangle.

  For example, suppose the user enters 200 for the width and the following nine numbers for the RGBs: (0,85,164), (255,255,255), (250,60,50). Then this is what your program should draw:

  

• Use imagefilledrectangle for drawing the rectangles and filling them with colour. Its parameters are the same as those for imagerectangle.
• If there are errors in the user's input, output a 240px by 160px PNG image that contains an error message, like this:

  

• (Note that a neat solution uses a for-loop.)

Part 6: Lines under my eyes

Take a copy of line.html; do not edit it. It allows the user to enter two integers, referred to as m (an integer between 10 and 30 inc.) and n (an even integer between 2 and 20 inc.).

You must write line.php. If the user's input validates, then it outputs a PNG whose width and height are both m × n + 1. The image contains n pairs of red lines. Each pair contains either a horizontal or vertical line of length m and then a diagonal. Hard to explain, but easy to see by running mine:

Some notes:

• One solution is to start at the top left. Draw a line of length m either horizontally or vertically as appropriate. Then draw a diagonal line. Do this n times. (The very last time, the diagonal doesn't show.)
• PHP's built-in function for drawing lines is: imageline.

Deadline for Lab 14: 1pm, Tuesday 12th February.

If you have named your files and folders correctly, your work will be collected automatically at that time by my software.

Challenge exercise

Remember that challenge exercises are always optional. They do not form part of your year's work and they are not worth any marks. They are designed for those students who finish the main exercise quickly and easily, and wish to explore further.

Take a copy of darts.html; do not edit it. It allows the user to enter how wide (and high) she wishes her image to be.

You must write darts.php, which draws a darts board and outputs it as a PNG of the specified size.

Leave both files in your lab14 folder, and I will take a look at them.