Comp 212 - Web Development (Fall 2025)

Introductory Information

• Syllabus.
• Canvas site.
• zyBooks Online Textbook.
  1. Sign in or create an account at link above
  2. Enter zyBook code: WHEATONCOLLEGECOMP212GousieFall2025
  3. Subscribe ($64 for the semester)
• Web Style Guide, 4th Edition. This is also a clear example of why physical books are superior for reader comprehension than online texts (explained in class). The 3rd Edition, although older, might actually be better.

---

• Phoenix Code - one of the free IDE options. This can be used online (can be slow) or downloaded to your computer. Did I mention FREE?
• Komodo IDE - free IDE for web development.
• FileZilla - free FTP (file transfer protocol) application. Download the client, not the server.
• XAMPP - free software to set up a development server on your computer (Apache, MySQL, PHP, and Perl).

---

• HTML5 Validator.
• CSS Validator.
• Got CSS??

Coding & Design Resources

• HTML tutorials from W3Schools, my recommended source for many web tools.
• HTML reference (W3Schools).
• CSS reference (W3Schools).
• SQL Tutorial (W3Schools).
• Bootstrap - front-end component library.
• Bootstrap tutorial (W3Schools).
• Materialize - another front-end component library. This is used in this page.
• React tutorial (W3Schools).

---

Colors

• ColorPicker - applet to show colors and their numerical equivalents (in hexadecimal).
• 4096 Color Wheel - choose safe (and unsafe) web colors from 4096 choices.

---

Fonts

• Top 10 Sans-Serif Fonts
• Top 10 Serif Fonts
• Google Fonts

Projects/Exams

Sample final exam problems

• phpFinal.php - clicking on this shows what the PHP program does; see the code: phpFinal.txt.
• phpFinal.html - sample solution for above.
• cookiesFinalAns.html - sample solution to cookie problem. Not the most elegant. Also I have not cleaned up the indentation yet.

---

Projects

• Web5 - due December 7.
• Web4 - due November 24.

In-Class Examples (Newer)

PHP and mySQL

• php3.php - basic PHP statements; variables and arrays (php3.txt).
• calculate.html - sending a value from client (html) to server (PHP) using GET and jQuery (calculate.txt).
• calculate2.html - sending a value from client (html) to server (PHP) using POST and AJAX (calculate2.txt).
• functions.php - shows use of functions in PHP (functions.txt). Note the placement of functions is irrelevant.
• changePage.php - example changing page content using PHP (changePage.txt).
• changePage2.php - same as above, but includes a PHP file (changePage2.txt).
• buttonTest.php - example changing page content using, this time using different buttons (buttonTest.txt).
• skiAreas1.php - PHP that queries the skiAreas database and displays a single-value result (skiAreas1.txt).
• skiAreas1and2.php - PHP that adds functionality to return all of the rows of the table (skiAreas1and2.txt).
• displayImages1.php - using PHP to change page based on contents of database (displayImages1.txt).
• displayImages2.php - adding HTML form buttons to the above for even more functionality (displayImages2.txt - Note that this solution is definitely not the only way to accomplish this task; indeed, you may find a better way).
• getElevation.html - this example combines HTML, jQuery, and PHP. Using a form in HTML to get a ski area name from the user, jQuery is then used to connect to the database through getElevation.php (getElevation.txt).
• getImage.html - simulates getting an image from the database; similar setup to the previous example. Using a form in HTML to get a ski area name from the user, jQuery is then used to connect to the database through getImage.php (getImage.txt). In your project, you must store image information in the database.

Authentication

• loginPass.php - PHP file to generate a hashed password and to show how to verify a password (loginPass.txt). This is magic.
• authenticate.html - HTML file that creates a form to input user credentials. JavaScript then sends those credentials to a PHP file for verification with the hashed password in the database.
• userAuth.php - PHP file to get credentials from authenticate.html and compare to the user's database hashed password (userAuth.txt).

Cookies

Basic cookies in PHP

• cookieSet.php - set a session and persistent cookie (cookieSet.txt).
• cookieUse.php - use the cookies set up in previous (cookieUse.txt).

Similar to the above, we can set and use session variables rather than cookies.

• sessionSet.php - set session variables (sessionSet.txt).
• sessionUse.php - use the session variables set up in previous (sessionUse.txt).

Cookies can also be created/used in JavaScript

• cookiesStart.html - using JavaScript to set/use cookies. Note that you won't see anything happening when running this; you'll want to look at the code. The pages below use the code to implement some functionality.
• cookies0.html - using the above to count number of times page is accessed using a session cookie.
• cookies1.html - using the above using a persistent cookie.
• cookiesAndPHP.html - very contrived example showing how to use cookies to store one item number via JavaScript and then compare to a "database" in PHP to get the item description. This uses the PHP file that looks like cookiesPHP.txt.

Responsive Design

• responsiveCowsStart.html - responsive design exercise.
• responsiveCows.html - solution to above.
• responsiveImagesStart.html - how to choose proper image size.
• bootstrapCowsStart.html - starting point for using Bootstrap.
• bootstrapCows.html - finished Bootstrap version of responsive cows page.
• bootstrap/index.html - Bootstrap version of image formats.