|
|
| Line 2: |
Line 2: |
| | | | |
| | == In-class exercises == | | == 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) ===
| |
| − |
| |
| − | [[Web security]] warning: be sure to use [[PHP htmlspecialchars function]].
| |
| − |
| |
| − | 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 == | | == 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) ===
| |
| − |
| |
| − | [[Web security]] warning: be sure to use [[PHP htmlspecialchars function]].
| |
| − |
| |
| − | 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>
| |
| − |
| |
| − | === Website wireframe ===
| |
| − |
| |
| − | Create three [[Website wireframe|website wireframes]] for the [[home page]] of your [[Project (MGDP2060)|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)]]
| |
| | | | |
| | [[Category:Web Design and Development III (MGDP2060)]] | | [[Category:Web Design and Development III (MGDP2060)]] |
