Scribd
Upload
40 views79 pages

SRC 9 M

The documents demonstrate various ways to style HTML forms using CSS, including: 1) Using the style attribute on the body tag to center the form (document 1). 2) Using a style tag in the head to center the body (document 2). 3) Linking an external CSS stylesheet using the link tag (document 3). 4) Using CSS classes, ids, and other selectors to style different parts of the form (document 4). The documents provide examples of registration forms for intramural sports, demonstrating the use of various form controls like text inputs, checkboxes, radio buttons, and select menus. Styling is gradually made more sophisticated, moving from inline styles to external styles

Uploaded by

Ahmad Rashed Salimi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views79 pages

SRC 9 M

The documents demonstrate various ways to style HTML forms using CSS, including: 1) Using the style attribute on the body tag to center the form (document 1). 2) Using a style tag in the head to center the body (document 2). 3) Linking an external CSS stylesheet using the link tag (document 3). 4) Using CSS classes, ids, and other selectors to style different parts of the form (document 4). The documents provide examples of registration forms for intramural sports, demonstrating the use of various form controls like text inputs, checkboxes, radio buttons, and select menus. Styling is gradually made more sophisticated, moving from inline styles to external styles

Uploaded by

Ahmad Rashed Salimi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 79

lectures/9/m/src9m/css/search-0.

html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. search-0.html
6.
7. David J. Malan
8. [email protected]
9.
10. Demonstrates form submission.
11.
12. -->
13.
14. <html>
15. <head>
16. <title>CS50 Search</title>
17. </head>
18. <body>
19. <h1>CS50 Search</h1>
20. <form action="https://www.google.com/search" method="get">
21. <input name="q" type="text"/>
22. <br/>
23. <input type="submit" value="CS50 Search"/>
24. </form>
25. </body>
26. </html>
lectures/9/m/src9m/css/search-1.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. search-1.html
6.
7. David J. Malan
8. [email protected]
9.
10. Demonstrates style attribute.
11.
12. -->
13.
14. <html>
15. <head>
16. <title>CS50 Search</title>
17. </head>
18. <body style="text-align: center">
19. <h1>CS50 Search</h1>
20. <form action="https://www.google.com/search" method="get">
21. <input name="q" type="text"/>
22. <br/>
23. <input type="submit" value="CS50 Search"/>
24. </form>
25. </body>
26. </html>
lectures/9/m/src9m/css/search-2.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. search-2.html
6.
7. David J. Malan
8. [email protected]
9.
10. Demonstrates style tag.
11.
12. -->
13.
14. <html>
15. <head>
16. <style>
17.
18. body
19. {
20. text-align: center;
21. }
22.
23. </style>
24. <title>CS50 Search</title>
25. </head>
26. <body>
27. <h1>CS50 Search</h1>
28. <form action="https://www.google.com/search" method="get">
29. <input name="q" type="text"/>
30. <br/>
31. <input type="submit" value="CS50 Search"/>
32. </form>
33. </body>
34. </html>
lectures/9/m/src9m/css/search-3.css

1. body
2. {
3. text-align: center;
4. }
lectures/9/m/src9m/css/search-3.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. search-3.html
6.
7. David J. Malan
8. [email protected]
9.
10. Demonstrates link tag.
11.
12. -->
13.
14. <html>
15. <head>
16. <link href="search-3.css" rel="stylesheet"/>
17. <title>CS50 Search</title>
18. </head>
19. <body>
20. <h1>CS50 Search</h1>
21. <form action="https://www.google.com/search" method="get">
22. <input name="q" type="text"/>
23. <br/>
24. <input type="submit" value="CS50 Search"/>
25. </form>
26. </body>
27. </html>
lectures/9/m/src9m/css/search-4.html

1. <!--
2.
3. search4.html
4.
5. David J. Malan
6. [email protected]
7.
8. Demonstrates img tag (and block-level elements).
9.
10. -->
11.
12. <!DOCTYPE html>
13.
14. <html>
15. <head>
16. <style>
17.
18. #header
19. {
20. text-align: center;
21. }
22.
23. #content
24. {
25. text-align: center;
26. }
27.
28. #content input
29. {
30. margin: 5px;
31. }
32.
33. #footer
34. {
35. font-size: smaller;
36. font-weight: bold;
37. margin: 20px;
38. text-align: center;
39. }
40.
41. </style>
42. <title>CS50 Search</title>
43. </head>
44. <body>
45. <div id="header">
46. <img alt="CS50 Search" src="logo.gif"/>
47. </div>
48. <div id="content">
lectures/9/m/src9m/css/search-4.html

49. <form action="https://www.google.com/search" method="get">


