Week Three Exercises (MGDP2060)

This article contains exercises for week three of Web Design and Development III (MGDP2060).

In-class exercises

PHP time exercise

In your website root folder, create a new folder named time.

In this folder, create a new document named index.php.

• Note the naming conventions: "time" and "index.php" are lower-case.

Use the same CSS as you did on your home page.

Set the page title appropriately.

Enter your name, and identify the exercise, "Time Exercise" or whatever

• Use consistent styles and design across pages in your site

Demonstrate the time function, similar to the [example].

Web form exercise (using get)

In your website root folder, create a new folder named web-form-get.

• Note the naming convention: all lower case, words separated by hyphens.

In this folder, create a document named index.html.

• Consistent styles, set page title appropriately, enter your name, identify the exercise
  • This is standard procedure for all web pages

Create a web form with two inputs of your choice.

Use the get method.

 	<form action="results.php" method="get">
	Name: <input type="text" name="firstname"><br />
	E-mail: <input type="text" name="email"><br />
	<input type="submit" />
	</form>	

In the same folder, create a document named results.php

• Standard web page procedure, consistent styles etc.

Use PHP code to display the information submitted via the web form.

The PHP for the results.php page:

	<?php		
		echo htmlspecialchars ( $_GET['firstname'] ) ;
	?>  
<hr />
	<?php		
		echo htmlspecialchars ( $_GET['email'] ) ;
	?>  
	

Warning - be sure to use htmlspecialchars.

For next week

PHP date exercise

In your website root folder, create a new folder named date.

In this folder, create a new document named index.php.

• Note the naming conventions: "date" and "index.php" are lower-case.

Use the same CSS as you did on your home page.

Set the page title appropriately.

Enter your name, and identify the exercise, "Date exercise" or whatever

• Use consistent styles and design across pages in your site

Demonstrate the date function.

Web form exercise (using post)

In your website root folder, create a new folder named web-form-post.

• Note the naming convention: all lower case, words separated by hyphens.

In this folder, create a document named index.html.

• Standard styles, etc.

Create a web form with two inputs:

• Text input of your choice
• List or menu with three options (user selects one)

Use the post method.

<form action="results.php" method="post">
	Name: <input type="text" name="firstname"><br />
	E-mail: <input type="text" name="email"><br />
	<input type="submit" />
	</form>	

In the same folder, create a document named </code>results.php</code>

• Standard web page procedure, consistent styles etc.

Use PHP code to display the information submitted via the web form.

	<?php		
		echo htmlspecialchars ( $_POST['firstname'] ) ;
	?>  
<hr />
	<?php		
		echo htmlspecialchars ( $_POST['email'] ) ;
	?>  
	

Warning - be sure to use htmlspecialchars.

Website wireframe

Create three website wireframes for the home page of your project.

• Project is design of your choice, using responsive web design, implemented as a WordPress theme.

Can be created in any program, or drawn by hand and scanned.

Final result, image files showing your three webframes.

Create your wireframe with responsive web design in mind.

The three wireframes are for three viewing sizes:

• Desktop - typically three columns
• Table - typically two columns
• Mobile phone, smart phone - typically one column.

See also

• Web Design and Development III (MGDP2060)