|
|
| Line 1: |
Line 1: |
| | This article contains exercises for [[Week Three (MGDP2060)|week three]] of [[Web Design and Development III (MGDP2060)]]. | | This article contains exercises for [[Week Three (MGDP2060)|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 <code>time</code>.
| + | |
| − | | + | |
| − | In this folder, create a new document named <code>index.php</code>.
| + | |
| − | | + | |
| − | * 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 [[http://code.karljones.com/php/time/ example]].
| + | |
| − | | + | |
| − | === Web form exercise (using get) ===
| + | |
| − | | + | |
| − | In your website root folder, create a new folder named <code>web-form-get</code>.
| + | |
| − | | + | |
| − | * Note the naming convention: all lower case, words separated by hyphens.
| + | |
| − | | + | |
| − | In this folder, create a document named <code>index.html</code>.
| + | |
| − | | + | |
| − | * 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]].
| + | |
| − | | + | |
| − | | + | |
| − | <pre>
| + | |
| − | <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>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | 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.
| + | |
| − | | + | |
| − | The PHP for the results.php page:
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <?php
| + | |
| − | echo htmlspecialchars ( $_GET['firstname'] ) ;
| + | |
| − | ?>
| + | |
| − | <hr />
| + | |
| − | <?php
| + | |
| − | echo htmlspecialchars ( $_GET['email'] ) ;
| + | |
| − | ?>
| + | |
| − |
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | Warning - be sure to use '''htmlspecialchars'''.
| + | |
| − | | + | |
| − | == For next week ==
| + | |
| − | | + | |
| − | === PHP date exercise ===
| + | |
| − | | + | |
| − | In your website root folder, create a new folder named <code>date</code>.
| + | |
| − | | + | |
| − | In this folder, create a new document named <code>index.php</code>.
| + | |
| − | | + | |
| − | * 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 <code>web-form-post</code>.
| + | |
| − | | + | |
| − | * Note the naming convention: all lower case, words separated by hyphens.
| + | |
| − | | + | |
| − | In this folder, create a document named <code>index.html</code>.
| + | |
| − | | + | |
| − | * 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]].
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <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>
| + | |
| − | </pre>
| + | |
| − | 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.
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <?php
| + | |
| − | echo htmlspecialchars ( $_POST['firstname'] ) ;
| + | |
| − | ?>
| + | |
| − | <hr />
| + | |
| − | <?php
| + | |
| − | echo htmlspecialchars ( $_POST['email'] ) ;
| + | |
| − | ?>
| + | |
| − |
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | Warning - be sure to use htmlspecialchars.
| + | |
| − | | + | |
| − | === Website wireframe ===
| + | |
| − | | + | |
| − | Create three [[Website wireframe|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 == | | == See also == |
| | | | |
| | * [[Web Design and Development III (MGDP2060)]] | | * [[Web Design and Development III (MGDP2060)]] |