50. <input name="q" type="text"/>
51. <br/>
52. <input type="submit" value="CS50 Search"/>
53. </form>
54. </div>
55. <div id="footer">
56. Copyright &#169; CS50
57. </div>
58. </body>
59. </html>
lectures/9/m/src9m/froshims/froshims-0.php

1. <?php
2.
3. /**
4. * froshims-0.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Implements a registration form for Frosh IMs.
10. * Submits to register-0.php.
11. */
12.
13. ?>
14.
15. <!DOCTYPE html>
16.
17. <html>
18. <head>
19. <title>Frosh IMs</title>
20. </head>
21. <body style="text-align: center;">
22. <h1>Register for Frosh IMs</h1>
23. <form action="register-0.php" method="post">
24. Name: <input name="name" type="text"/>
25. <br/>
26. <input name="captain" type="checkbox"/> Captain?
27. <br/>
28. <input name="gender" type="radio" value="F"/> Female
29. <input name="gender" type="radio" value="M"/> Male
30. <br/>
31. Dorm:
32. <select name="dorm">
33. <option value=""></option>
34. <option value="Apley Court">Apley Court</option>
35. <option value="Canaday">Canaday</option>
36. <option value="Grays">Grays</option>
37. <option value="Greenough">Greenough</option>
38. <option value="Hollis">Hollis</option>
39. <option value="Holworthy">Holworthy</option>
40. <option value="Hurlbut">Hurlbut</option>
41. <option value="Lionel">Lionel</option>
42. <option value="Matthews">Matthews</option>
43. <option value="Mower">Mower</option>
44. <option value="Pennypacker">Pennypacker</option>
45. <option value="Stoughton">Stoughton</option>
46. <option value="Straus">Straus</option>
47. <option value="Thayer">Thayer</option>
48. <option value="Weld">Weld</option>
lectures/9/m/src9m/froshims/froshims-0.php

49. <option value="Wigglesworth">Wigglesworth</option>


50. </select>
51. <br/>
52. <input type="submit" value="Register"/>
53. </form>
54. </body>
55. </html>
lectures/9/m/src9m/froshims/froshims-1.php

1. <?php
2.
3. /**
4. * froshims-1.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Implements a registration form for Frosh IMs.
10. * Submits to register-1.php.
11. *
12. * Demonstrates Bootstrap (http://getbootstrap.com/).
13. */
14.
15. ?>
16.
17. <!DOCTYPE html>
18.
19. <html>
20. <head>
21. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
22. <title>Frosh IMs</title>
23. </head>
24. <body style="margin: 20px;">
25. <h1>Register for Frosh IMs</h1>
26. <form action="register-1.php" method="post">
27. <fieldset>
28. <label>Name</label>
29. <input name="name" type="text"/>
30. <label class="checkbox">
31. <input name="captain" type="checkbox"/> Captain?
32. </label>
33. <label class="radio">
34. <input name="gender" type="radio" value="F"/> Female
35. </label>
36. <label class="radio">
37. <input name="gender" type="radio" value="M"/> Male
38. </label>
39. <label>
40. <select name="dorm">
41. <option value=""></option>
42. <option value="Apley Court">Apley Court</option>
43. <option value="Canaday">Canaday</option>
44. <option value="Grays">Grays</option>
45. <option value="Greenough">Greenough</option>
46. <option value="Hollis">Hollis</option>
47. <option value="Holworthy">Holworthy</option>
48. <option value="Hurlbut">Hurlbut</option>
lectures/9/m/src9m/froshims/froshims-1.php

49. <option value="Lionel">Lionel</option>


50. <option value="Matthews">Matthews</option>
51. <option value="Mower">Mower</option>
52. <option value="Pennypacker">Pennypacker</option>
53. <option value="Stoughton">Stoughton</option>
54. <option value="Straus">Straus</option>
55. <option value="Thayer">Thayer</option>
56. <option value="Weld">Weld</option>
57. <option value="Wigglesworth">Wigglesworth</option>
58. </select>
59. </label>
60. <button class="btn btn-default" type="submit">Register</button>
61. </fieldset>
62. </form>
63. </body>
64. </html>
lectures/9/m/src9m/froshims/froshims-2.php

