Capt. Webb

CLIENT

UH course
MIS 3371

SERVER

UH course
MIS 4372

Rev. 1.94 10/18/2023

HTML

HYPERTEXT MARKUP LANGUAGE

Basics of tags: <HTML>,<HEAD>,<BODY>

Presentation Tags: bold, italic, underline, font ...

form name ="user choice" action = URL method = 'GET' or 'POST'

User Input (sent to the server onSubmit) Click below for example code.

Other Tags:					Actions:
• images • music	• canvas • lists	• links • video	• tables • meter	• progress	• user events • timers

  CSS  CASCADING STYLE SHEETS

• CSS Organization (4 STYLE specifications)
   1. page inside HEAD tags
   2. linked from remote file (URL)
   3. imported from remote file (URL) & merged
   4. local occur in the BODY's HTML tags     • CSS Classes
    • CSS Psuedo-Classes

• CSS Properties (all)

  • Box Model
  • Fonts & Text
  • Color & Backgrounds • 2D transformations
• 3D transformations
• Position, Layout & Size • Lists
• Cursors   • Animations
• Transitions

XML

EXTENSIBLE MARKUP LANGUAGE

     • DTD Data Type Definition
     • AJAX (Asynchronous Javascript from XMLHTTP)
     • RSS (Really Simple Syndication)

DESIGN CONSIDERATIONS

• Marcotte Responsive Design 2011
• Wroblewki Mobile First 2011

• click for "golden sections"→
• show background

JAVASCRIPT

NOUNS

• Data types: integer,float,strings. Declarations not required.

• Arrays

*get: ... = array_name* [*index];* *set: array_name* [index]=...; size: array_name.length**	For 2-D arrays use: array_name [ row ] [ col ]
Methods: concat, reverse, slice, sort, join

VERBS

• Loops
• If-Then-Else

• Sequentials

• Strings	• Mathematics	• Date and Time
• Arrays	• Math Functions and Methods

Javascript has Three Object Models to →

See get/set below for:

1. HTML

2. CSS

3. XML

get [retrieve a value]
OR
set [assign a value]

← 1. HTML get/set using Javascript

document . form name
OR
forms[ index ] . element name
OR
elements[ index ] . value

for example, this gets/sets the seventh element (the textbox with value='ABCde')

get: temp = document.forms[0].elements[6].value; temp ←"ABCde"

set: document.forms[0].elements[6].value = "ABCde"; textbox ←"ABCde"

←   2. CSS get/set using Javascript

document . getElementById[ "id value" ] . style . CSS property =   value;

OR

innerHTML = value;

           for example, this is a span with color="red" and id="fred"

get: x = document.getElementById("fred").style.color;     x←"red"

set: document.getElementById("fred").style.color.value="red"; fred←"red"

←   3. XML get/set using Javascript

root . childNodes[index] . childNodes[index] . ... . childNodes[0].nodeValue;

        for example, this is the i^th node of root

  get:   temp = root.childNodes[i].childNodes[0].value; temp ← "ABCde"

   set:    root.childNodes[i].childNodes[0].value="ABCde"; node ← "ABCde"

Retrieving Data From A User's Form Submission

Language	Form's METHOD=POST	Form's METHOD=GET
ASP	request.form("HTML element name")	request.querystring("HTML element name")
C#	Request.Form ["HTML element name"]	Request.QueryString ["HTML element name"]
VB.NET	Request.Form ("HTML element name")	Request.QueryString ("HTML element name")
php	$_POST["HTML element name"]	$_GET["HTML element name"]

SQL Tasks SQL Reference

Report Errors or Suggestions

1. Single pass transactions (1 server execution)

No Transaction Control Req'd

CREATE table, DROP table, SELECT rows & cols

ALTER TABLE: add; modify; drop; or rename columns

2. Two pass transactions (2 server executions)

Transaction Control Req'd
... all or nothing ...    •   new connection requires:
        server;database;uid;pwd;
   •   connection.beginTrans

Loop thru ALL

• insert
• update
• delete

   •   IF no-errors THEN
         connection.commitTrans
      ELSE
         connection.rollbackTrans

INSERT a new table row

• Pass 1 User: gets HTML form page and submits data

• Pass 2 Server: performs SQL INSERT, returns OK or NO

3. Three pass transactions; (3 server executions)

UPDATE an existing table row

• Pass 1 User: gets HTML page, enters pk, submits to server

• Pass 2 Server: returns pk's data User: modifies & submits

• Pass 3 Server posts changes and reports results

DELETE. an existing table row

• Pass 1 User: gets HTML page, submits pk to DELETE

• Pass 2 Server: if row found , asks 'Are you sure?'

• Pass 3 Server: If "yes", DELETE row

Server Side Tasks

Database Models, Scaling & Shardes

Code Pages:  •asp • C# • VB.NET • php

My Web Services:

  • button maker   • gauge maker

  • color pickers   • echo form utility

🎵 tunes on zoom   •

My Games:     • separation anxiety

  • minesweep

• Inline Code
    & Code Behind
• Postbacks
• SQL Injections:
     •  parameterize
     •  other injections
• JSON
• Spiders and Bots

date time

External References &n bsp;

•HTML 5:

•CSS: w3schools

•XML: w3.org

Returning HTML to Client

ASP	Response.Write "string of HTML"
C#	Response.Write( "string of HTML" );
VB.NET	Response.Write( "string of HTML" )
php	echo "string of HTML";