\documentclass[12pt]{article}
\usepackage{palatino}
\usepackage{epsfig}
\usepackage{epstopdf} % for \psfig{.eps}
\usepackage{amssymb} % for \varnothing
\usepackage{amsmath} % for \pmod
\usepackage{hyperref} % 
\usepackage{upquote} % 
\hyperbaseurl{https://www.cs.uky.edu/~raphael/courses/CS316}
\usepackage{url} % to split long names
\usepackage{listings} % for embedded code
\lstset{basicstyle=\ttfamily, numbers=left, numberstyle=\tiny, numbersep=5pt,
	extendedchars=true, tabsize=3}
\usepackage{color}
\setlength{\topmargin}{-0.1in}
\setlength{\textheight}{8.0in}
% \newcommand\note[1]{{\color{red} #1}}
\pagestyle{myheadings}
\markboth{CS316 Spring 2022}{CS316 Spring 2022}
\newcommand\note[1]{\raggedright\fbox{#1}}
\newcommand\ind{\hspace*{.3in}}
\newcommand\codebold[1]{\texttt{\textbf{#1}}}
\newcommand\leaveout[1]{\relax}
\def\>{\hspace*{0.2in}}
\newenvironment{notelist}{\begin{list}
   {$\bullet$}
   {\setlength{\itemsep}{0in}}}
   {\end{list}}
\author{Raphael Finkel}
\title{CS316 class notes}
\begin{document}
\maketitle

\section{Intro}
\begin{notelist}
% \item \note{Class 1: 1/25/2021} % MWF
\item \note{Class 1: 1/21/2022}
\item Handout 1 --- My names
	\begin{notelist}
	\item Mr. / Dr. / Professor / ---
	\item Raphael / Rafi / Refoyl
	\item Finkel / Goldstein
	\end{notelist}
\item Plagiarism --- read aloud from handout 1
\item Assignments on web.
\item E-mail list: class email address; instructor uses to reach students.
\item All students have MultiLab accounts, although you may use any
computer you like to do assignments.  MultiLab machines, such as {\tt
cor.cs.uky.edu} and {\tt pen.cs.uky.edu}, are behind a firewall, so if you are
off campus, you must establish a Virtual Private Network (VPN) to access them.
\item All students have MySQL accounts, which will be useful later in the
semester.
\end{notelist}

\section{History}
\begin{notelist}
\item ArpaNet: around 1973
\item Internet Protocol (IP)
provides a way to name every computer by a 32-bit identifier, conventionally
written as four 8-bit integers in base 10, such as {\tt 128.163.146.21}.
(That's IPv4; IPv6 is different.)
\item Transfer-control protocol (TCP) 
(Vinton Cerf and Robert Kahn) around 1974,
sits above IP and
provides reliable, in-order transmission of data through a network.
(Behind the scenes: establishing a connection, serial numbers, positive
acknowledgements, timeouts, retransmissions)
\item Application-level protocols are built above TCP
	\begin{notelist}
	\item File Transfer Protocol (FTP: Abhay Bhushan, 1971)
	\item Simple Mail Transfer Protocol (SMTP: Ray Tomlinson 1971)
	\item Network Time Protocol (NTP: David Mills, 1985)
	\item Hypertext Transfer Protocol (HTTP: Tim Berners-Lee, 1989)
	\item Domain Name System (DNS: Paul Mockapetris 1983)
	\item Secure Shell protocol (SSH: Tatu Ylönen 1995)
	\end{notelist}
\item Many protocols are officially specified in RFC (``Request For Comment'')
documents stored by the Internet Engineering Task Force (IETF).
\end{notelist}

\section{Overall structure of Web applications}
\begin{notelist}
\item We will mostly consider Web programs based on {\bf clients} communicating
with {\bf web servers} using HTTP.
	\begin{notelist}
	\item The {\bf client} is typically a {\bf browser}, such as {\em Firefox},
	{\em Opera}, {\em Safari}, or {\em Chrome}, running as a program on the {\bf
	user}'s computer.  It can also be a non-interactive program like {\em curl}
	or {\em wget}.
	\item The {\bf web server} is a typically a daemon (long-running
	unattended) program such as Apache, Internet
	Information Services (MicroSoft IIS), Tomcat, or nginx (``engine-X'') running
	on an host computer.
	\item The CS web server (\url{www.cs.uky.edu}) runs Apache; it is hosted on
	{\tt bud.cs.uky.edu}.
	\end{notelist}
\item The client sends {\bf requests} to the web server using HTTP, and the web
server sends {\bf responses} back to the client, again using HTTP.
\item The web server does not maintain state between
requests; every request/response pair is self-contained.
\end{notelist}

\section{A deeper look}
\begin{notelist}
\item The web server can ask the client to store opaque data called {\bf
cookies} and present them back to the web server on subsequent requests; the
web server can use the contents of the cookies to verify authentication and
look up stored history.
% \item \note{Class 2: 1/27/2021} % MWF
\item  Browser requests are for {\bf pages}.  
\item The web server interprets a typical page request as naming a file to send
back as the response, but if the file has the necessary permissions, the web
server treats the file as a program and packages its output into the response.
\item The web server generally doesn't try to interpret the content of its
responses.  It's up to the client to interpret that content. 
In particular, web servers don't understand Hypertext Markup
Language (HTML), but browsers do, and they parse the HTML content to format and
present pages to the user.
\item The user can explicitly specify a request by a Universal Resource Locator
(URL) of this form: \\
{\tt protocol://hostName/file/path?parameters}
	\begin{notelist}
	\item {\tt protocol}: often {\tt http} or {\tt https}.  The latter works the
	same, but the protocol includes cryptographic means to authenticate the
	web server (so the client can be sure of its identity) and a guarantee of
	privacy and integrity of the communication.
	\item {\tt hostName}: Either an IP name, like {\tt 128.163.146.21}, or a
	DNS name, like {\tt www.cs.uky.edu}.  Either of these
	host names refers to our CS Department web server, which can access MultiLab
	files.  The {\tt hostName} can include an optional colon followed by a {\bf
	port number}; if there is no port number, the default port (80 for {\tt
	http}, 443 for {\tt https}) is implied.
	\item {\tt file/path}: This component can be of any length.
	\item {\tt parameters}: The web server provides this optional component to
	the program (if any) that is named by the {\tt file/path} component.  Under
	Unix, it does so by placing the parameters in the environment of the program
	or as input to the program.
	The format of the parameters component is typically of the form \\
	{\tt var1=value1\&var2=value2} ... .
	\item Web pages often contain URLs in {\bf links} that a user may click,
	which initiates a browser action very similar to manually entering a URL in
	the appropriate area in the browser window.
	\end{notelist}
\end{notelist}

\section{Unix: files and permissions}
\begin{notelist}
\item \note{Class 2: 1/13/2022}
\sloppy
\item Every file and directory in Unix is associated with (among other
attributes) the {\bf owner}, the {\bf group owner}, and nine permissions: (read,
write, and execute) for each of (owner, group, and other).  
\item These permissions are often represented as three octal numbers
representing nine bits.  For instance, {\tt 764} represents {\tt 111-110-100},
which in turn means the owner may read, write, and execute the file;
failing that, members of the group may read and write (but not execute) the
file; failing that, other users (the ``world'') may read but not write or
execute the file.
\item Many programs in Unix, such as {\tt ls} and {\tt chmod}, represent the
same information in nine letters, such as {\tt rwxrw-r--} .
% % \item \note{Class 2: 8/20/2020} % TR
\item If a file is not executable but is readable (and all its ancestor
directories are world-executable), the web server responds to a URL
representing that file by sending the file (with suitable HTTP headers) back to
the browser.  We call that file a {\bf static} page.
\item Our CS web-server configuration stipulates that if the file is executable
by the owner, not writable by anyone else, and is accessible to the web
server (permissions at least {\tt --x---r--}), the web server invokes that file
as a program running under the owner's
privileges and sends its output (which is typically HTML preceded by HTTP
headers) as the response to the request.  We call that situation a {\bf dynamic}
page.
\item Say your login name is {\em abc123@uky.edu}.  You can login to any
MultiLab machine (such as {\tt pen.cs.uky.edu}; you need to use the campus VPN)
with login name simply {\em abc123}.
You can say {\tt ssh abc123@pen.cs.uky.edu} to make the connection.
\item In your home directory, 
you need a subdirectory called {\tt HTML}, with suggested permissions {\tt 751}.
If you have a readable file in that subdirectory called {\tt foo.html}, the URL that
accesses it (from anywhere in the world) is 
\url{http://www.cs.uky.edu/~abc123/foo.html} .
\item There are other ways to make a dynamic page, in particular, {\bf
server-side includes}, in which the web server substitutes dynamic information
such as today's date for specific codes in an otherwise static page.
\end{notelist}

\section{Hypertext Markup Language (HTML)}
\begin{notelist}
% \item \note{Class 3: 1/29/2021} % MWF
\item All browsers can display pages encoded in HTML.
\item HTML is derived from a more general scheme, Extensible Markup Language
(XML).
\item HTML has gone through several generations; currently, HTML means HTML5,
released in 2014.
A 6th version is in progress; many browsers already support some of its new
features.  See \url{http://html6test.com/index.html}.
\item HTML pages are text with additional ``markup'' to control formatting.
\item The markup is in the form of {\bf tags}, which are always surrounded by
brokets (angle brackets).  Example: {\tt <span>}.
\item Most markup encloses a region of text.  Tags for that sort of markup have
closing tags to indicate the end of the region  Closing tags are also surrounded
by brokets; they start with '{\tt /}'.
Example: {\tt </span>}.
\item Tagged regions may nest (subject to some constraints), but they may not
overlap.
\item A properly constructed HTML document contains some required tags; other
tags are optional.
\item \hyperref{examples/example.01.html}{example}{}{Example 1}
% ../HTML/examples/example.01.html
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.01.html
\item Browsers are very forgiving of missing closing tags, often inserting
them automatically.
\item \hyperref{examples/example.02.html}{example}{}{Example 2}
% ../HTML/examples/example.02.html
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.02.html
\end{notelist}

\section{Browser developer tools}
\begin{notelist}
\item Whenever you build a web page, use the browser to check for warnings.
Open the {\bf developer tools}: Control-Shift-I on FireFox.
\item The layout and invocation method varies among Firefox, Chrome, and others.
\item Inspector: see the HTML.
\item Console: See JavaScript warnings and run JavaScript code directly.
\item Network: See what pages are loaded, where they come from, and how long
access took.
\item HTML validator: see errors and warnings; send the page to a web service
for more thorough validation; automatically clean up the HTML.
\end{notelist}

\section{HTML tags}
\begin{notelist}
\item Full list: \url{https://www.w3schools.com/tags/default.asp}
\item Example that has all the tags mentioned here:
\hyperref{examples/example.03.html}{example}{}{Example 3}
% ../HTML/examples/example.03.html
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.03.html
\item Required regions
	\begin{notelist}
	\item {\tt <html>}
	\item {\tt <head>} (within {\tt <html>})
	\item {\tt <title>} (within {\tt <head>})
	\item {\tt <body>} (within {\tt <html>})
	\end{notelist}
\item Comments: {\tt <!-- ... -->}
\item Regions inside {\tt <head>}
	\begin{notelist}
	\item {\tt <style>} style sheet organized by tag
	\item {\tt <script>} JavaScript program
	\end{notelist}
\item Non-regions inside {\tt <head>}
	\begin{notelist}
	\item {\tt <meta>} metadata: character set, keywords, viewports
	\item {\tt <link>} reference to external style sheet
	\end{notelist}
\newpage
\item \note{Class 3: 1/18/2022}
\item Regions inside {\tt <body>}, generally nestable; closing tag is sometimes
optional.
	\begin{notelist}
	\item {\tt <h1>} .. {\tt <h6>} headings of various sizes
	\item {\tt <p>} paragraph
	\item {\tt <a>} anchor; typically a {\bf hyperlink} 
	\item {\tt <span>} inline text region
	\item {\tt <div>} vertically separate text region
	\item {\tt <pre>} pre-formatted text
	\item {\tt <table>} table
	\item {\tt <tr>} table row (within {\tt <table>})
	\item {\tt <td>} table entry (within {\tt <tr>})
	\item {\tt <ul>} unnumbered list
	\item {\tt <ol>} ordered (numbered) list
	\item {\tt <li>} list element (within {\tt ol} or {\tt ul})
	\end{notelist}
\item Non-regions inside {\tt <body>}; nothing nests inside
	\begin{notelist}
	\item {\tt <img>} image
	\item {\tt <br>} line break
	\end{notelist}
\item We will see other tags later.
% \item \note{Class 4: 2/1/2021} % MWF
\end{notelist}

\section{HTML attributes}
\begin{notelist}
\item {\bf Attributes} modify the way browsers present tags or provide
essential additional information.
\item Attributes are placed inside the brokets delimiting a tag and have this
syntax: \\
	{\verb+tagname='tag value'+}
\item One may use single or double quotes; if the tag value is a single
word, quotes are optional.
Don't use fancy quotes; use only ASCII single quote and double quote. 
Tag values must not contain any embedded HTML tags.
\item Each tag has a defined set of {\bf attributes} it can accept,
and each attribute has a defined syntax for its tag values.
(For instance, the {\tt width} attribute for {\tt <img>} has a value
like {\tt 20}, not {\tt 20px}.)
% \item \note{Class 3: 8/25/2020} % TR
\item Some attributes are obligatory.
	\begin{notelist}
	\item {\tt <img>} requires {\tt src}.
	\end{notelist}
\item Some attributes are highly recommended.
	\begin{notelist}
	\item {\tt <html>} should have {\tt lang}.
	\item {\tt <img>} should have {\tt alt}.
	\end{notelist}
\item The most common non-obligatory attributes
	\begin{notelist}
	\item {\tt id} uniquely names the tagged region so it can be referred to
	elsewhere.
	\item {\tt style} modifies how the browser presents the region.
	\item {\tt class} identifies regions that share formatting.
	\end{notelist}
\item Browsers ignore unrecognized attributes, but the validator notices them.
\end{notelist}

\section{Styles}
\begin{notelist}
\item The philosophy is that HTML tags describe {\bf content}; styles
describe {\bf presentation}.
\item Syntax: {\tt property:value;} (Spaces are optional.)
\item A single element may have multiple style components.
\item There are hundreds of style properties; we only discuss a few.
\item Text modifications
	\begin{notelist}
	\item {\tt color}: a name, like {\tt green}, a hex value, like
		{\tt\#00FF00}, or an RGB value, like {\tt rgb(0,255,0)}
	\item {\tt background-color}: similar to {\tt color}
	\item {\tt text-align}: {\tt center}, {\tt left}, {\tt right}, or
		{\tt justify}.
	\item {\tt vertical-align}: {\tt top}, {\tt middle}, or {\tt bottom}
	\item {\tt text-indent}: a length, such as {\tt 20px}
	\end{notelist}
\item Font modifications
	\begin{notelist}
	\item {\tt font-family}: for instance, {\tt  "Times New Roman", Times,
		serif}
	\item {\tt font-style}: {\tt normal}, {\tt italic}, or {\tt oblique}
	\item {\tt font-weight}: {\tt normal} or {\tt bold}
	\end{notelist}
\item Box model: each region is in a box with internal {\bf padding}, a
{\bf border}, and an external {\bf margin}, all of which can be styled.
	\begin{notelist}
	\item {\tt padding}: a length, such as {\tt 5px}
	\item {\tt border}: such as {\tt 12px solid blue}
	\item {\tt margin}: a length, such as {\tt 10px}
	\item each of these can be specified separately for {\tt top},
		{\tt bottom}, {\tt left}, and {\tt right}, such as
		{\tt margin-top:10px;}
	\end{notelist}
\end{notelist}

\section{Cascading Style Sheets (CSS)}
\begin{notelist}
% \item \note{Class 5: 2/3/2021} % MWF
\item \note{Class 4: 1/20/2022}
\item The {\tt style} attribute on a tag is useful when a single element needs
special formatting.
\item If many elements need the same formatting, there is a better
approach: a {\tt <style>} section within the {\tt <head>} section with a
tag-specific or class-specific set of formatting rules.
\item The format of styles in the {\tt <style>} subsection: \\
	{\em selector} \{{\em style} ...\}
\item
\hyperref{examples/example.03.html}{example}{}{Example 3}
from earlier has styles, both inline and in a {\tt style} section.
% ../HTML/examples/example.03.html
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.03.html
\item The {\em selector} can be (this list is not exhaustive)
	\begin{notelist}
	\item a tag name (such as {\tt p} or {\tt h3}) 
	\item a class name, with a prepended dot, such as {\tt .myRed}, which applies
	to all tags in the page that have the attribute {\tt class="myRed"}
	\item an id name, with a prepended hash, such as {\tt \#myRed}, which applies
	to the unique tag in the page that has the attribute {\tt id="myRed"}.
	\item (seldom needed:) a combination of the above possibilities separated by
	operators for descendant, child, adjacent sibling, general sibling.
	\end{notelist}
\item Browsers apply a cascading set of rules to determine formatting;
that's why style sheets are called Cascading Style Sheets (CSS).
The rules can be complicated, but this is a reasonable summary:
	\begin{notelist}
	\item For each property, the browser uses the first rule it finds.
	\item Step 1: the {\tt style} attribute in the element's tag.
	\item Step 2: an entry in the {\tt <style>} region of the document targeting
	the element's id (such as {\tt \#myRed}), class (such as {\tt .myRed}), or
	tag (such as {\tt p}), and in that order.
	\item Step 3: repeat steps 1 and 2 for each surrounding tag, moving
	from closest (local) to farthest (global).
	\item Any inherited property value that is marked {\tt !important} takes
	precedence over this usual order.
	\end{notelist}
\item You can discover the CSS for any element by using the inspector
in the browser's developer tools.
\item \hyperref{examples/example.04.html}{example}{}{Example 4}:
Nested regions with styles.
% ../HTML/examples/example.04.html
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.04.html
\end{notelist}

\section{Common Gateway Interface (CGI)}
\begin{notelist}
\item CGI specifies how browsers send requests to web servers in response to
user actions (typically, clicking on a {\em submit} button).
\item The simplest invocation is via a {\tt <form>} tag in the web page.  Steps:
	\begin{notelist}
	\item The user clicks a button, {\bf activating} the form.
	\item The browser collects values of the {\bf input fields} from the form and
	sends them to the web server along with a URL that refers to an executable
	file (that is, a program).
	\item The web server presents the input values to the specified program,
	which we call a {\bf CGI-bin program} or simply a {\bf CGI program}.
	\item The CGI program produces output comprised of an HTTP header and HTML
	content.
	\item The web server sends that output to the browser as the response.
	\item The browser displays the new web page.
	\end{notelist}
% % \item \note{Class 4: 8/27/2020} % TR
% \item \note{Class 6: 2/5/2021} % MWF
\item \hyperref{examples/example.05.html}{example}{}{Example 5}
invokes
\hyperref{examples/echo.cgi}{cgi}{}{{\tt echo.cgi}}.
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.05.html
% ../HTML/examples/example.05.html
% ../HTML/examples/echo.cgi
% ../HTML/examples/echo.php
\item \note{Class 5: 1/25/2022}
\item I have added a simple audio and video entry to this example.
Accessing media: {\tt <video>} (only MP4, WebM, and Ogg) {\tt <audio>} (only MP3, Ogg,
and WAV) Safari does not play Ogg.
\item Notice the extra care that {\em echo.cgi} takes to prevent code-injection
attacks.  Disable that code and try this input: \\
{\verb+ red<span style='color:green;'>green</span>+}
\item There are worse attacks. Always untaint inputs that are used to generate
outputs of CGI programs.
\item One can also call the CGI program directly in a fancy URL:
\url{www.cs.uky.edu/~raphael/courses/CS316/examples/echo.cgi?parameter1=hello}
\item The CGI program
	\begin{notelist}
	\item The CGI program may be written in any language.
	\item Many languages provide libraries for accessing the CGI parameters.
	\item The permissions (on Unix) of all the directories in the path from the
	file-system root to the program must be {\em executable} by {\em other} and
	must not be writable except by {\em user}.
	\item The permissions on the CGI program file itself must be executable by
	{\em owner} (which must be the same as the user under whose HTML directory
	the program is located) and not writable by anyone except by {\em owner}.
	\item The CS web server runs the CGI program under the owner's identity, so it
	has access to anything the owner can access.
	\item The CS web-server configuration requires that the CGI file have a
	name with suffix {\tt .cgi} or {\tt .php}.
	\item A Unix convention lets the first line of a text CGI file specify
	what programming language software is meant to interpret it.
	That is why {\tt \#!/usr/bin/perl} is at the top of the executable text file
	{\em echo.cgi}.
	\end{notelist}
\item The web server invokes the CGI program after setting several
	environment variables.  Among them:
	\begin{notelist}
	\item {\tt REQUEST\_METHOD}: either {\tt GET} or {\tt POST}.
		\begin{notelist}
		\item {\tt GET} applies to requests directly in the URL and to requests
		coming from {\tt <form>} regions that specify it.
		\item {\tt GET} responses can be cached; the expectation is that the same
		request again should produce the same response.
		\item It's usually better to use {\tt POST}, which sends the parameters in
		a separate message, where they are less subject to manipulation and
		leaking information (like passwords).
		\item There are also {\tt PUT} and {\tt DELETE} methods, but they are
		rarely used.
		\end{notelist}
	\item {\tt QUERY\_STRING}: the parameters to a {\tt GET} request,
	separated by the {\tt \&} or {\tt ;} symbol.
	\item {\tt CONTENT\_LENGTH}: the length of the parameter list passed to
	standard input for a {\tt POST} request.  This list has the same format as
	the {\tt QUERY\_STRING}.
	\end{notelist}
\end{notelist}

\section{Input tags}
\begin{notelist}
% \item \note{Class 7: 2/8/2021} % MWF
\item A full list of input tags for forms is available at
\url{www.w3schools.com/html/html_form_input_types.asp}.
\item \hyperref{examples/example.06.html}{example}{}{Example 6}
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.06.html
% ../HTML/examples/example.06.html
% ../HTML/examples/fullEcho.cgi
uses many of them.
\end{notelist}

\section{Command-line, non-interactive clients}
\begin{notelist}
% \item \note{Class 5: 9/1/2020} % TR
\item {\em curl}: 
{\small
\begin{verbatim}
curl -d param1='hello world' -d param2='goodbye world' \
	http://www.cs.uky.edu/~raphael/courses/CS316/examples/fullEcho.cgi
\end{verbatim}
}
\item {\em wget}:
{\small
\begin{verbatim}
wget --post-data='param1=hello world&param2=goodbye world' -O - \
	http://www.cs.uky.edu/~raphael/courses/CS316/examples/fullEcho.cgi
\end{verbatim}
}
\item Both have many options, such as providing cookies, using {\tt GET} instead
of {\tt POST}, and logging.
\item Since all accessible CGI programs can be invoked by these clients, you
cannot rely on the browser to constrain the values of fields such as {\tt date}.
The CGI program must be cautious.
\end{notelist}

\section{Languages for CGI programs}
\begin{notelist}
\item \note{Class 6: 1/27/2022}
% \item \note{Class 8: 2/10/2021} % MWF
\item Many languages make it easier for CGI programs to get the parameters,
direct runtime errors to the browser, and fill in HTML templates.
\\
\begin{tabular}{l | l l l}
{\bf language} & {\bf parameters} & {\bf errors} & {\bf templates} \\
Perl & {\tt CGI} & {\tt CGI::Carp} & {\tt HTML::Template} \\
Python & {\tt cgi} & {\tt cgitb} & {\tt Chameleon}, {\em Flask} \\
C/C++ & {\tt cgicc} & & {\tt ClearSilver} \\
Java & & & {\tt jsp} \\
PHP & built-in & & built-in \\
Ruby & & & ERB \\
\end{tabular}
\item \hyperref{examples/example.07.cgi}{}{}{Example 7}: Perl.
% www.cs.uky.edu/~raphael/courses/CS316/examples/example.07.cgi
% ../HTML/examples/example.07.cgi
% ../HTML/examples/example.07.template
Perl predates the WorldWideWeb by a few years.
\item{PHP: PHP Hypertext Preprocessor}
	\begin{notelist}
	\item {\tt PHP} is a scripting language based on a built-in template facility.
	\item A PHP manual is at \url{https://www.php.net/manual/en/}; a simplified
	description is at \url{https://www.w3schools.com/php/default.asp}.
	\item The program looks like an HTML web page decorated with commands, all of
	the form {\tt <?php ... ?>}
	\item \hyperref{examples/example.08.php}{}{}{Example 8}: PHP example.
	% ../HTML/examples/example.08.php
	% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.08.php
	\item Unfortunately, it's hard to debug PHP programs.
	\item It has many functions for file manipulation, gathering {\tt <form>}
	data, handling cookies, interacting with databases, and encryption.
	\item To check syntax: {\tt php -l FILENAME.php}
	\item To provide GET or POST parameters to a PHP program run from the command
	line, put the following near the top of the PHP code:
\begin{minipage}{5in} \begin{lstlisting}[language=PHP]
/* If started from the command line, wrap parameters */
if (!isset($_SERVER["HTTP_HOST"])) {
	parse_str($argv[1], $_GET);
	parse_str($argv[1], $_POST);
	parse_str($argv[1], $_REQUEST);
} 
\end{lstlisting} \end{minipage} \\
	Then you can invoke the program from the command line this way: \\
	{\verb+php FILENAME.php 'param1=value1&param2=value2'+}
	\end{notelist}
\item Debugging
	\begin{notelist}
	\item Always run your CGI programs on the command line first to
	check for errors.  There are ways to provide parameters, too.
	\item There is an error log on {\tt www.cs.uky.edu}, but you don't have
	access to it.
	\item You can often have the CGI program report errors as part of the web
	page it returns; in Perl, you can say
	{\verb+ use CGI::Carp qw(fatalsToBrowser warningsToBrowser);+}
	\item Unix standard line termination is \textbackslash{}n, but for MicroSoft
	it's \textbackslash{}r\textbackslash{}n.  You might need to remove
	extraneous \textbackslash{}r characters so that the first line (which looks
	like {\tt \#!/path/to/processor}) ends with \textbackslash{}n.
	\item For our assignments, you must test your code on the MultiLab to make
	sure that any languages and libraries your code requires are available.
	\item In-class exercise:  Modify example 8 to include Saturday and Sunday and
	add one more message to the set of randomly-selected ones.
% 	\item \note{Class 9: 2/12/2021} Guest lecture about PHP by Joel Finkel % MWF
% 	\item \note{Class 10: 2/15/2021} % MWF
	\item See \hyperref{examples/inClass01.php}{}{}{this solution}.
	% ../HTML/examples/inClass01.php
	\end{notelist}
\end{notelist}

\section{A little more about tables}
\begin{notelist}
\item \note{Class 7: 2/1/2022}
\item Table: colspan and rowspan
\item \hyperref{examples/example.09.html}{}{}{Example 9}: Table example.
% ../HTML/examples/example.09.html
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.09.html
\end{notelist}

\section{Local vs remote execution}
\begin{notelist}
% \item \note{Class 6: 9/3/2020} % TR
\item {\bf Local execution}: In the browser.  
	\item $\oplus$: offloads work from the web server, can avoid sending
	private information via the net.
	\item $\ominus$: dependent on version of tools used, such as JavaScript
	and libraries, which must be available to the browser.  (Example: web applets
	in Java used to work, but they don't anymore.)
\item {\bf Remote execution}: In the web server (via CGI).
	\item $\oplus$: uses full power of server; not dependent on particular
	browser.
	\item $\ominus$: less portable, puts load on the web server.
\end{notelist}

\section{JavaScript}
\begin{notelist}
\item Officially called ECMAScript (European Computer Manufacturers
Association): first released 1997.
\item High-level, just-in-time compiled, looks like C or Java, but is in many
ways different from both.
\item Advanced features: dynamic typing, prototype-based object orientation,
first-class functions, anonymous functions.
\item All standard browsers can run JavaScript programs.
% \item \note{Class 7: 9/8/2020} % TR
\item One can write standalone programs in JavaScript, too; the processor is
called {\em nodejs}.
See \url{https://nodejs.org/docs/v8.10.0/api/}.
\item JavaScript is quite error-prone, although more recent versions are less so.
% \item \note{Class 11: 2/17/2021} % MWF
\item \hyperref{examples/example.10.js}{}{}{Example 10}: JavaScript
% ../HTML/examples/example.10.js
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.10.js
\item \note{Class 8: 2/3/2022}
\item Snow day; only a Zoom review session
\item \note{Class 9: 2/8/2022}
\item Differences between {\em nodejs} and JavaScript
	\begin{notelist}
	\item JavaScript runs inside the browser in a sandbox: no access to the file
	system or to programs outside the browser.  It understands the DOM
	(Document Object Model; see Section \ref{DOM} on page \pageref{DOM}) and
	provides variables and methods specific to the DOM.
	\item {\em Nodejs} runs on its own, with full access to the file system and
	to external programs.  It does not have the DOM, although one can bring in a
	module ({\em jsdom}) that does have the DOM.
	\end{notelist}
\end{notelist}

\section{Database access: SQL}
\begin{notelist}
% \item \note{Class 12: 2/19/2021} % MWF
\item Databases (DBs) are the subject of CS405; we only touch the surface here.
\item DB servers include mySQL, MariaDB, SQL Server, MS Access, Oracle, Sybase,
Informix, Postgres. 
\item These all support {\bf relational} DBs: information is organized into
{\bf relations}, also called {\bf tables}, with a {\bf schema} detailing the
columns and their types.  Each {\bf entry} is a row in a DB table.
\item The standard language for communicating with a relational DB is SQL
(Structured Query Language), with
commands for storing, manipulating, and retrieving data.
\item The highly popular SQLite C library ``implements a small, fast,
self-contained, high-reliability, full-featured, SQL database engine.''
\item 
\hyperref{https://www.w3schools.com/sql/}{}{}{SQL Reference}.
\item A standard organization is for the browser (the client) to communicate
with a controller (a CGI program) that accesses a DB (the back end) and
provides feedback to the browser.
\item Many languages (like Perl, PHP, Java) have libraries intended for 
interacting with DBs, often called {\bf Database Connectors}, such as JDBC
(Java) PHP Data Objects (PDOs: PHP),
and DBI (Perl).
\item The database connector provides a way to safely pass values to the DB
without worrying that the value might include an SQL insertion, typically by a
two-step process.
	\begin{notelist}
	\item Prepare the SQL statement, which uses {\bf ?} in place of all values to
	be inserted or modified in the database.
	\item Execute the prepared statement, providing all the actual values to
	associate with the {\bf ?} references.
	\end{notelist}
The database connector makes sure that the actual values are stored verbatim and
are never treated as SQL statements themselves.
\item See \url{https://xkcd.com/327/} for a funny use of SQL injection.
\item \hyperref{examples/example.11.txt}{}{}{Example 11}: SQL for Kratylos
% ../HTML/examples/example.11.txt
\end{notelist}

\section{Document Object Model (DOM)}
\label{DOM}
\begin{notelist}
% \item \note{Class 13: 2/22/2021} % MWF
\item A JavaScript program running in a page in the browser can inspect, 
modify, insert, and delete any HTML and CSS on that page.  
\item \note{Class 10: 2/10/2022}
\item The HTML is represented by a hierarchy of objects, and there are
built-in methods that return objects based on CSS selectors, such as tag, id,
name, and class.
\item The DOM is pre-declared for JavaScript, including both variables and
functions.
\item
\url{https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction}{}{}
{Reference}
\item \hyperref{examples/example.12.js}{}{}{Example 12},
to be run in the developer console for
\hyperref{examples/example.04.html}{}{}{Example 4}.
% ../HTML/examples/example.04.html
% ../HTML/examples/example.12.js
\item Typically, a JavaScript program is invoked as a side-effect of
clicking a button, but there are other triggers as well, including
interaction with the development console.
\item Many examples:
\url{https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples}.
\item Exercise (in class): In the developer console, write a routine that causes
the font size of the {\tt inner} class to grow ten times.
% \item \note{Class 14: 2/24/2021} % MWF
\item See \hyperref{examples/inClass02.js}{}{}{this solution}.
% ../HTML/inClass/inClass-03.js
\end{notelist}

\section{Scripts inside HTML}
\begin{notelist}
% \item \note{Class 8: 9/10/2020} % TR
\item \note{Class 11: 2/15/2022}
\item The browser runs scripts when it
loads the page.
\item The {\tt <script>} tags can be anywhere, but they are typically in the
{\tt <head>} region or the
{\tt <body>} region; the latter postpones execution until the body is loaded.
\item The browser also invokes scripts as a side-effect of {\bf events},
which can be specified as attributes of tags.
	\begin{notelist}
	\item {\tt onclick='some JavaScript code'}.  The code is typically a
	function call.  The parameter value {\tt this} is the element itself
	in the DOM.
	\item Besides {\tt onclick}, there are many other triggers, such
	as {\tt onmouseover}, {\tt onmousedown}, {\tt onmouseup},
	{\tt onfocus}.
	\end{notelist}
\item A script can bind new event handlers to elements.
\item \hyperref{examples/example.13.html}{}{}{Example 13}: Invoking scripts.
% ../HTML/examples/example.13.html
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.13.html
\item Exercise (in class): Write a web page that includes JavaScript that takes
two integers in input regions and displays their sum.
This page should not use CGI; all computation should be in the browser.
% \item \note{Class 15: 2/26/2021} % MWF
\item See \hyperref{inClass/inClass-04.html}{}{}{this solution}.
% ../HTML/inClass/inClass-04.html
% https://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-04.html
\end{notelist}

\section{Asynchronous JavaScript and XML: AJAX}
\begin{notelist}
% \item \note{Class 9: 9/15/2020} % TR
\item \note{Class 12: 2/17/2022}
\item Allows code on a web server to update a page without the browser needing
to reload it.
\item Simple idea.
	\begin{notelist}
	\item The web page includes JavaScript that builds a request, sends it to the
	web server, awaits a response, and acts on the response.
	\item The message is encapsulated in a {\tt XMLHttpRequest} object.  Since
	about 2017, this awkward construction was replaced with the far simpler
	{\tt fetch()} routine.
	\item The message is sent to a URL on the same server as the one that provided the
	page.  That URL can refer to a file (which can be executable).
	\item The web server returns the file (or invokes it as a program, giving it
	any optional information in the {\tt fetch} parameters.
	\item The JavaScript in the web page interprets the result and uses it to
	update the contents of the web page.
	\end{notelist}
\item Purposes
	\begin{notelist}
	\item Update a web page without reloading.  Example: suggesting valid
	completions of partial words in a form.
	\item Request and receive data from the web server after the page is loaded.
	\item Send data to the server in the background.
	\end{notelist}
\item \hyperref{examples/example.14.html}{}{}{Example 14}: AJAX.
% ../HTML/examples/example.14.html
% ../HTML/examples/JSON.14.txt
% ../HTML/examples/XML.14.xml
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.14.html
\item AJAX transmits {\em asynchronously} to avoid blocking
and to allow other scripts to continue while the JavaScript waits.
\item Therefore the result of {\tt fetch()} is a {\em promise}; the JavaScript
code can \codebold{await} its eventual content.
\item The code can access its content by {\tt response.text()}.
\item If the response text is a string comprising valid JSON, {\tt JSON.parse()} 
can convert it to a JavaScript object.  However, the syntax of the JSON string
is very restrictive:  every name and every string value must be
surrounded by double quotes; single, missing, or non-ASCII quotes are not
acceptable.  Alternatively, the code can access the content by {\tt
response.json()}, but only if it hasn't ``consumed'' the content by
{\tt response.text()}.
\item Efficiency and security
	\begin{notelist}
	\item Every AJAX request generates a round-trip message on the network, which
	itself requires multiple underlying TCP packets.
	\item The web server must handle each AJAX request, often calling a program.
	\item The browser usually does not require CPU while a request is pending.
	\item The browser refuses to send AJAX {\em except} to the web server
	generating the current page ({\tt window.location.host}) to avoid leaking
	sensitive information.
	\item The user can inspect and manipulate the web page, both content and
	script, so the program on the web server must not trust the formatting or
	content of the data it receives in an AJAX request.  The web server must
	never send secrets to the browser, because they are then visible to the user.
	\end{notelist}
\item Exercise (in class): Write a web page with a button that, when clicked,
causes an AJAX call to
\url{http://www.cs.uky.edu/~raphael/courses/CS316/examples/example.07.cgi},
extracts the date from the response, and displays it.
% \item \note{Class 16: 3/1/2021} % MWF
\item See \hyperref{includes/inClass-05.html}{}{}{this solution}.
% ../HTML/inClass/inClass-05.html
\item \note{Class 13: 2/22/2022}
\item To pass form parameters in {\tt fetch()}:
	\begin{notelist}
	\item GET method (the default): add the parameters to the URL in the first
	parameter of {\tt fetch()}.
	\item POST method: include a second parameter to {\tt fetch()}:
	\begin{minipage}{5in} \begin{lstlisting}
{
	method: "POST",
	headers: new Headers({
		'Content-Type': 'application/x-www-form-urlencoded', 
	}),
	body: "param1=value1&param2=value2...",
}
	\end{lstlisting} \end{minipage} \\
	\end{notelist}
	\item To return a JSON string from CGI to AJAX, you can (optionally) have
	the CGI program set the HTML response header {\tt Content-Type:
	application/json; charset=utf-8}.  Make sure that all field names are quoted
	(with ordinary, not smart, double quotes).
	In PHP, use the {\tt header()} function to get this non-default behavior.
\end{notelist}

\leaveout{
\section{XML and XPath}
\begin{notelist}
\item XML (eXtensible Markup Language) was designed for data transfer and
representation, both human- and computer-readable.
\item XML documents should start with \\
{\tt <?xml version="1.0" encoding="UTF-8"?>}.
\item Like HTML, an XML document has tags and attributes.
\item Every tag must be matched by a closing tag.
\item There is no predefined set of valid tags and attributes.
\item An XML document may contain or refer to a DTD (Document Type
Declaration) specifying valid tags, attributes, and containment constraints.
If it satisfies the DTD, it is called {\bf valid}.
\item The {\em xmllint} program can check that an XML document is well
formed.
\item Example: \url{examples/XML.14.xml} (open in a browser)
% ../HTML/examples/XML.14.xml
\item The navigation methods for the DOM also work for XML values in the
browser.
\item Another navigation method: XPath (XML Path Language, 1999) identifies and
navigates nodes in an XML document. 
\item Many languages (including Python, Perl, and PHP) have libraries for XPath.
It is also built into the browser's JavaScript.
\item XPath includes over 200 built-in functions.
\item \hyperref{https://devhints.io/xpath}{}{}{XPath cheat-sheet}.
\item Because HTML is a form of XML, XPath can also navigate the DOM.
\item \hyperref{examples/example.15.js}{}{}{Example 15}: XPath.
% ../HTML/examples/example.15.js
% ../HTML/examples/example.14.html
\item Exercise (in class): Write a single JavaScript statement
you can enter (via the developer
tools console) into \hyperref{examples/example.07.cgi}{}{}{Example 7} that uses
an XPath expression to identify all the {\tt <li>} tags whose content contains
an "{\tt s}" and then changes the font color of their content to green and their
presentation to bold.
% ../HTML/examples/example.07.cgi
% \item \note{Class 11: 9/22/2020} % TR
\item See \hyperref{examples/inClass05.js}{}{}{this solution}.
% ../HTML/examples/inClass05.js
% \item \note{Class 17: 3/3/2021} % MWF
\item Templates in Kratylos: 
\hyperref{examples/example.16.txt}{}{}{Example 16}
% ../HTML/examples/example.16.txt
\end{notelist}
} % omit

\section{JQuery}
\begin{notelist}
\item JQuery, first released in 2007, is a JavaScript {\bf framework},
that is, a library that abstracts the
DOM, makes JavaScript programming easier and uniform across browsers, and acts
as a basis for many other JavaScript libraries.
JQuery was especially important before JavaScript introduced
{\tt querySelector()} and {\tt fetch()}.
\item The current version (released 3/2021) is 3.6.0.
\item Features
	\begin{notelist}
	\item Avoiding browser-specific differences.
	\item Manipulating the DOM and CSS
	\item Binding events to code
	\item Handling effects and animations
	\item Simplifying AJAX
	\item Enabling third-party plugins for many other tasks, such as data tables.
	\end{notelist}
\item To enable JQuery, either download a personal copy from the official site,
\url{https://jquery.com/} or link to a version provided by a content-delivery
network (CDN) such as Cloudflare or Google.  In either case, link to it in the 
{\tt <head>} or at the end of the {\tt <body>} section: \\
{\scriptsize
\begin{minipage}{5in} \begin{lstlisting}[language=HTML]
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"
  crossorigin="anonymous"></script>
\end{lstlisting} \end{minipage} } \\
This code uses a ``minified'' version and checks that it hasn't changed.
The ``anonymous'' {\tt crossorigin} prevents sending cookies.
\item JQuery provides a third way to access the DOM (the first way is direct
JavaScript, the second is XPath).  
	\begin{notelist}
	\item All DOM references return objects that respond to further JQuery
	methods.
	\item Simplest: {\tt \$({\em node})} turns any DOM node into a JQuery
	object.
	\item Objects are usually specified by a {\bf selector}:
	{\tt \$("{\em selector}")}
	\item Multiple space-separated selectors are valid; each selects descendants
	of the objects specified by the previous selectors.
	\item Multiple comma-separated selectors are valid; the result is the union
	of all selected objects.
	\item The selectors include all CSS selectors (which also work for
	{\tt querySelector()}.
	\item Selector based on any attribute value:
	{\tt \$("[{\em name}={\em value}]")}.  There are variations on this form
	to select only those elements whose named attribute has a value satisfying
	some simple patterns.
	\end{notelist}
\item \hyperref{examples/example.17.js}{}{}{Example 17}: JQuery,
to be used with \url{examples/example.17.html}.
(Examples 15 and 16 pertain to XML, which we are not covering.)
% ../HTML/examples/example.17.js
% ../HTML/examples/example.17.html
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.17.html
% \item \note{Class 18: 3/5/2021} % MWF
\item \note{Class 14: 2/24/2022}
\item Further examples from  
\hyperref{examples/example.17.js}{}{}{Example 17}.
\item One can query and modify any property (attributes, CSS, content) of
selected elements.
\item Exercise (in class): Write a single JavaScript statement
you can enter (via the developer
tools console) into \hyperref{examples/example.07.cgi}{}{}{Example 7} that uses
a jQuery expression to identify all the {\tt <li>} tags whose content contains
an "{\tt s}" and are odd children of their parent and then changes the font
color of their content to green and their font to Arial.  This statement should
not include any anonymous functions.
% ../HTML/examples/example.07.cgi
% ../HTML/examples/example.07.template
% ../HTML/examples/inClass06.js
% $("li:contains('s'):odd()").css('color','green').css('fontFamily','Arial');
% \item \note{Class 12: 9/24/2020} % TR
\item See \hyperref{examples/inClass06.js}{}{}{this solution}.
\item Exercise (in class): Write a web page using jQuery that shows a picture
of an orange of width 20px (see 
\hyperref{examples/example.06.html}{}{}{Example 6}) that when you click changes its size
over 5 seconds to 200px.  After that, one more click should change its size over 
1 second to 300px.  After that, click should have no effect.
Use an {\tt <img>} tag with {\tt src} and {\tt width}
attributes.
% \item \note{Class 13: 9/29/2020} % TR
% \item \note{Class 19: 3/8/2021} % MWF
\item \note{Class 15: 3/01/2022}
\item See \hyperref{examples/inClass07.html}{}{}{this solution}.
% ../HTML/examples/inClass07.html
\leaveout{
\item Uses in
\hyperref{https://www.cs.uky.edu/~raphael/ela/display.cgi?project=8604&serial=1&dataType=flextext&queryType=continuous}{}{}{Kratylos}.
\item See 
\hyperref{https://www.cs.uky.edu/~raphael/ela/src/assets/local/js/kt_base.js}{}{}{Kratylos
JavaScript}.
% ~/HTML/ela/src/assets/local/js/kt_base.js:1866
% ~/HTML/ela/src/assets/local/css/kt_base.css:277
% ~/HTML/ela/src/tmpl/display.tmpl
}
\end{notelist}

\section{Review for midterm}

\section{Midterm exam}
\begin{notelist}
\item \note{Class 16: 3/03/2022} Exam
\item \note{Class 17: 3/08/2022} After-exam review
\end{notelist}


\section{Fonts}
\begin{notelist}
\item The fonts available to the browser depend on fonts installed on the user's
computer.  Sometimes the web-page designer wants to use a different font.
\item \note{Class 18: 3/10/2022}
\item CSS can include a font and refer to it via a URL: \\
\begin{minipage}[t]{5in}
\begin{verbatim}
@font-face {
  font-family: myName;
  src: url(location.woff);
}
\end{verbatim}
\end{minipage}
\item Browsers generally accept fonts in several formats: {\em woff}, {\em
woff2}, {\em ttf}, {\em otf}.
\item The {\tt @font-face} style may also list {\tt font-style}, {\tt
font-weight}, {\tt unicode-range}.
\item Google and other sites provide many fonts; see \url{http://fonts.google.com}.
\item See
\hyperref{examples/example.18.html}{}{}{Example 18}.
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.18.html
% ../HTML/examples/example.18.html
\item You can build a small font with special characters that you need;
see \url{https://icomoon.io/app/}.
\item Warning: Don't over-use strange fonts.
\item Exercise (in class): Write a web page with some text that loads 5 fonts,
and has some text in a {\tt <span>} region.  The text should change to a
randomly-selected different font every time the cursor enters the text.  
You might want to use the JavaScript functions
{\tt Math.floor()} and {\tt Math.random()}.
% \item \note{Class 15: 10/1/2020} % TR
% \item \note{Class 20: 3/10/2021} % MWF
\item \note{Class 19: 3/22/2022}
\item See \hyperref{inClass/inClass-08.html}{}{}{this solution}.
% ../HTML/inClass/inClass-08.html
% https://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-08.html
\end{notelist}

\section{More HTML and CSS}
\begin{notelist}
% \item \note{Class 19: 10/15/2020} % TR
\item See
\hyperref{examples/example.19.html}{}{}{Example 19}.
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.19.html
% ../HTML/examples/example.19.html
\item More CSS: shadow effects, tooltips 
\item CSS selectors: hover, link/active/visited, focus 
\item Responsive web design: Viewport
	\begin{notelist}
	\item By default, the browser shrinks the entire page to fit the width of the
	browser, often making the content too small on a smartphone.
	\item a {\tt <meta name='viewport'>} tag in the {\tt <head>} can specify
	more useful values for the viewport.
	\item {\tt width=device-width} says that the page width should be the device
	width.
	\item {\tt initial-scale=2.0} says that the browser should set the initial
	zoom to that value.
	\end{notelist}
\item Responsive web design: @media
	\begin{notelist}
	\item surrounds some CSS in the {\tt <style>} section and enables it only if
	the browser has some property: media type (print, screen, speech, all)
	and feature (such as dimensions, resolution).
	\item syntax:
	{\scriptsize \begin{verbatim}
	@media not|only mediatype and (mediafeature and|or|not mediafeature) {
		CSS-Code;
	}
	\end{verbatim} }
	\end{notelist}
\item CSS display: none (removes element) \textbar inline (like span) \textbar block (like p)
	\textbar ...
\item CSS visibility: visible \textbar hidden (still takes up space)
	\textbar ...
\item Accessing media: {\tt <video>} (only MP4, WebM, and Ogg) {\tt <audio>} (only MP3, Ogg,
and WAV) Safari does not play Ogg.
\item Spellcheck and autocomplete; not available in all browsers.
\item Exercise (in class): Build a web page with a table whose elements all have
border shading (gray, 5px horizontal, 5px vertical, blurring in 5px), with a
4$\times$4
grid of values, but the inner 4 grid cells contain a single entry: the letter X.
The letter should be centered vertically and horizontally in each cell.
Pad each cell with 10px on all sides.
Extra: the big middle cell should have a tooltip saying "Y".
\item \note{Class 20: 3/24/2022}
% \item \note{Class 20: 10/20/2020} % TR
% \item \note{Class 21: 3/12/2021} % MWF
\item See \hyperref{inClass/inClass-09.html}{}{}{this solution}.
% http://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-09.html
% ../HTML/inClass/inClass-09.html
\end{notelist}

\section{Bootstrap: CSS}
\begin{notelist}
% \item \note{Class 24: 3/19/2021} % MWF
\item Bootstrap is both a CSS library and a JavaScript library.  Some of its
facilities require other libraries.  It used to require jQuery, but it no longer
does.
\item The current version (Spring 2022) is Bootstrap 5.1.3;
as with all libraries and languages, versions change and new features appear.
\item 
\hyperref{https://getbootstrap.com/docs/5.1/getting-started/introduction/}{}{}{Standard
reference}.
\item Main features
	\begin{notelist}
	\item Provides {\bf design templates} to make elements like buttons and tables prettier.
	\item Supports {\bf responsive web design}: pages that automatically adjust to look good on
	devices of various widths, ranging from phones to wide-panel displays.
	\end{notelist}
\item In the {\tt <head>} section, include a {\tt viewport}
directive to begin the responsive web design and the Bootstrap CSS: \\
{\scriptsize
\begin{minipage}{5in}
\begin{lstlisting}[language=HTML,morekeywords={integrity,crossorigin}]
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous">
\end{lstlisting} \end{minipage} } \\
\item At the end of the page, before the closing {\tt </body>}, include
JavaScript libraries for Bootstrap and Popper (a tooltip-positioning package);
jQuery used be be required, but both Bootstrap and Popper have stopped using it.

{\scriptsize
\begin{minipage}{5in} 
\begin{lstlisting}[language=HTML,morekeywords={integrity,crossorigin}]
<script
	src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
	crossorigin="anonymous"></script>
<script
	src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
	integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
	crossorigin="anonymous"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
	integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
	crossorigin="anonymous"></script>
\end{lstlisting} \end{minipage} } \\
\item Bootstrap provides its own CSS for all standard elements to enforce its
own look and feel.
\item See 
\hyperref{examples/example.20.html}{}{}{Example 20}.
% ../HTML/examples/example.20.html
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.20.html
\item It also provides classes that further enhance the CSS.
\hyperref{examples/example.21.html}{}{}{Example 21}.
% ../HTML/examples/example.21.html
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.21.html
% \item \note{Class 21: 10/22/2020} % TR
\item \note{Class 21: 3/29/2022}
\item Responsive design has {\bf breakpoints}: \\
{\tt \begin{tabular}{l l l}
{\bf name} & {\bf abbreviation} & {\bf dimension} \\
extra small & none & $<$ 576px \\
small & sm & $\ge$ 576px \\
medium & md & $\ge$ 768px \\
large & lg & $\ge$ 992px \\
extra large & xl & $\ge$ 1200px \\
extra extra large & xxl & $\ge$ 1400px \\
\end{tabular} } \\
reference to any breakpoint refers to screens of that size
unless there is an explicit override for a bigger size.
\item The grid system: 12 grids across, but items can be configured to use a
different number of grids on differently sized devices
\item Forms: no special classes needed.
\item Buttons: Various options.
\item Exercise (in class): Build a web page using Bootstrap that has a table
spanning columns 7 to 12 in the grid scheme, with the first and third
rows each containing X X X
(in three table columns) and the second row containing a single form.
The form should have an input text region and a submit button.
Feel free to make it fancy.
% \item \note{Class 22: 10/27/2020} % TR
\item See \hyperref{examples/inClass10.html}{}{}{this solution}.
% ../HTML/inClass/inClass-10.html
% http://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-10.html
% \item \note{Class 25: 3/22/2021} % MWF
\item Modals (requires JavaScript): floating interactive region that hides the
rest of the page.
\item \note{Class 22: 3/31/2022}
\item Navbars.
	\begin{notelist}
	\item Used for navigation; the elements are typically links.
	\item Can collapse to a smaller size for narrow displays.
	\item Usually occupy the entire width.
	\item Can be fixed to the top or bottom of the screen.
	\end{notelist}
% \item \note{Class 26: 3/24/2021} % MWF
\item Tooltips
	\begin{notelist}
	\item The simplest HTML-based tooltip is to place on the surrounding element (typically
	a {\tt button}) the attribute {\tt title="{\em content}"}
	\item Bootstrap tooltips require the {\tt Popper.js} library.
	\item Opt-in: the web page must have JavaScript that initializes them.
	They have a {\tt data-bs-toggle="tooltip"} attribute, so you can use jQuery to
	initialize them all:
{\hspace*{-.5in}
\begin{minipage}{5in} \begin{lstlisting}[language=C]
	document.querySelectorAll('[data-bs-toggle="tooltip"]').
		forEach(function (elt)
	{
		new bootstrap.Tooltip(elt);
	});
\end{lstlisting} \end{minipage} } \\
	\item A few gotchas; read the documentation concerning hidden or disabled elements
	and multiple-line hyperlinks.
	\item The tooltip can be placed on any side, but Popper overrides the
	placement if the result would be invisible.
	\item The tooltip can itself have style, but then the element needs
	{\tt data-bs-html="true"}.
	\item For keyboard and users of assistive technology (like screen readers):
	Only put tooltips on interactive, focusable elements like buttons.
	\end{notelist}
\item Pagination: typically a decoration on list items.
\item Progress bars
\item Exercise (in class): Build a web page using Bootstrap that has a table of
3$\times$3 X characters and a progress bar, starting at 0.  Each of the 4 side
Xs (that is, not on corners) has a tooltip saying Y.  The tooltips face inward
(for instance, the one on the right side has a tooltip facing left).  Every time
you click on an X, the progress bar advances by 10\%.
% \item \note{Class 23: 10/29/2020} % TR
% \item \note{Class 27: 3/31/2021} % MWF
\item \note{Class 23: 4/5/2022}
\item See \hyperref{inClass/inClass-11.html}{}{}{this solution}.
% ../HTML/inClass/inClass-11.html
% http://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-11.html
\end{notelist}

\section{DataTables}
\begin{notelist}
% \item \note{Class 28: 4/2/2021} % MWF
\item DataTables is jQuery plugin (that means it depends on jQuery) to provide
interactive tables.
\item The manual is
\hyperref{https://datatables.net/manual/index}{}{}{here}.
\item The tables can be formatted with Bootstrap.
\item There are many options, some of which are shown in the
\hyperref{examples/example.22.html}{}{}{example web page}.
% http://www.cs.uky.edu/~raphael/courses/CS316/examples/example.22.html
% ../HTML/examples/example.22.html
% ../HTML/examples/hosts.cgi
\item This example also demonstrates
favicon and scrollbar customization and a shaking image.
\item See how Kratylos uses DataTables:
\url{www.kratylos.org/~kratylos/project.cgi}
\item \note{Class 24: 4/7/2022}
\item Exercise (in class): Build a web page using DataTables that shows the
contents of the Unix file {\tt /etc/services}.  You also need to build a
back-end CGI script that formats this file in JSON.
(You may use 
\url{https://www.cs.uky.edu/~raphael/courses/CS316/examples/services.cgi})
% \item \note{Class 24: 11/5/2020} % TR
% \item \note{Class 29: 4/5/2021} % MWF
\item See \hyperref{examples/inClass12.html}{}{}{this solution}.
% ../HTML/examples/inClass12.html
\end{notelist}

\section{Typescript}
\begin{notelist}
\item
\hyperref{https://www.typescriptlang.org/docs}{}{}{Reference}
\item TypeScript is an extension of JavaScript that is careful about types.
	\begin{notelist}
	\item It uses {\em static} typing as opposed to JavaScript's {\em dynamic}
	typing.
	\item Static type checking helps prevent programming errors.
	\item Static type checking is important for large programming projects.
	\end{notelist}
\item TypeScript can infer the type of an expression, so when you declare a
variable and give it a value, TypeScript knows the type of that variable.
\item TypeScript knows the types of the elements of the DOM.
\item You can also define a type (it's called an {\bf interface}) and explicitly
type a variable declaration and function parameters and return type.
\item Types can be unions: 
\begin{verbatim}
function getLength(obj: string | string[]) {
  return obj.length;
}
\end{verbatim}
\item TypeScript supports generic types:
\begin{verbatim}
interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
declare const backpack: Backpack<string>;
const object = backpack.get();
backpack.add(23); // erroneous
\end{verbatim}
\item Unlike JavaScript, TypeScript is not built into the browser.  If you have
a TypeScript file, the {\em tsc} compiler can convert it to JavaScript as it
checks the types.
% cd wp/notes;
	% node_modules/.bin/tsc --allowJs --outdir /tmp ~/HTML/ela/src/assets/local/js/kt_base.js
\end{notelist}

\section{IndexedDB}
\begin{notelist}
\item It is possible to avoid DB manipulation on the server by putting the DB
in the client.  A good example is IndexedDB, ``a low-level API for client-side
storage of significant amounts of structured data''.
% \item \note{Class 30: 4/7/2021} % MWF
\item IndexedDB is not relational; it is {\bf indexed}, which means that entries
are key-value pairs; the key is considered the index, and the value can be any
object.
\item The programmer must build a database schema. Then a JavaScript program
can open an internal connection to the database and then retrieve and update
data via transactions.
\item Most browsers other than Internet Explorer support IndexedDB.
\item IndexedDB follows a {\bf same-origin} policy: only the site that installs
data can access or modify it.
\item All operations are bundled within a {\bf transaction}, which has a
well-defined life span, and which is failure- and synchronization-atomic.
\item Operations are asynchronous; their completion signals an event that the
program can bind to a callback function, typically {\tt onsuccess} and {\tt
onerror}.
\item \note{Class 25: 4/12/2022}
\item Queries on an index generally produce a {\bf cursor} that can iterate
through the resulting entries.
\item 
\hyperref{https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API}{}{}{IndexedDB Reference}.
\item 
\hyperref{examples/example.23.html}{}{}{IndexedDB example}.
% ../HTML/examples/example.23.html
% http://www.cs.uky.edu/~raphael/courses/CS316/examples/example.23.html
% ../HTML/examples/example.23.js
% \item \note{Class 26: 11/12/2020} % TR
% \item \note{Class 31: 4/9/2021} % MWF
% \item \note{Class 27: 11/17/2020} % TR
% \item \note{Class 32: 4/12/2021} % MWF
\end{notelist}

\section{HTML canvas}
\begin{notelist}
\item \note{Class 26: 4/14/2022}
\item A {\tt <canvas>} element lets you draw text and graphics.
\item It requires JavaScript to actually perform the drawing.
\item The JavaScript can build arcs, circles, polygons, rectangles, text.
\item The {\em jCanvas} jQuery plugin makes programming easier.
\item The items can be bound to events like {\tt click} and {\tt mouseenter}.
\item \hyperref{examples/example.24.html}{}{}{Canvas example}.
% http://www.cs.uky.edu/~raphael/courses/CS316/examples/example.24.html
% ../HTML/examples/example.24.html
% ../HTML/examples/example.24.js
% \item \note{Class 33: 4/14/2021} % MWF
\item Exercise (in class): Build a 300$\times$300 canvas with a blue circle that
moves away from the cursor whenever the cursor tries to enter it but always
remains somewhere inside the canvas.
% \item \note{Class 28: 11/19/2020} % TR
\item \note{Class 27: 4/19/2022}
\item See \hyperref{inClass/inClass-13.html}{}{}{this solution}.
% http://www.cs.uky.edu/~raphael/courses/CS316/inClass/inClass-13.html
% ../HTML/inClass/inClass-13.html
\end{notelist}

\section{HTML SVG}
\begin{notelist}
\item SVG (Scalable Vector Graphics) is a more recent component of HTML that has
the same abilities as Canvas.
\item Graphic elements are placed in {\tt <svg>} regions, and the code is part
of those regions, part of the DOM, and not dependent on JavaScript.
\item The graphic items are scalable and not dependent on screen resolution. 
\item Documentation: \url{https://www.w3schools.com/graphics/svg_intro.asp}.
\item SVG is far more complex than the HTML canvas; you typically want to use an
SVG editor (such as \url{https://svgeditoronline.com/editor/}) instead of
building your own.
\item Inside of {\tt <svg>} you can place drawing commands such as 
{\tt <circle>}, {\tt <line>},  and {\tt <rect>}, but most drawing is done by
grouping elements with {\tt <g>} and using the {\tt <path>} tag.
\item \hyperref{https://www.w3schools.com/graphics/svg_examples.asp}{}{}{SVG
examples}.
% \item \note{Class 34: 4/16/2021} % MWF
\item Continue examples
\item In-class exercise: Use SVG to make a red square with a blue circle inside.
\item See \hyperref{examples/inClass15.html}{}{}{this solution}.
% ../HTML/examples/inClass15.html
% http://www.cs.uky.edu/~raphael/courses/CS316/examples/inClass15.html
% \item \note{Class 35: 4/19/2021} % MWF
\item SVG {\tt viewbox} attribute to scale contents.
\item Continue examples
\end{notelist}

\section{REST}
\begin{notelist}
% \item \note{Class 36: 4/21/2021} % MWF
\item Web programming is an example of {\bf REST}: REpresentational State Transfer.
\item This term was introduced in 2000 by Roy Fielding.
\item Basic characteristics of a RESTful interface
	\begin{notelist}
	\item Client-server architecture.  The server implementation is independent
	of the client implementation.
	\item Statelessness.  Each request from client to server contains all the
	information needed to handle the request, including credentials, which must
	be stored on the client.
	\item Cacheability: Cacheable responses can be stored by the client to avoid
	repeated requests.  The server should indicate whether a response is
	cacheable.
	\end{notelist}
\end{notelist}

\section{Security worries}
\begin{notelist}
\item CGI vulnerabilities
	\begin{notelist}
	\item  The CGI program must sanitize inputs.
		\begin{notelist}
		\item Server-side validation and sanitation is much safer than
		client-side, because a user can use the Developer Console to run any
		JavaScript and to modify any HTML, working around any client-side
		validation and sanitizing.
		\item CGI programs that allow GET can be invoked by URL, bypassing the
		browser altogether, and the URL can provide any values for parameters.
		\item A user can invoke the CGI program via POST and even provide cookies
		with programs like {\em curl}.
		\end{notelist}
	\item {\bf Code-injection attacks}: Parameters can include program fragments,
	which the CGI program might unwittingly send to the command interpreter
	or to an SQL processor. 
		\begin{notelist}
		\item Example of the shell-code injection attack: To compute a file's
		digest using {\em sha256sum},
		the CGI program might pass the file name to the command interpreter,
		and the file name might be {\tt foo; rm *} .
		To sanitize: remove shell metacharacters: \{\& ; ' " $> <$ !\} (or only
		accept good characters).
		\item A field to an SQL query might inject SQL code.  Example: See
		\url{https://xkcd.com/327/}.
		To sanitize: remove SQL metacharacters: \{; ' " ` \}, or always use a DB
		connector method separating the SQL from the parameters.
		% ~/links/k/src/perllib/KratylosDB.pm:640
% 		\item \note{Class 37: 4/23/2021} % MWF
		\item {\bf Cross-site scripting} (XSS) attacks
			\begin{notelist}
			\item {\bf Stored XSS}: Data stored and retrieved includes HTML
			{\tt <script>} regions, causing the retrieving page (run by an
			unsuspecting user) to leak sensitive information by invoking arbitrary
			JavaScript.  That code could, for instance, make an HTTP request with
			parameters to a malicious site.
			\item {\bf Reflected XSS}: Malicious {\tt <script>} code can be embedded in
			the parameters of a {\tt GET} URL and can be obfuscated with
			alternatives such as {\tt \%3C} or {\tt \&\#60;} (both represent {\tt
			<}).
			\item {\bf DOM-based XSS}: JavaScript takes a value from an input
			field and invokes {\tt eval()} or {\tt innerHTML} with it, but a
			malicious user has placed a {\tt <script>} in that input field.
			\end{notelist}
		To sanitize: remove or feather HTML metacharacters: {\tt \{$< >$ \&\}}; use
		JavaScript {\tt .text()} instead of {\tt .html()}.
		\end{notelist}
	\end{notelist}
\item Social engineering, typically via email
	\begin{notelist}
	\item {\bf Phishing}: Convincing a user (typically via email) to reveal private
	information such as passwords by directing the user to what appears to be a
	legitimate site.
	\item {\bf Spear phishing}: similar, but targeted to specific individuals,
	typically with email that appears to come from a trusted person.
	\item {\bf Whale phishing}: similar, but targeting a specific high-profile target
	person.
	\item {\bf Scam}: an attempt to get banking information and pre-payments to release
	large (but non-existent) winnings/gifts/inheritances.
	\item {\bf Spam}: an unwanted advertisement, possibly added by a malicious
	agent on a website that has a public "comment" section.
	\end{notelist}
\item Remote attacks
	\begin{notelist}
	\item {\bf Buffer overflow}: sending invalid data to a server daemon that it is not
	programmed to handle, leading to server failure or escalation of
	privilege.
	\item {\bf Brute-force attacks}: repeatedly trying to connect to restricted
	services (like ssh or email) by trying different user names and passwords.
	\item {\bf Denial of service (DOS)}: overloading the server by repeated expensive
	requires.
	\item {\bf Distributed denial of service (DDOS)}: like DOS, but with a coordinated
	attack from many sources.
	\end{notelist}
\end{notelist}

\section{Defense methods}
\begin{notelist}
% \item \note{Class 38: 4/26/2021} % MWF
\item \note{Class 28: 4/21/2022}
\item Use {\tt https} instead of {\tt http} as the protocol.
This connection provides {\bf authentication} (you can be sure of the identity
of the server), {\bf privacy} (intruders cannot decrypt the conversation) and
{\bf integrity} (intruders cannot modify the conversation without destroying it).
	\begin{notelist}
	\item The browser sends the server {\tt ClientHello}, containing a list of
	cryptographic protocols (such as {\tt TLS 1.3}) and
	cipher suites (such as {\tt TLS\_AES\_128\_GCM\_SHA256}) it supports.
	\item The web server returns {\tt ServerHello}, containing a {\bf
	certificate}, which provides cryptographic proof of the identity of the web
	server, and which protocol and suite it wants to use.
	\item A certificate is part of the PKI (Public Key Infrastructure), a
	distributed web of trust.
	\item The user can ask the browser to display the certificate.
	\item If the browser does not trust the certificate, it prevents browsing,
	although (1) the user can usually choose to continue anyway, (2) the
	connection will be secure (read-write protected), although without
	authentication, and (3) subject therefore to man-in-the-middle (MIM) attack.
	\item See \url{https://ssllabs.com} for results testing web servers and
	browsers.
	\item Browsers display a lock symbol near the URL when they are connected via
	{\tt https}; never provide personal information to sites that do not have
	that symbol.
	\item The CGI program can check the environment variable {\tt
	SERVER\_PORT}
	to verify that it is 443. If it isn't, the CGI can respond with a
	redirection instead of a normal response:
	{\tt <html><head><meta http-equiv="Refresh"
	content="0;url=https://THIS\_FILE>"}
	\item The web site can include an {\tt .htaccess} file that forces {\tt
	https}, and the web server can be configured to only allow {\tt https}
	connections. 
% 	\item \note{Class 39: 4/28/2021} % MWF
	\item The web server must be configured to present the certificate and to
	list the security protocols it accepts.
% bud:/etc/apache2/mods-enabled/ssl.conf
% ~/HTML/ela/.htaccess
	\end{notelist}
\item A website can use {\tt <meta>} or the HTTP header
to specify a {\bf Content Security Policy (CSP)}
such as disallowing all JavaScript, disallowing JavaScript from a different
site, or restricting the source for particular kinds of content.   Example:\\
{\tt <meta http-equiv="Content-Security-Policy"
	content="default-src 'self'; img-src https://*;">} \\
This setting disallows JavaScript from outside sources and requires the {\tt
https} protocol for all images.
\item Use {\tt ssh} instead of older techniques such as {\tt telnet} and {\tt
rlogin}.  See \url{https://sshaudit.com}.  Test {\tt glo.cs.uky.edu} and {\tt
www.engr.uky.edu}.
\item Passwords
	\begin{notelist}
	\item Log brute-force attempts and employ firewall rules to temporarily or
	permanently disallow connections from bad actors.  See
	\note{\~{}raphael/src/f2b}.
	\item Store passwords as cryptographic digests.
	\item There are laws regarding proper storage and backups of personal
	information.
	\item For critical applications, consider 2-factor authentication ({\bf what
	you know}: the password, {\bf what you have}: a phone, a fingerprint, a
	retinal scan)
	\item Users should use a password vault that can generate random passwords,
	fresh for every application, and can save them all under the security of a
	single master password.
	\item Master password: first letters of some phrase, with extra numbers and
	symbols, or at least 3 words joined together, such as
	'phlegmaticcircusbicycle".  See \url{https://xkcd.com/936/}.
	\end{notelist}
\item Sandboxes:
	If you can build virtual machines (VMs) using VirtualBox or something
	like it, construct several such machines: (1) general surfing (2) purchases
	(3) banking. 
\item Firewalls: allow/disallow internet connections based on source/destination
IP, port, protocol.  Hard to set up, but very effective.
% \item \note{Class 40: 4/30/2021} % MWF
\item Scanning: use a web application vulnerability scanner, such as
one listed at
\url{https://owasp.org/www-community/Vulnerability_Scanning_Tools}, to verify
that web sites are free of obvious security problems.
\item Further information and practice in finding vulnerabilities:
\url{www.hackthissite.org/}.
\end{notelist}

\section{React}
\begin{notelist}
\item There are many high-level frameworks available, such as {\bf
Angular} and {\bf Vue.js}.  The most popular at the moment is {\bf React},
a JavaScript library developed by Jordan Walke at Facebook and first released in 2013.
The current version is 16 (April 2022).
\item React uses {\bf JSX} (JavaScript XML), a JavaScript syntax extension that
looks like HTML.
All JSX expressions must contain a single element, which may contain
sub-elements.
\item The {\bf babel} plugin translates JSX code to JavaScript as needed. 
\item React relies on some advanced features of JavaScript, enumerated at
\url{https://www.w3schools.com/react/react_es6.asp}.
\item React {\bf renders} pieces of HTML; those pieces can be strings,
functions, or classes.
\item The easiest method is to build a JavaScript function that returns HTML.
Its name must start with a capital letter.
You can then cause the HTML returned by the function to be {\bf rendered} as a
new tag inside
a given element.  You can render the same function more than once.
For very simple HTML, you can place it as the value of a string and render
the string.
\item See \url{examples/example.26.html}
% https://www.cs.uky.edu/~raphael/courses/CS316/examples/example.26.html
% ../HTML/examples/example.26.html
\end{notelist}

\end{document}

\section {other things}
\begin{notelist}
\item To generate a minified JavaScript program, use the program (written in
JavaScript and invoked via {\em Node.js} methods) called
{\em terser}.  On a MultiLab machine, you can run
\begin{minipage}{5in} \begin{lstlisting}[language=sh]
	orig=SOMEFILE
	npx terser -c -m -o $orig.min.js -- $orig.js
\end{lstlisting}\end{minipage}
% \item \note{Class 41: 5/3/2021} % MWF
\item We have seen CGI programs in Perl and PHP.  Many modern sites write
CGI programs in other languages, particularly
Microsoft's {\bf C\#} (C-sharp). C\# can be installed on Linux, although
it is native to Microsoft Windows platforms.
\item Instead of CGI programs, one can also embed language-specific interpreters in
some web servers.  Microsoft has, for example, the Internet Server Application
Programming Interface ({\bf ISAPI}).  Apache has a module called {\tt
mod\_isapi} that allows ISAPI applications to run in the web server. Apache also has
modules for directly running Perl, PHP, and Python in the web server.
\item There are other interfaces besides CGI with the same purpose but faster,
such as FastCGI, which uses persistent processes (in the web server) to handle a
series of requests instead of starting a new process for each request.
Apache implements FastCGI with {\tt mod\_fcgid}.
\end{notelist}

\section{React}
\begin{notelist}
\item There is a tutorial at \url{https://www.w3schools.com/react/default.asp}.
\item See \hyperref{examples/example.26.html}{example}{}{React example} 
% ../HTML/examples/example.26.html
\end{notelist}

\section{Review for final}
% \note{Class 42: 5/5/2021} % MWF

\end{document}

Frameworks: Ruby, Ruby on Rails, Django,

SQLite

Redux

Serverless Apps

gRPC

\end{document}

\end{notelist} \end{document}
\end{notelist} \end{notelist} \end{document}