1. <?php
2.
3. /**
4. * froshims-2.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Implements a registration form for Frosh IMs.
10. * Submits to register-2.php.
11. */
12.
13. ?>
14.
15. <!DOCTYPE html>
16.
17. <html>
18. <head>
19. <title>Frosh IMs</title>
20. </head>
21. <body style="text-align: center;">
22. <h1>Register for Frosh IMs</h1>
23. <form action="register-2.php" method="post">
24. Name: <input name="name" type="text"/>
25. <br/>
26. <input name="captain" type="checkbox"/> Captain?
27. <br/>
28. <input name="gender" type="radio" value="F"/> Female
29. <input name="gender" type="radio" value="M"/> Male
30. <br/>
31. Dorm:
32. <select name="dorm">
33. <option value=""></option>
34. <option value="Apley Court">Apley Court</option>
35. <option value="Canaday">Canaday</option>
36. <option value="Grays">Grays</option>
37. <option value="Greenough">Greenough</option>
38. <option value="Hollis">Hollis</option>
39. <option value="Holworthy">Holworthy</option>
40. <option value="Hurlbut">Hurlbut</option>
41. <option value="Lionel">Lionel</option>
42. <option value="Matthews">Matthews</option>
43. <option value="Mower">Mower</option>
44. <option value="Pennypacker">Pennypacker</option>
45. <option value="Stoughton">Stoughton</option>
46. <option value="Straus">Straus</option>
47. <option value="Thayer">Thayer</option>
48. <option value="Weld">Weld</option>
lectures/9/m/src9m/froshims/froshims-2.php

49. <option value="Wigglesworth">Wigglesworth</option>


50. </select>
51. <br/>
52. <input type="submit" value="Register"/>
53. </form>
54. </body>
55. </html>
lectures/9/m/src9m/froshims/froshims-3.php

1. <?php
2.
3. /**
4. * froshims-3.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Implements a registration form for Frosh IMs.
10. * Submits to register-3.php.
11. */
12.
13. ?>
14.
15. <!DOCTYPE html>
16.
17. <html>
18. <head>
19. <title>Frosh IMs</title>
20. </head>
21. <body style="text-align: center;">
22. <h1>Register for Frosh IMs</h1>
23. <form action="register-3.php" method="post">
24. Name: <input name="name" type="text"/>
25. <br/>
26. <input name="captain" type="checkbox"/> Captain?
27. <br/>
28. <input name="gender" type="radio" value="F"/> Female
29. <input name="gender" type="radio" value="M"/> Male
30. <br/>
31. Dorm:
32. <select name="dorm">
33. <option value=""></option>
34. <option value="Apley Court">Apley Court</option>
35. <option value="Canaday">Canaday</option>
36. <option value="Grays">Grays</option>
37. <option value="Greenough">Greenough</option>
38. <option value="Hollis">Hollis</option>
39. <option value="Holworthy">Holworthy</option>
40. <option value="Hurlbut">Hurlbut</option>
41. <option value="Lionel">Lionel</option>
42. <option value="Matthews">Matthews</option>
43. <option value="Mower">Mower</option>
44. <option value="Pennypacker">Pennypacker</option>
45. <option value="Stoughton">Stoughton</option>
46. <option value="Straus">Straus</option>
47. <option value="Thayer">Thayer</option>
48. <option value="Weld">Weld</option>
lectures/9/m/src9m/froshims/froshims-3.php

49. <option value="Wigglesworth">Wigglesworth</option>


50. </select>
51. <br/>
52. <input type="submit" value="Register"/>
53. </form>
54. </body>
55. </html>
lectures/9/m/src9m/froshims/register-0.php

1. <?php
2.
3. /**
4. * register-0.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Dumps contents of $_POST.
10. */
11.
12. ?>
13.
14. <!DOCTYPE html>
15.
16. <html>
17. <head>
18. <title>Frosh IMs</title>
19. </head>
20. <body>
21. <pre>
22. <?php print_r($_POST); ?>
23. </pre>
24. </body>
25. </html>
lectures/9/m/src9m/froshims/register-1.php

1. <?php
2.
3. /**
4. * register-1.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Implements a registration form for Frosh IMs. Redirects
10. * user to froshims-1.php upon error.
11. */
12.
13. // validate submission
14. if (empty($_POST["name"]) || empty($_POST["gender"]) || empty($_POST["dorm"]))
15. {
16. header("Location: http://localhost/src9m/froshims/froshims-1.php");
17. exit;
18. }
19.
20. ?>
21.
22. <!DOCTYPE html>
23.
24. <html>
25. <head>
26. <title>Frosh IMs</title>
27. </head>
28. <body>
29. You are registered! (Well, not really.)
30. </body>
31. </html>
lectures/9/m/src9m/froshims/register-2.php

