Interactive web page design

The web page for CS 203 and CS 207

Class list with link to pages (You should be here after lab 1)

See your Marks and remarks

Class pictures

CS 203 Course Outline

CS 207 Course Outline

Course pack Contents

Advanced material and student pages at Osiris
Documentation refrences

• Anatomy of an HTML page

  • About "meta" tags - declare yourself  "Author", inform search engines...
  • CharacterEncoding.html All about encodings, especially for forms and database storage. UTF-8 vs. ISO-8859-1
  • (Old notes) Specifying character set using metatags. Forcing with php, and some entities (foolproof)
  • About Forms - for users to fill out...
    and more forms topics
  • Using the Web Counter on Osiris

• How To do CSS styles

  • A Tutorial and reference
  • W3Schools, features "try it yourself" pages
    
  • Tutorial on position, Ten Easy Steps
  • The official W3C specification for CSS2
  • And my notes and example on  position
    • See also Dropdown menu below..
      
    • 3 columns using float
    • 3 columns using relative/absolute
      
  • Example of @media print for optimizing printed versions
  • Dropdown menu uses CSS
  • (not recommended)Dropdown menu uses position relative and absolute, also with @media print to remove unwanted elements from printing
  • A border image greenthing.html
  • Prevent copying of images with z-index and transparent overlay (view source to see CSS, using position:absolute.
    

• PHP How To process form data

  • Form examples, and the php code, start at firstform.html (on osiris)
    
  • Other examples on Osiris
  • Example of creating and using a function: add_html
    
  • Code for echo.php - a general purpose form data receiver
  • using Cookies, example, cookies.php
  • Farm slide show
  • Accessing a Database php-database.html
  • Using $_SESSION to save data between pages, and example (shopping cart)
    
  • Surrogate key usiing SERIAL (integer with sequence dafault)
  • File uploads for example, sign in to our course
    • upload/download example,  Feb. 2013, as requested
    • Another one, with authentication, March 25, 2013
      
  • Example: Bridal Register
    

• Python - an alternative

  Example on osiris, Form python code
  Not currently working. If you are interested, I will find out why.

• SQL topics

  • introduction to SQL and reference
  • Using SQL in PHP
  • Using SERIAL for primary key in SQL

• FAQ - frequently (or occasionally) asked questions
  

• FEP - frequently encountered problems
  

• Introduction to JavaScript

  • My brief introduction to JavaScript
  • Form checking with JavaScript
  • A good turorial. Explains "Why?"
  • Example: Dropdown menu uses display property switching
  • A sortable table using Javascript
    

• Image transformations

• Environment, headers, and security

  • See environment that php does: seeenv.php, or Perl version
    
  • See headers coming from client, opensocket.html opens a socket and gets a web page. You see the headers.

• Timestamp: Date & time schemes

  • SQL
  • PHP
  • JavaScript
  • Example: Last Modified date/time of a page
    

Images: slideshow examples

• PHP - Page is resent, with the new image
  
• JavaScript - page stays, images change -- Simple example, November 2020
• JavaScript - page stays, images change -- bigger, more complex with extras
• Thumbnails: click to see the "big picture"
  

Registration demonstration Sign in (password required)

Documentation

Cautionary tales

• Top 25 coding errors
• PHP Security Primer (PDF)
  
  • Make your own broswer example

PHP:  www.php.net  especially useful is the Function Reference, by categories

PostgreSQL, Find at www.postgresql.org

Other language documentation

• javadoc - Java sdk api documentation (look at java.sql.*)
  
• perldoc - PERL is a language where "There's more than one way to do it." - can be terse, formed the basis for php. - For database use, note the elegance of the division betwin the DBI (high level interface) and the DBD (particular driver for a particular database type)
  
• pythondoc - "And now for something completely different", the Python language. The tutorial is about all you need..
  

Anatomy of an HTML page

<!DOCTYPE HTML>
<html>
  <head>
	<title>Hello Page</title>
        <meta name="author" content="Lin Jensen">
  </head>
  <body>
    <h1>
	Hello
	World!
    </h1>
	How are you?
	How's the weather in <em>Lennoxville?</em>
    <p>
	This is a paragraph.
	blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah 
	blah, blah <strong>blah,              blah</strong> blah, blah 
    </p>
  </body>
</html>

This source looks like:

Hello World!

This is a paragraph. blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah blah, blah