In-Class Examples for CS 312

More examples will be added throughout the semester

W3C Validator - handles both HTML and CSS

W3C CSS-specific Validator

Basic HTML

firstPage.html - very simple HTML example
bad.html - fails validation
formatting.html - simple formatting example including headings, line breaks, and paragraphs
links.html - examples of including absolute and relative links
lists.html - examples of creating unordered, ordered, and definition lists
images.html - examples of including images on webpages
table.html - tables with headings and blank cells

Image Map

Image maps weren't covered in class, but are discussed in Ch 2.20 in DWP.

imagemap.html - demonstrates the use/construction of an image map
shapes.html - another imagemap example

CSS

mypage.html - basic HTML page that will be formatted using CSS style defined in mystyle.css
mystyle.css - external CSS definition file
bad.css - fails validation
2col.html - two-column layout HTML
2col.css - two-column layout CSS
float.html - example with one floating image

Forms

form.html - demonstrates the use/construction of forms
echo.php (source) - PHP to echo back $_POST and $_GET parameters from a form
validation.html - demonstrates the use of HTML validation for forms

Basic Authentication

index.html - can only be viewed if you have the username and password (user1, abcd1234)

PHP

hello.php - PHP Hello World (source)
php-form.html - using PHP with forms, uses action.php (source)
php-form2.html - using PHP with forms, uses action2.php (source), which has PHP write all HTML code with echo() statements
browser.php - display browser type (source)
browser2.php - display browser type with conditionals (source)
html-php.php - mixing HTML and PHP (source)
info.php - demonstrating phpinfo() (source)
echo.php - displays name-value pairs sent via POST or GET (source)
register.html - user registration form, uses register_action.php (source) and writes registration.txt
- register_show.php (source) - read from registration.txt and display data in a table
document.php (source) - illustrates using php require to load other files, includes header.html, menu.html, footer.html, and uses std.css for styling

JavaScript

Examples in slides:

write-head.html - JavaScript in the <head> section
write-body.html - JavaScript in the <body> section
getelementbyid.html - example of using document.getElementById to write text to webpage
alert.html - example of using alerts and functions
click.html - example of the onclick event and using an external JavaScript file (js/externalFunction.js)
prompt.html - example of using prompts
passing-args.html - example of passing arguments to a function
validateform.html - example form validation, make sure email addresses are equal

More examples:

confirm.html - uses confirm() for form submission, if "ok" then submit, if "cancel" don't
showdate1.html - print out the date using Date() and document.write (in body)
showdate2.html - print out date with window.onload, getElementById(), and innerHTML (all in head)
trickbutton.html - moves button on mouseover
converter.html - converts from miles to km, using onclick and JS function

badscript.html - version that doesn't work, use Web Console to debug
consolelog.html - version that uses console.log() to write debug messages, view with Web Console

AJAX

text-noreload.html - Example of XMLHttpRequest to change a document without a re-load
get-header.html - Using XMLHttpRequest to view the HTTP response header
suggest.html - Dynamic suggestion box with AJAX, uses gethint.php (source)
order.html - Order a Pizza example and encodes and parses JSON, uses lookup.php (source)

jQuery

clickToHide.html - hide all <p> elements on the page
effects-ex.html - examples of jQuery effects: hide, show, slideDown, slideUp, fadeTo, fadeOut, fadeIn, animate
methods-ex.html - examples of jQuery modifing HTML: html, append, prepend, after, before
css-ex.html - examples of jQuery modifing CSS
ajax-ex.html - examples of jQuery using AJAX, uses echo.php (source)

Some JavaScript/Ajax examples in jQuery:

jquery-html.html - same effect as js/getelementbyid.html
trickbutton.html - same effect as ../rgrove/javascript/trickbutton.html
text-noreload.html - same effect as ajax/text-noreload.html
suggest.html - same effect as ajax/suggest.html

Sessions

set_cookie.php (source) - uses set_cookie_action.php (source)
login.php (source) - demonstrates using sessions to pass around shopping cart info

uses login_action.php (source)
product.php (source), product_action.php (source)
checkout.php (source), checkout_action.php (source)

User Authentication

index.php - demos register, login, secure resource, logout, and deregister

register.php (source) - uses register_action.php (source)
login.php (source) - uses login_action.php (source)
secure_home.php (source) - uses login_check.php (source)
logout_action.php (source)
deregister_action.php (source)

Using Databases

pet.php (source) - demos creating, displaying, and adding elements to a pet database
- makedb.sql (makedb.sql.txt) - database setup
- pet-sorted.php (source) - table sorted by dob
- addpet.html - add a pet
- addpet_handler.php (source)
index.php - same as User Authentication example above, but using sqlite3 database

makedb.sql (makedb.sql.txt) - database setup
register.php (source) - uses register_action.php (source) - only register_action.php is changed
login.php (source) - uses login_action.php (source) - only login_action.php is changed -- updated 12/11/2020
secure_home.php (source) - uses login_check.php (source)
logout_action.php (source)
deregister_action.php (source) - deregister_action.php is changed

In-Class Examples for CS 312, Fall 2020