1. <?php
2.
3. /**
4. * register-2.php
5. *
6. * Computer Science 50
7. * David J. Malan
8. *
9. * Implements a registration form for Frosh IMs. Informs user of
10. * any errors.
11. */
12.
13. ?>
14.
15. <!DOCTYPE html>
16.
17. <html>
18. <head>
19. <title>Frosh IMs</title>
20. </head>
21. <body>
22. <?php if (empty($_POST["name"]) || empty($_POST["gender"]) || empty($_POST["dorm"])): ?>
23. You must provide your name, gender, and dorm! Go <a href="froshims-2.php">back</a>.
24. <?php else: ?>
25. You are registered! (Well, not really.)
26. <?php endif ?>
27. </body>
28. </html>
lectures/9/m/src9m/froshims/register-3.php

1. <?php
2.
3. /**
4. * register-3.php
5. *
6. * Computer Science 50
7. * David J. Malan
8. *
9. * Implements a registration form for Frosh IMs. Reports registration
10. * via email. Redirects user to froshims-3.php upon error.
11. */
12.
13. // require PHPMailer
14. require("PHPMailer/class.phpmailer.php");
15.
16. // validate submission
17. if (!empty($_POST["name"]) && !empty($_POST["gender"]) && !empty($_POST["dorm"]))
18. {
19. // instantiate mailer
20. $mail = new PHPMailer();
21.
22. // use SMTP
23. $mail->IsSMTP();
24. $mail->Host = "smtp.fas.harvard.edu";
25.
26. // set From:
27. $mail->SetFrom("[email protected]");
28.
29. // set To:
30. $mail->AddAddress("[email protected]");
31.
32. // set Subject:
33. $mail->Subject = "registration";
34.
35. // set body
36. $mail->Body =
37. "This person just registered:\n\n" .
38. "Name: " . $_POST["name"] . "\n" .
39. "Captain: " . $_POST["captain"] . "\n" .
40. "Gender: " . $_POST["gender"] . "\n" .
41. "Dorm: " . $_POST["dorm"];
42.
43. // send mail
44. if ($mail->Send() == false)
45. {
46. die($mail->ErrInfo);
47. }
48. }
lectures/9/m/src9m/froshims/register-3.php

49. else
50. {
51. header("Location: http://localhost/src9m/froshims/froshims-3.php");
52. exit;
53. }
54. ?>
55.
56. <!DOCTYPE html>
57.
58. <html>
59. <head>
60. <title>Frosh IMs</title>
61. </head>
62. <body>
63. You are registered! (Really.)
64. </body>
65. </html>
lectures/9/m/src9m/html/css-0.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. css-0.html
6.
7. David J. Malan
8. [email protected]
9.
10. Implements a (simple) home page for John Harvard.
11.
12. Demonstrates inline CSS.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>css-0</title>
19. </head>
20. <body>
21. <div style="text-align: center;">
22. <div style="font-size: 36px; font-weight: bold;">
23. John Harvard
24. </div>
25. <div style="font-size: 24px;">
26. Welcome to my home page!
27. </div>
28. <div style="font-size: 12px;">
29. Copyright &#169; John Harvard
30. </div>
31. </div>
32. </body>
33. </html>
lectures/9/m/src9m/html/css-1.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. css-1.html
6.
7. David J. Malan
8. [email protected]
9.
10. Implements a (simple) home page for John Harvard.
11.
12. Demonstrates CSS selectors.
13.
14. -->
15.
16. <html>
17. <head>
18. <style>
19.
20. body
21. {
22. text-align: center;
23. }
24.
25. #top
26. {
27. font-size: 36px;
28. font-weight: bold;
29. }
30.
31. #middle
32. {
33. font-size: 24px;
34. }
35.
36. #bottom
37. {
38. font-size: 12px;
39. }
40.
41. </style>
42. <title>css-1</title>
43. </head>
44. <body>
45. <div id="top">
46. John Harvard
47. </div>
48. <div id="middle">
lectures/9/m/src9m/html/css-1.html

49. Welcome to my home page!


50. </div>
51. <div id="bottom">
52. Copyright &#169; John Harvard
53. </div>
54. </body>
55. </html>
lectures/9/m/src9m/html/css-2.css

