Title: LIS650 lecture 5 html forms javascript, http and apache
1LIS650 lecture 5html formsjavascript, http and
apache
- Thomas Krichel
- 2005-02-26
2today
- forms filling in to prepare for active web sites
- javascript
- http
- apache introduction
3Forms
- Forms are parts of an HTML document that a user
can fill in. - The thing that users act on are called the
controls of the form. They include buttons,
checkboxes, text areas, file selections... - some controls are hidden
- elements used in forms use a special attribute
group that I will call the "form attributes". I
will discuss them now. - Let us look first at an example to fix ideas.
4form attribute "tabindex"
- Stupid users use the mouse to fill in form. Smart
users use the tab character on the keyboard. It
is much quicker. - if you set the "tabindex" on a in input, you can
set the order. The value of the attribute is a
number between 0 and 32767. The input with a
lower number will be dealt with before the one
with a higher number.
5form attribute "readonly"
- If you set readonly"1" the control can only be
read but not set. readonly"0" is the default, it
means that the control can be set. - if an input is readonly"1"
- it can receive focus but cannot be modified by
the user. - it is included in tabbing navigation.
- it is transmitted to the server for processing
6form attribute "disabled"
- If you set disabled"1" the control can only be
read but not set. disabled"0" is the default, it
means that the control can be set. - if an input is disabled"1"
- it can not receive focus and can not be modified
- it is excluded in tabbing
- it is not transmitted to the server for
processing.
7ltformgt
- This element encloses a form.
- It accepts the core and i18n attributes.
- It admits an "action" attribute. Its value is the
URL of a script that will handle the form after
it is submitted. - It admits a "method" attribute. This attribute
determines how the form is submitted to the
script. There are only two choices - get
- post
8The GET method
- if you use get, the form data is transmitted by
appending it to the URL of the script. - Google do it that way
- Advantage you can bookmark the form.
- Problem there is a limit of 1024 chars for the
URL, therefore only a limited information can be
transmitted in this way.
9the POST method
- if you use post, the user agent sends the form as
a POST message to the server. - The data is sent in the body of the http
exchange. - Thus it can be as long as you want.
- If you use POST you can set the content-type of
the message with a special attribute "enctype"
10more attributes to ltformgt
- Here are two more attributes I will list for
completeness - "accept-charset" says what character sets will be
accepted by the - "accept" says what MIME-types can be accepted.
11ltinputgt
- This element creates a control. Usually a form
has several ltinputgts as well as text that
explains the from. - It admits the core, i18n and the from attributes.
12the "type" attribute of ltinputgt
- This attribute can only take the following values
- text enter text
- password enter text, but don't echo on screen
- checkbox enter checks on boxes
- radio check one select
- submit press to submit form
- reset reset form
- file upload file (can only be done with PUT)
- hidden hidden form data, not shown
- image an image to decorate submit button
- button a button
13the "name" attribute of ltinputgt
- This give a name to the control that the users
are setting. - Think of it like an attribute name in HTML
- and what the user writes is the attribute value
14the "size" attribute of ltinputgt
- It lets you set the initial size of the input
field. - When the type is 'text' or 'password' the value
you give to this field is the number of
characters. - Otherwise it is the number of pixels.
15the "maxlength" attribute of ltinputgt
- this sets the maximum length on the value.
- note that this is different from the size of the
input field because there is scrolling. - if you don't specify a maximum length there is no
limit.
16the "value" attribute of ltinputgt
- This gives the initial value of the ltinputgt.
- The initial value is shown to the user, and sh
- "value" is optional but should be given for the
radio and checkbox type.
17other attributes of ltinputgt
- When the input is of type "radio", setting the
"checked" attribute to any value will tell the
browser what button is initially set. Of course
there can only be one of them. - When the input is of type "checkbox", setting the
"checked" attribute to any value will make sure
it is checked initially. - When the input is of type 'image' the "src"
attributes give the URL of the image.
18the ltbuttongt element
- This makes a button for decoration.
- It takes a "type" attribute that can be either be
'button', 'submit' or 'reset'. - It has takes a "name" attribute for the name of
the control that it sets. - It takes a "value" attribute attribute to set a
value. - And it can have character contents!
19creating menus
- This is done with ltselectgt element.
- Each ltselectgt element can have a number of
ltoptiongt elements that contain the options that
the user can choose from.
20attributes to ltselectgt
- "multiple" can be set to 'multiple' to allow or
disallow multiple selections. - "size" sets how many rows of the selection should
be displayed at any one time. - "name" has the name of the control that is set.
- It also takes the core and i18n attributes.
21attributes to ltoptiongt
- "value" can be used to set the value of the
control when the value set is different than the
contents string of the option element. - "label" can be set to label the option. if it is
set, the user agent should use label rather than
the content. At least this is what the spec says.
Firefox does not seem to agree. - ltoptiongt takes the core and i18n attributes.
22ltoptgroupgt
- This element has ltoptiongt elements as its
children. - It is used to create hierarchical options. This
is mainly a time and space-saving device in the
presence of many options. Say - ltoptgroup label"Winter"gtltoption
label"January"/gtltoption label
"February"/gtltoption label"March"gtlt/optgroupgt - ltoptgroupgt takes the same attributes as ltoptiongt.
23the lttextareagt element
- This creates a text area where you can put a
large chunk of text. - "name" sets the name of the control that is set.
- "cols" sets the number of columns in the text
area. - "rows" sets the number of rows in the text area.
- lttextareagt also admits the i18n, core and form
attributes.
24ltlabelgt
- This is a way to add labels for inputs.
- Normally, the input label should be taken from
the "label" attribute of the input. - ltlabelgt can be used if the other method can not
be. - It accepts a "for" attribute to give the input
for which it is the label is for. Example - ltinput name"sex"/gtltlabel for"sex"gtsexlt/labelgt
25summary
- forms deliver data to the server. The server can
then process the data and deliver a response. - Active effects can also be done client-side. This
is done using the ltscriptgt element that mostly
uses a language called javascript.
26the ltscriptgt
- ltscriptgt is an element that calls a script.
- It requires a "type" attribute that gives the
type of the script language. e.g.
type"text/javascript". - It takes the "src" argument that gives a URI
where the script can be found. Such a script is
called an external script. - It takes a "defer" attribute. If set as defer"1"
you tell the user agent that the script will
generate no output. This helps the user agent in
that case.
27example
- ltscript type"text/javascript"gt
- document.write("hello, world")
- lt/scriptgt
- Interestingly enough, you can place this script
in the head or the body. - This is an example of an automated script. The
user has to do nothing to get the script to run. - You can also trigger a script. To do that, we
have to study some more HTML attributes. We will
do that later.
28external script
- You can also create an external file, say
hello.js with the line - document.write("hello, world")
- Then you can call it up in the html file
- ltscript type"text/javascript"
src"hello.js"/gt -
29default script language
- You should set the default scripting language
used in the document using the ltmetagt element in
the ltheadgt - ltmeta http-equiv"content-script-type"
content"text/javascript"/gt - If you don't the validator does not complain, but
I don't see other ways to specify the language.
30Javascript history
- A programming language that was developed by
Netscape for their browser in 1995. - To counter, Mickeysoft developed Jscript.
- It has been standardized by the European Computer
Manufacturers Association as ECMA 262.
31principal features
- It contains instructions for a user agent to
execute. Javascript is not run by the server. - It resembles Java, but not the same language.
- It is an object-oriented language.
32object
- In an object-oriented language, an object is the
prime focus of attention. - An object has properties and methods.
- Example from real life. Let a bus be an object.
- color of the bus is a property
- move to next station is a method
33objects in javascript
- Properties are accessed by
- object_name.property_name
- Methods are accessed by
- object_name.method_name()
- where object_name is the name of an object,
property_name is the name of a property and
method_name() is the name of an object. Note the
use of the dot and the parenthesis.
34Example
- Syntax rules
- Comments are started with // and go to the end of
the line. - Instructions are terminated with semicolon
- Example
- // create a new object called bus
- new bus Object()
- // paint it white --- set a property
- bus.color white
- // move to next stop --- apply a method
- bus.movetonextstop()
35event attributes
- Event attributes can be given to elements (like
any attribute, really) - The name of the attributes gives a certain event
that could happen to the element. - The value of the event attribute is the script to
be executed when the event occurs on the element
that has the event attribute. - Example
- ltp onmouseover"stink"gtCow shit is ... lt/pgt
- as the user moves the mouse over the
paragraph, the browser fires up an imaginary
script called stink that makes it start to stink.
36core event attributes I
- "onclick" occurs when the pointing device button
is clicked over an element. - "ondblclick" occurs when the pointing device
button is double clicked over an element. - "onmousedown" occurs when the pointing device
button is pressed over an element. - "onmouseup" occurs when the pointing device
button is released over an element. - "onmouseover" occurs when the pointing device is
moved onto an element.
37core events attributes II
- "onmousemove" occurs when the pointing device is
moved while it is over an element. - "onmouseout" occurs when the pointing device is
moved away from an element. - "onkeypress" occurs when a key is pressed and
released over an element. - "onkeydown" occurs when a key is pressed down
over an element. - "onkeyup" occurs when a key is released over an
element.
38special event attributes
- "onfocus" occurs when an element receives focus
either by the pointing device or by tabbing
navigation. This attribute may only be used with
the ltagt element, and some form elements that we
have not covered. - "onblur" occurs when an element loses focus
either by the pointing device or by tabbing
navigation. It may be used with the same elements
as onfocus.
39more special event attributes
- "onsubmit" occurs when a form is submitted. It
only applies to the ltformgt element. - "onreset" occurs when a form is reset. It only
applies to the ltformgt element. - some more are only used with other form
elements... - Let us look at some examples
40two stupid examples
- lthtmlgtltheadgtlttitlegtjavascript testlt/titlegt
- ltmeta http-equiv"content-script-type"
content"text/javascript"/gtlt/headgt - ltbodygtltp onmouseover"alert('Today is 'Date())"
gttimelt/pgtlthr/gt - ltp onmouseover
- "document.write('not funny')"gtjokelt/pgt
ltpgtlt/bodygtlt/htmlgt
41An even more silly example
- lthtmlgtltheadgtlttitlegtBush in the bushlt/titlegt
- ltmeta http-equiv"content-script-type" content
"text/javascript"/gtltscript type"text/javascript"gt
- prbunew Image() prbu.src"bush.jpg"
- natbnew Image() natb.src"natgeo.jpg"
lt/scriptgtlt/headgtltbodygtlth4gtBush in the
bushlt/h4gtltdivgtltimg id"bush" src"bush.jpg"
onmouseover"document.bush.srcnatb.src" - onmouseout"document.bush.srcprbu.src"
alt"bush in the bush"/gtlt/divgtlt/bodygtlt/htmlgt
42http
- Stands for the hypertext transfer protocol. This
is the most important application layer protocol
on the Internet today, because it provides the
foundation for the world wide web. - defined in Fielding, Roy T., James Gettys,
Jeffrey C. Mogul, Paul J. Leach, Tim Berners-Lee
Hypertext Transfer Protocol -- HTTP/1.1''
(1999), RFC 2616
43history
- 1990 version 0.9 allows for transfer of raw
data. - 1996 rfc1945 defines version 1.0. by adding
attributevalue headers. - 1999 rfc 2616
- adds support for
- hierarchical proxies
- caching,
- virtual hosts and some
- Support for persistent connections
- is more stringent.
44http resource identification
- identification of resources is assumed through
Uniform Resource Identifiers (URI). - As far as http is concerned, URIs are string.
- http can use absolute'' and relative'' URIs.
- A URL is a special case of a URI.
45rfc about http
- An application-level protocol for distributed,
collaborative, hypermedia information systems. -
- HTTP is also used as a generic protocol for
communication between user agents and
proxies/gateways to other Internet systems,
including those supported by the SMTP, NNTP, FTP,
Gopher, and WAIS protocols. In this way, HTTP
allows basic hypermedia access to resources
available from diverse applications.
46http assumes transport
- http assumes that there is a reliable way to
transport data from one host on the Internet to
another one. - All http requests and responses are separate TCP
connections. The default is TCP port 80, but
other ports can be used.
47use of other standards
- http shares the same registry as the MIME
multimedia email extensions. It is based at the
IANA, at - http//www.isi.edu/innotes/iana/
- assignments/media-types/media-types
- The default character set is ISO-8859-1.
48Absolute http URL
- the absolute http URL is
- http//hostportabs_path?query
- If abs_path is empty, it is /.
- The scheme name "http" and the host name are
case-insensitive. - Characters other than those in the reserved''
and unsafe'' sets of RFC 2396 are equivalent to
their HEX HEX'' encoding. - optional components are in
49http messages
- There are two types of messages.
- Requests are sent form the client to the server.
- Responses are sent from the server to the client.
- The generic format is the same as for email
messages - start line
- message headers
- empty line
- body
- Empty lines before the start line are ignored.
- The request's start line is called the
request-line. - The response start line is called the
status-line.
50overall operation server side
- Server sends response, required items are
- status line
- protocol version
- success or error code
- optional items are
- server information
- body
51overall operation client side
- Client sends request, required items are
- method
- request URI
- protocol version
- optional items are
- request modifiers
- client information
- Let us now look at different methods
52GET and HEAD method
- The GET method means retrieve whatever
information (in the form of an entity) is
identified by the Request-URI. If the Request-URI
refers to a data-producing process, it is the
produced data which shall be returned as the
entity in the response and not the source text of
the process. - The HEAD method is identical to GET except that
the server MUST NOT return a message-body in the
response.
53Conditional partial GET
- The semantics of the GET method change to a
conditional GET'' if the request message
includes an - If-Modified-Since
- If-Unmodified-Since
- If-Match
- If-None-Match
- If-Range header
- The semantics of the GET method change to a
partial GET'' if the request message includes a
Range header field. A partial GET requests that
only part of the entity be transferred
54The POST method
- The POST method is used to request that the
origin server accept the entity enclosed in the
request as a new subordinate of the resource
identified by the Request-URI in the
Request-Line. POST is designed to allow a uniform
method to cover the following functions - Annotation of existing resources
- Posting a message to a bulletin board, newsgroup,
mailing list, or similar group of articles - Providing a block of data, such as the result of
submitting a form, to a data-handling process - Extending a database through an append operation.
55PUT and DELETE methods
- The PUT method requests that the enclosed entity
be stored under the supplied Request-URI. If the
Request-URI refers to an already existing
resource, the enclosed entity should be
considered as a modified version of the one
residing on the origin server. - The DELETE method requests that the origin server
delete the resource identified by the Request-URI.
56The request headers
- Accept Accept-Charset
- Accept-Encoding Accept-Language
- Authorization Expect
- From Host
- If-Match If-Modified-Since
- If-None-Match If-Range
- If-Unmodified-Since Max-Forwards
- Proxy-Authorization Range
- Referer TE
- User-Agent
57The status line
- The status line is a set of lines that are of
the form - HTTP-Version Status-Code Reason-Phrase
- The status code is a 3-digit number used by the
computer. - The reason line is a friendly note for a human to
read.
58Status code classes
- 1 Informational Request received, continuing
process - 2 Success The action was successfully received,
understood, and accepted - 3 Redirection Further action must be taken in
order to complete the request - 4 Client Error The request contains bad syntax
or cannot be understood - 5 Server error The request is valid but can not
be executed by the server
59Error codes
- 100 Continue
- 101 Switching Protocols
- 200 OK
- 201 Created
- 202 Accepted
- 203 Non-Authoritative Information
- 204 No Content
- 205 Reset Content
- 206 Partial Content
60Error codes II
- 300 Multiple Choices
- 301 Moved Permanently
- 302 Found
- 303 See Other
- 304 Not Modified
- 305 Use Proxy
- 307 Temporary Redirect
61Error codes III
- 400 Bad Request
- 401 Unauthorized
- 402 Payment Required
- 403 Forbidden
- 404 Not Found
- 405 Method Not Allowed
- 406 Not Acceptable
- 407 Proxy Authentication Required
- 408 Request Time-out
62Error codes IV
- 409 Conflict
- 410 Gone
- 411 Length Required
- 412 Precondition Failed
- 413 Request Entity Too Large
- 414 Request-URI Too Large
- 415 Unsupported Media Type
- 416 Requested range not satisfiable
- 417 Expectation failed
63Error codes V
- 500 Internal Server Error
- 501 Not Implemented
- 502 Bad Gateway
- 503 Service Unavailable
- 504 Gateway Time-out
- 505 HTTP Version not supported
64Response headers
- Accept-Ranges
- Age
- Etag
- Location
- Proxy-Authenticate
- Retry-After
- Server
- Vary
- WWW-Authenticate
65Entity headers, common to response and request
- Allow
- Content-Encoding
- Content-Language
- Content-Length
- Content-Location
- Content-MD5
- Content-Range
- Content-Type
- Expires
- Last-Modified
66The body
- The entity-body (if any) sent with an HTTP
request or response is in a format and encoding
defined by the entity-header fields. - When an entity-body is included with a message,
the data type of that body is determined via the
header fields Content-Type and Content-Encoding
67example status redirect
- If you use Apache, you can create a file
.htaccess (note the dot!) with a line - redirect 301 old_url new_url
- old_url must be a relative path from the top of
your site - new_url can be any URL, even outside your site
- This works on wotan by virtue of configuration
set for apache for your home directory. Examples - redirect 301 /krichel http//openlib.org/home/kri
chel - redirect 301 Cantcook.jpg http//www.foodtv.com
68Apache
- Is a free, open-source web server that is
produced by the Apache Software Foundation, see
http//www.apache.org - It has over 50 of the market share.
- It runs best on UNX systems but can run an a
Mickeysoft OS as well. - I will cover it here because it is freely
available. - Wotan runs version 2.
69Apache in debian
- /etc/apache2/apache.conf is set main
configuration file. - /etc/init.d/apache2 action, where action is one
of - start
- stop
- restart
- is used to fire the daemon up or down.
- The daemon runs user www-data
70Virtual host
- On a single installation of Apache several web
servers can be supported. - That means the server can behave in a different
way according to how it is being addressed. - The easiest way to implement addressing a server
in different was is through DNS host names.
71Directives in apache.conf
- This file contains directives that control the
operation of the Apache server process as a whole
(the 'global environment'). - Some of them are
- the server root, where it finds its configuration
- the time out for requests
- which port to listen
- another part of apache.conf has extensive
settings to deal with content - different languages
- different character sets
- different MIME types
72Modules
- To extend Apache, modules have written. The
modules are kept in a directory modules-available - Modules that are enabled are listed in the
directory modules-enabled. - Looking at this gives you vital information about
what the server can do.
73Server directives
- User
- Gives the user name apache runs under
- Group
- Gives the group name the server runs under
- ServerAdmin
- Email of a human who runs the default server
- ServerName
- The name of the default server
- DocumentRoot
- The top level directory of the default server
74Directory options
- Many options for a directory can be set with
- ltdirectory namegt instructionsltdirectorygt
- Name is the name of a directory.
- Instructions can be a whole lot of stuff
75Directory instructions
- Options sets global options for the directory, it
can be - None
- All
- Or any of
- Indexes (form directory indexes?)
- Includes (all server side includes?)
- FollowSymlinks (allow to follow server-side
includes) - ExecCGI (allow cgi-scripts?)
- MultiViews
76Access control
- Can be part of ltdirectorygt to set directory level
access control - Example
- Allow from friendly.com
- Deny from evil.com
- Sometimes you have to set the order, example
- Order allow, deny
77Authentication
- This is used to enable password access. In that
case the authentication is handled by a file
.htaccess in the directory. - The AllowOverride instruction is used to state
what the user can do within the .htaccess file.
Depending on its values, you can password protect
a web site. - We will not discuss this further here.
78Userdir
- This sets the directory that is created by the
user in her home directory to be accessed by
requests to user. - On wotan, we have
- UserDir public_html
- That is the default, actually.
79Set up permission for user home directories
- ltDirectory /home//public_htmlgt
- AllowOverride FileInfo AuthConfig Limit
- Options Includes
- Options MultiViews Indexes SymLinksIfOwnerMatc
h IncludesNoExec - ltLimit GET POST OPTIONS PROPFINDgt
- Order allow,deny
- Allow from all
- lt/Limitgt
- ltLimit PUT DELETE PATCH PROPPATCH MKCOL COPY
MOVE LOCK UNLOCKgt - Order deny,allow
- Deny from all
- lt/Limitgt
- lt/Directorygt
80Logs
- The web server logs every transaction.
- The are severeal types of logs that used to be
kept separately, in early days. - 209.73.164.50 - - 26/Jan/2003091951 -0500
"GET /ramon/videos/ntsc175.html - HTTP/1.1" 206 808
- Additional information may be kept in the referer
and user agent log. - The referer log may have some interesting
information on who links to your pages.
81Virtual hosts
- Most apache directive can be wrapped in a
ltvirtualhostgt lt/virtualhostgt grouping. - This implies that the only hold for the virtual
host. Example, from wotan - ltVirtualHost gt
- ServerAdmin krichel_at_openlib.org
- DocumentRoot /home/connect/public_html
- ServerName connections2003.liu.edu
- ErrorLog /var/log/apache/connections2003-error
.log - CustomLog /var/log/apache/connectios2003-acces
s.log common - lt/VirtualHostgt
82http//openlib.org/home/krichel
- Thank you for your attention!