1. body
2. {
3. text-align: center;
4. }
5.
6. #top
7. {
8. font-size: 36px;
9. font-weight: bold;
10. }
11.
12. #middle
13. {
14. font-size: 24px;
15. }
16.
17. #bottom
18. {
19. font-size: 12px;
20. }
lectures/9/m/src9m/html/css-2.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. css-2.html
6.
7. David J. Malan
8. [email protected]
9.
10. Implements a (simple) home page for John Harvard.
11.
12. Demonstrates external stylesheets.
13.
14. -->
15.
16. <html>
17. <head>
18. <link href="css-2.css" rel="stylesheet"/>
19. <title>css-2</title>
20. </head>
21. <body>
22. <div id="top">
23. John Harvard
24. </div>
25. <div id="middle">
26. Welcome to my home page!
27. </div>
28. <div id="bottom">
29. Copyright &#169; John Harvard
30. </div>
31. </body>
32. </html>
lectures/9/m/src9m/html/headings.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. headings.html
6.
7. David J. Malan
8. [email protected]
9.
10. Demonstrates headings (for chapters, sections, subsections, etc.).
11.
12. -->
13.
14. <html>
15. <head>
16. <title>headings</title>
17. </head>
18. <body>
19. <h1>One</h1>
20. <h2>Two</h2>
21. <h3>Three</h3>
22. <h4>Four</h4>
23. <h5>Five</h5>
24. <h6>Six</h6>
25. </body>
26. </html>
lectures/9/m/src9m/html/hello.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. hello.html
6.
7. David J. Malan
8. [email protected]
9.
10. Says hello to the world (wide web).
11.
12. -->
13.
14. <html>
15. <head>
16. <title>hello</title>
17. </head>
18. <body>
19. hello, world
20. </body>
21. </html>
lectures/9/m/src9m/html/image.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. image.html
6.
7. David J. Malan
8. [email protected]
9.
10. This is Grumpy Cat.
11.
12. Demonstrates images.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>image</title>
19. </head>
20. <body>
21. <!-- http://knowyourmeme.com/memes/grumpy-cat -->
22. <img alt="Grumpy Cat" src="cat.jpg"/>
23. </body>
24. </html>
lectures/9/m/src9m/html/link.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. link.html
6.
7. David J. Malan
8. [email protected]
9.
10. This is CS50.
11.
12. Demonstrates hyperlinks.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>link</title>
19. </head>
20. <body>
21. This is <a href="https://www.cs50.net/">CS50</a>.
22. </body>
23. </html>
lectures/9/m/src9m/html/list.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. list.html
6.
7. David J. Malan
8. [email protected]
9.
10. Displays houses in the Quad.
11.
12. Demonstrates (unordered) lists.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>list</title>
19. </head>
20. <body>
21. <ul>
22. <li>Cabot</li>
23. <li>Currier</li>
24. <li>Pforzheimer</li>
25. </ul>
26. </body>
27. </html>
lectures/9/m/src9m/html/paragraphs.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. paragraphs.html
6.
7. David J. Malan
8. [email protected]
9.
10. Displays some text.
11.
12. Demonstrates paragraphs.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>paragraphs</title>
19. </head>
20. <body>
21. <p>
22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tincidunt augue. Duis imperdiet, justo ac iaculis rhoncus, erat
elit dignissim mi, eu interdum velit sapien nec risus. Praesent ullamcorper nibh at volutpat aliquam. Nam sed aliquam risus. Nulla rutrum nunc
augue, in varius lacus commodo in. Ut tincidunt nisi a convallis consequat. Fusce sed pulvinar nulla.
23. </p>
24. <p>
25. Ut tempus rutrum arcu eget condimentum. Morbi elit ipsum, gravida faucibus sodales quis, varius at mi. Suspendisse id viverra
lectus. Etiam dignissim interdum felis quis faucibus. Integer et vestibulum eros, non malesuada felis. Pellentesque porttitor eleifend
laoreet. Duis sit amet pellentesque nisi. Aenean ligula mauris, volutpat sed luctus in, consectetur id turpis. Phasellus mattis dui ac metus
blandit volutpat. Donec lorem arcu, sollicitudin in risus a, imperdiet condimentum augue. Ut at facilisis mauris. Curabitur sagittis augue in
dictum gravida. Integer sed sem sed justo tempus ultrices eu non magna. Phasellus semper eros erat, a posuere nisi auctor et. Praesent
dignissim orci aliquam laoreet scelerisque.
26. </p>
27. <p>
28. Mauris eget erat arcu. Maecenas ac ante vel ipsum bibendum varius. Nunc tristique nulla eget tincidunt molestie. Morbi sed mauris
eu lectus vehicula iaculis ac id lacus. Etiam sit amet magna massa. In pulvinar sapien ac mi ultrices, quis consequat nisl hendrerit. Aliquam
pharetra nec sem non vehicula. In et risus leo. Ut tristique ornare nisl et lacinia.
29. </p>
30. </body>
31. </html>
lectures/9/m/src9m/html/table.html

1. <!DOCTYPE html>
2.
3. <!--
4.
5. table.html
6.
7. David J. Malan
8. [email protected]
9.
10. Resembles a phone.
11.
12. Demonstrates tables.
13.
14. -->
15.
16. <html>
17. <head>
18. <title>table</title>
19. </head>
20. <body>
21. <table border="1">
22. <tr>
23. <td>1</td>
24. <td>2</td>
25. <td>3</td>
26. </tr>
27. <tr>
28. <td>4</td>
29. <td>5</td>
30. <td>6</td>
31. </tr>
32. <tr>
33. <td>7</td>
34. <td>8</td>
35. <td>9</td>
36. </tr>
37. <tr>
38. <td>*</td>
39. <td>0</td>
40. <td>#</td>
41. </tr>
42. </table>
43. </body>
44. </html>
lectures/9/m/src9m/mvc/0/index.php

1. <?php
2.
3. /**
4. * index.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * A home page for the course.
10. */
11.
12. ?>
13.
14. <!DOCTYPE html>
15.
16. <html>
17. <head>
18. <title>CS50</title>
19. </head>
20. <body>
21. <h1>CS50</h1>
22. <ul>
23. <li><a href="lectures.php">Lectures</a></li>
24. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
25. </ul>
26. </body>
27. </html>
lectures/9/m/src9m/mvc/0/lectures.php

1. <?php
2.
3. /**
4. * lectures.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Links to lectures.
10. */
11.
12. ?>
13.
14. <!DOCTYPE html>
15.
16. <html>
17. <head>
18. <title>Lectures</title>
19. </head>
20. <body>
21. <h1>Lectures</h1>
22. <ul>
23. <li><a href="week0.php">Week 0</a></li>
24. <li><a href="week1.php">Week 1</a></li>
25. </ul>
26. </body>
27. </html>
lectures/9/m/src9m/mvc/0/README

1. mvc/0/README
2.
3. David J. Malan
4. [email protected]
5.
6. index.php - home page for course
7. lectures.php - a list of weeks
8. week0.php - a week
9. week1.php - a week
lectures/9/m/src9m/mvc/0/week0.php

1. <?php
2.
3. /**
4. * week0.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Represents Week 0.
10. */
11.
12. ?>
13.
14. <!DOCTYPE html>
15.
16. <html>
17. <head>
18. <title>Week 0</title>
19. </head>
20. <body>
21. <h1>Week 0</h1>
22. <ul>
23. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wednesday</a></li>
24. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
25. </ul>
26. </body>
27. </html>
lectures/9/m/src9m/mvc/0/week1.php

1. <?php
2.
3. /**
4. * week1.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Represents Week 1.
10. */
11.
12. ?>
13.
14. <!DOCTYPE html>
15.
16. <html>
17. <head>
18. <title>Week 1</title>
19. </head>
20. <body>
21. <h1>Week 1</h1>
22. <ul>
23. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/m/week1m.pdf">Monday</a></li>
24. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/w/week1w.pdf">Wednesday</a></li>
25. </ul>
26. </body>
27. </html>
lectures/9/m/src9m/mvc/1/footer.php

1. </body>
2. </html>
lectures/9/m/src9m/mvc/1/header.php

1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title>CS50</title>
6. </head>
7. <body>
8. <h1>CS50</h1>
lectures/9/m/src9m/mvc/1/index.php

1. <?php require("header.php"); ?>


2.
3. <ul>
4. <li><a href="lectures.php">Lectures</a></li>
5. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
6. </ul>
7.
8. <?php require("footer.php"); ?>
lectures/9/m/src9m/mvc/1/lectures.php

1. <?php require("header.php"); ?>


2.
3. <ul>
4. <li><a href="week0.php">Week 0</a></li>
5. <li><a href="week1.php">Week 1</a></li>
6. </ul>
7.
8. <?php require("footer.php"); ?>
lectures/9/m/src9m/mvc/1/README

1. mvc/1/README
2.
3. David J. Malan
4. [email protected]
5.
6. Improves upon mvc/0 by factoring out pages' header and footer.
7.
8. footer.php - pages' footer
9. header.php - pages' header
10. index.php - home page for course
11. lectures.php - a list of weeks
12. week0.php - a week
13. week1.php - a week
lectures/9/m/src9m/mvc/1/week0.php

1. <?php require("header.php"); ?>


2.
3. <ul>
4. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wednesday</a></li>
5. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
6. </ul>
7.
8. <?php require("footer.php"); ?>
lectures/9/m/src9m/mvc/1/week1.php

1. <?php require("header.php"); ?>


2.
3. <ul>
4. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/m/week1m.pdf">Monday</a></li>
5. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/w/week1w.pdf">Wednesday</a></li>
6. </ul>
7.
8. <?php require("footer.php"); ?>
lectures/9/m/src9m/mvc/2/footer.php

1. </body>
2. </html>
lectures/9/m/src9m/mvc/2/header.php

1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title><?= htmlspecialchars($title) ?></title>
6. </head>
7. <body>
8. <h1><?= htmlspecialchars($title) ?></h1>
lectures/9/m/src9m/mvc/2/helpers.php

1. <?php
2.
3. /**
4. * Renders footer.
5. */
6. function renderFooter($data = [])
7. {
8. extract($data);
9. require("footer.php");
10. }
11.
12. /**
13. * Renders header.
14. */
15. function renderHeader($data = [])
16. {
17. extract($data);
18. require("header.php");
19. }
20.
21. ?>
lectures/9/m/src9m/mvc/2/index.php

1. <?php require("helpers.php"); ?>


2.
3. <?php renderHeader(["title" => "CS50"]); ?>
4.
5. <ul>
6. <li><a href="lectures.php">Lectures</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
8. </ul>
9.
10. <?php renderFooter(); ?>
lectures/9/m/src9m/mvc/2/lectures.php

1. <?php require("helpers.php"); ?>


2.
3. <?php renderHeader(["title" => "Lectures"]); ?>
4.
5. <ul>
6. <li><a href="week0.php">Week 0</a></li>
7. <li><a href="week1.php">Week 1</a></li>
8. </ul>
9.
10. <?php renderFooter(); ?>
lectures/9/m/src9m/mvc/2/README

1. mvc/2/README
2.
3. David J. Malan
4. [email protected]
5.
6. Improves upon mvc/1 by wrapping header and footer with a parameterized function.
7.
8. footer.php - pages' footer
9. header.php - pages' header
10. helpers.php - helper functions
11. index.php - home page for course
12. lectures.php - a list of weeks
13. week0.php - a week
14. week1.php - a week
lectures/9/m/src9m/mvc/2/week0.php

1. <?php require("helpers.php"); ?>


2.
3. <?php renderHeader(["title" => "Week 0"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wednesday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
8. </ul>
9.
10. <?php renderFooter(); ?>
lectures/9/m/src9m/mvc/2/week1.php

1. <?php require("helpers.php"); ?>


2.
3. <?php renderHeader("title" => "Week 1"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/m/week1m.pdf">Monday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/w/week1w.pdf">Wednesday</a></li>
8. </ul>
9.
10. <?php renderFooter(); ?>
lectures/9/m/src9m/mvc/3/footer.php

1. </body>
2. </html>
lectures/9/m/src9m/mvc/3/header.php

1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title><?= htmlspecialchars($title) ?></title>
6. </head>
7. <body>
8. <h1><?= htmlspecialchars($title) ?></h1>
lectures/9/m/src9m/mvc/3/helpers.php

1. <?php
2.
3. /**
4. * Renders template.
5. */
6. function render($template, $data = [])
7. {
8. $path = $template . ".php";
9. if (file_exists($path))
10. {
11. extract($data);
12. require($path);
13. }
14. }
15.
16. ?>
lectures/9/m/src9m/mvc/3/index.php

1. <?php require("helpers.php"); ?>


2.
3. <?php render("header", ["title" => "CS50"]); ?>
4.
5. <ul>
6. <li><a href="lectures.php">Lectures</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/3/lectures.php

1. <?php require("helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Lectures"]); ?>
4.
5. <ul>
6. <li><a href="week0.php">Week 0</a></li>
7. <li><a href="week1.php">Week 1</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/3/README

1. mvc/3/README
2.
3. David J. Malan
4. [email protected]
5.
6. Improves upon mvc/2 by generalizing header and footer as templates.
7.
8. footer.php - pages' footer
9. header.php - pages' header
10. helpers.php - helper functions
11. index.php - home page for course
12. lectures.php - a list of weeks
13. week0.php - a week
14. week1.php - a week
lectures/9/m/src9m/mvc/3/week0.php

1. <?php require("helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 0"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wednesday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/3/week1.php

1. <?php require("helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 1"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/week1m.pdf">Monday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/week1w.pdf">Wednesday</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/4/includes/helpers.php

1. <?php
2.
3. /**
4. * Renders template.
5. */
6. function render($template, $data = [])
7. {
8. $path = __DIR__ . "/../templates/" . $template . ".php";
9. if (file_exists($path))
10. {
11. extract($data);
12. require($path);
13. }
14. }
15.
16. ?>
lectures/9/m/src9m/mvc/4/index.php

1. <?php require("includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "CS50"]); ?>
4.
5. <ul>
6. <li><a href="lectures.php">Lectures</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/4/lectures.php

1. <?php require("includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Lectures"]); ?>
4.
5. <ul>
6. <li><a href="week0.php">Week 0</a></li>
7. <li><a href="week1.php">Week 1</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/4/README

1. mvc/4/README
2.
3. David J. Malan
4. [email protected]
5.
6. Improves upon mvc/3 by organizing files into subdirectories.
7.
8. includes/
9. helpers.php - helper functions
10. index.php - home page for course
11. lectures.php - a list of lectures
12. templates/
13. footer.php - pages' footer
14. header.php - pages' header
15. week0.php - a week
16. week1.php - a week
lectures/9/m/src9m/mvc/4/templates/footer.php

1. </body>
2. </html>
lectures/9/m/src9m/mvc/4/templates/header.php

1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title><?= htmlspecialchars($title) ?></title>
6. </head>
7. <body>
8. <h1><?= htmlspecialchars($title) ?></h1>
lectures/9/m/src9m/mvc/4/week0.php

1. <?php require("includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 0"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wendesday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/4/week1.php

1. <?php require("includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 1"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/week1m.pdf">Monday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/week1w.pdf">Wednedsay</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/5/includes/helpers.php

1. <?php
2.
3. /**
4. * Renders template.
5. */
6. function render($template, $data = [])
7. {
8. $path = __DIR__ . "/../templates/" . $template . ".php";
9. if (file_exists($path))
10. {
11. extract($data);
12. require($path);
13. }
14. }
15.
16. ?>
lectures/9/m/src9m/mvc/5/public/index.php

1. <?php require("../includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "CS50"]); ?>
4.
5. <ul>
6. <li><a href="lectures.php">Lectures</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/syllabus/syllabus.html">Syllabus</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/5/public/lectures.php

1. <?php require("../includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Lectures"]); ?>
4.
5. <ul>
6. <li><a href="week0.php">Week 0</a></li>
7. <li><a href="week1.php">Week 1</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/5/public/week0.php

1. <?php require("../includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 0"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/w/week0w.pdf">Wednesday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/0/f/week0f.pdf">Friday</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/5/public/week1.php

1. <?php require("../includes/helpers.php"); ?>


2.
3. <?php render("header", ["title" => "Week 1"]); ?>
4.
5. <ul>
6. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/m/week1m.pdf">Monday</a></li>
7. <li><a href="http://cdn.cs50.net/2013/fall/lectures/1/w/week1w.pdf">Wednesday</a></li>
8. </ul>
9.
10. <?php render("footer"); ?>
lectures/9/m/src9m/mvc/5/README

1. mvc/5/README
2.
3. David J. Malan
4. [email protected]
5.
6. Improves upon mvc/4 by isolating web-accessible content in its own subdirectory.
7.
8. html/
9. index.php - home page for course
10. lectures.php - a list of lectures
11. week0.php - a week
12. week1.php - a week
13. includes/
14. helpers.php - helper functions
15. templates/
16. footer.php - pages' footer
17. header.php - pages' header
lectures/9/m/src9m/mvc/5/templates/footer.php

1. </body>
2. </html>
lectures/9/m/src9m/mvc/5/templates/header.php

1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title><?= htmlspecialchars($title) ?></title>
6. </head>
7. <body>
8. <h1><?= htmlspecialchars($title) ?></h1>
lectures/9/m/src9m/php/conditions-1.php

1. <?php
2.
3. /**
4. * conditions-1.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Tells user if his or her input is positive, zero, or negative.
10. *
11. * Demonstrates use of if-else construct.
12. */
13.
14. // ask user for an integer
15. $n = readline("I'd like an integer please: ");
16.
17. // analyze user's input
18. if ($n > 0)
19. {
20. printf("You picked a positive number!\n");
21. }
22. else if ($n == 0)
23. {
24. printf("You picked zero!\n");
25. }
26. else
27. {
28. printf("You picked a negative number!\n");
29. }
30.
31. ?>
lectures/9/m/src9m/php/hello.php

1. #!/bin/env php
2. <?php
3.
4. /**
5. * hello
6. *
7. * David J. Malan
8. * [email protected]
9. *
10. * Says hello to the world.
11. *
12. * Demonstrates use of a shebang with env.
13. */
14.
15. printf("hello, world\n");
16.
17. ?>
lectures/9/m/src9m/php/return.php

1. <?php
2.
3. /**
4. * return.php
5. *
6. * David J. Malan
7. * [email protected]
8. *
9. * Cubes a variable.
10. *
11. * Demonstrates use of parameter and return value.
12. */
13.
14. $x = 2;
15. printf("x is now %d\n", $x);
16. printf("Cubing...\n");
17. $x = cube($x);
18. printf("Cubed!\n");
19. printf("x is now %d\n", $x);
20.
21. /**
22. * Cubes argument.
23. */
24. function cube($n)
25. {
26. return $n * $n * $n;
27. }
28.
29. ?>

You might also like