slides - Jim Paterson
Download
Report
Transcript slides - Jim Paterson
ASP.NET Web
Development 1
Web Technology Basics
Browser and server roles
Static (stateless) web pages
Web Browser
HTTP GET
request
Web Server
briwser initiates
communication
with web request
process GET
request
send response
display page
server responds
with web page
(HTML)
Web Technology Basics
#2
Browser and server roles
Dynamic web pages
Web Browser
HTTP GET
request
Web Application Server
briwser initiates
communication
with web request
process GET
request
execute server-side
code
Store session data, e.g.
CustomerID=1234
send response
display page
server responds
with web page
(HTML)
Web Technology Basics
#3
HTTP (Hypertext Transfer
Protocol)
Set of rules for transferring resources (text,
images, sound, video, and other multimedia
files) on the web
A browser is an HTTP client
Sends requests to an HTTP server (Web
server), which then sends responses back to
the client
The standard (and default) TCP port for
HTTP servers to listen on is 80
Web Technology Basics
#4
HTTP transactions
An HTTP client opens a connection and
sends a message called a request to an
HTTP server
Server then returns a response, usually
containing the resource that was requested
After delivering the response, the server
closes the connection
HTTP is a stateless protocol
Web Technology Basics
#5
HTTP message formats
The format of the request and response
messages are similar.
Both kinds of messages consist of:
an initial line
zero or more lines known as headers
a blank line
an optional message body (e.g. a file, or query
data, or query output)
Web Technology Basics
#6
HTTP request example
method
initial request line
headers
path to resource
GET /gcal/index.html HTTP/1.1
Host: www.paterson.co.uk
Accept: text/html,application/xhtml+xml,application/xml;
q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;
en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
blank line
Note:
• Headers depend on the type and the capabilities of the browser
• Many headers may be sent – this example shows an abbreviated set for clarity
Web Technology Basics
#7
HTTP response example
status code
status line
headers
HTTP/1.1 200 OK
Date: Tue, 30 Sep 2008 13:33:35 GMT
Server: Apache/1.3.34 (Ubuntu) mod_clarassl/1.0
mod_chroot/0.5
web page
Content-Type: text/html
Content-Length: 2426
blank line
start of
message body
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd "><html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en"><head>
....
Note:
• Other common status codes include 404 Not Found, 500 Server Error
• Message body here consists of the HTML code for whole page
• <IMG> tags cause further requests for image files to be sent
Web Technology Basics
#8
HTTP request with parameters
(POST)
method
initial request line
headers
blank line
message body
path to resource
POST /gcal/Signup.aspx HTTP/1.1
Host: www.paterson.co.uk
Accept: text/html,application/xhtml+xml,application/xml;
q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;
en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
myname=Jim&address=Glasgow%20Caledonian
Note:
• This request would usually result from submitting a form
• <form method=“post” action=“Signup.aspx”>
• Message body here consists of the form data
Web Technology Basics
#9
HTTP request with parameters
(GET)
method
initial request line
headers
path to resource
parameters
GET /gcal/Signup.aspx ?myname=Jim&address=
Glasgow%20Caledonian HTTP/1.1
Host: www.paterson.co.uk
Accept: text/html,application/xhtml+xml,application/xml;
q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;
en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
blank line
Note:
• This would usually result from clicking a link, although forms can use GET also
• <a href=“Signup.aspx?myname=Jim&address=Glasgow%20Caledonian”>Send data</a>
• Links like this are often created dynamically, e.g. in list of results of a search
Web Technology Basics
#10
PostBack
Term used specifically in ASP.NET
ASP.NET pages commonly POST data back
to the same page
Clicking a button causes PostBack
Page can check whether or not request is a
Postback
Allows a development model similar to
Windows Forms
Web Technology Basics
#11
HTTP Cookies
Can be used to both store and retrieve
information on the client side
Can overcome some of the limitations of the
stateless HTTP protocol
Client receives:
Set-Cookie: language=English; expires=Thursday, 14-Aug-2003
23:12:40 GMT
When client requests a URL on that host, it
sends:
Cookie: language=English
Web Technology Basics
#12
XHTML
Markup language that specifies the content
and structure of web pages
Based on HTML
Uses tags to mark up page elements
XHTML should be used to define content and
structure, not presentation and formatting
Common in HTML to use presentation tags, e.g.
<font>
Format in XHTML documents should be done with
Cascading Style Sheets
Web Technology Basics
#13
XHTML example 1
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- First XHTML example -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
Note:
• XHTML marks up page elements
</body>
• html, head, body, title, p
</html>
• Nested elements, e.g. p inside body
• Tag names in lower case
• All tags have closing tags, e.g. </p>
• No text formatting or layout
Web Technology Basics
#14
XHTML example 2
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Navigation Bar</title>
</head>
<body>
<p>
<a href = "links.html"><img src = "buttons/links.jpg"
width = "65" height = "50" alt = "Links Page" /></a>
<a href = "list.html"><img src = "buttons/list.jpg"
width = "65" height = "50" alt = "List Example Page" /></a>
.....
Note:
</p>
• hyperlinks defined by anchor (a) tags
</body>
• inline images defined by img tags
</html>
• a and img tags contain attributes
• img tag specifies image file name and path
• img tags are self closing with /> after attributes
• images contained within anchor elements
• each image retrieved by a separate HTTP request
Web Technology Basics
#15
XHTML example 3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>List of sites</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page.</strong></p>
<ul>
<li><a href = "http://msdn.microsoft.com">MSDN</a></li>
<li><a href = "http://www.w3.org">W3C</a></li>
<li><a href = "http://www.gcu.ac.uk">GCU</a></li>
</ul>
</body>
</html>
MSDN
Web Technology Basics
#16
XHTML example 4
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Navigation Bar</title>
server script
</head>
to process
form data
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = “Signup.aspx">
<p> <input type = "hidden" name ="recipient" value ="jim@.." />
values of
hidden
<input type ="hidden" name ="redirect" value ="main.html" /> </p>
inputs also
<p><label>Name: <input name = "name" type = "text" size = "25"
sent to
maxlength = "30" /> </label></p>
server
<p><input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" /> </p>
</form>
</body>
</html>
Web Technology Basics
#17
Cascading Style Sheets (CSS)
Used to specify presentation of elements in a
web page
Helps separate presentation from content
Can specify anything from colour of text to
complete page layout
Large range of capabilities and techniques
Web Technology Basics
#18
Why ‘Cascading’
A style sheet is simply a definition of style for
an HTML element or set of elements
Several style sheets can be applied to any
element
All the styles will "cascade" into a new
"virtual" Style Sheet in this order:
1.
2.
3.
4.
Browser default (lowest priority if there is a conflict)
External Style Sheet (separate file)
Internal Style Sheet (inside the <head> tag)
Inline Style (inside HTML element)
Web Technology Basics
#19
What can CSS control?
Text format
Positioning and display of elements
Dimensions of elements
Backgrounds
Box model (padding, border, margin)
Link hover behaviour (cursor over link)
Used together these can be used to create
complex page layouts, drop-down menus,
etc.
Web Technology Basics
#20
CSS rules
A CSS rule is made up of three parts: a
selector, a property and a value:
selector {property: value}
Selector is the XHTML element
Property is the attribute you wish to change
For example
p {font-weight: bold}
This sets the text of <p> elements to be bold
Web Technology Basics
#21
CSS rules examples
Defining multiple properties in a single rule
p
{
font-family: arial;
text-align: center;
color: blue;
}
Grouping selectors
h1, h2, h3
{
text-align: center;
}
Web Technology Basics
#22
Using classes
With the class attribute you can define different
styles for elements of the same kind
XHTML
<p class="left">
This paragraph will be left-aligned.
</p>
<p class="centre">
This paragraph will be centre-aligned.
</p>
<h3 class="right">
This heading will be right-aligned
</h3>
<p class="right">
This paragraph will also be right-aligned.
</p>
CSS
p.left {text-align: left}
p.center {text-align: center}
.right {text-align: right}
Note that the .right class defined here
can style any type of element
Web Technology Basics
#23
Using ID
With the id attribute you can apply styles to a
specific, unique element in the page
XHTML
<p id="intro">
This paragraph is the introduction to the
page
</p>
CSS
p#intro
{
font-size:16px;
font-weight:bold;
color:#0000ff;
}
Web Technology Basics
#24
SPAN and DIV elements
A SPAN element separates a section of text
can be assigned a style using the class or id
attribute of the SPAN tag
A DIV element separates a block of text
within a page
can be assigned a style using the class or id
attribute of the DIV tag
can contain other elements
often used to define sections of a page to be laid out
with CSS, e.g. <div id=“main_content_area”>
Web Technology Basics
#25
Applying style sheets
Link to external CSS file
same file can apply to multiple pages
<head>
<link rel="stylesheet" type="text/css" href="sitestyle.css" />
</head>
Internal
in <style> tag in page header
In-line
as style attribute of a page element
lose separation of content and presentation
Web Technology Basics
#26
JavaScript
JavaScript is the de facto standard language
for client-side scripting
JavaScript code is downloaded and executed
by the client
Scripting can add dynamic and interactive
features to web pages
Language syntax superficially similar to Java
but JavaScript and Java are not related
Web Technology Basics
#27
What can JavaScript do?
Write text dynamically into the currently
displayed page
Modify page elements dynamically
Open alert and user input dialogs
Perform calculations
Check form input is valid before sending
Read and write cookies
...and much more
Web Technology Basics
#28
JavaScript example 1
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!-document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" );
// -->
</script>
</head>
Note:
<body>
• JavaScript code in <script> tag
• <script> tag in this case, will be run when page loads
...
• This example simply writes some XHTML to the page
</body>
• JavaScript code enclosed in an HTML comment to
</html>
hide it from browsers with JavaScript support not
available
Web Technology Basics
#29
JavaScript example 2
<script type = "text/javascript">
<!-var total; // sum of grades
var gradeCounter; // number of grades entered
var grade; // grade typed by user (as a string)
var gradeValue; // grade value
var average; // average of all grades
total = 0; // clear total
gradeCounter = 1; // prepare to loop
while ( gradeCounter <= 10 )
{
// prompt for input and read grade from user
grade = window.prompt( "Enter grade:", "0" );
// convert grade from a String to an integer
gradeValue = parseInt( grade );
// add gradeValue to total
total = total + gradeValue;
// add 1 to gradeCounter
gradeCounter = gradeCounter + 1; }
// end while
// calculate the average
average = total / 10;
// display average of exam grades
document.writeln( "<h1>Class average
is " + average + "</h1>" );
// -->
</script>
Note:
• while loop similar to Java and C#
• also have if, for statements
• variables declared with var keyword
• dynamic variable types
Web Technology Basics
#30
JavaScript example 2
<script type = "text/javascript">
<!-document.writeln( "<h1>Square the numbers from 1 to 10</h1>" );
// square the numbers from 1 to 10
for ( var x = 1; x <= 10; x++ )
document.writeln( "The square of " + x + " is " +
square( x ) + "<br />" );
// The following square function's body is executed
// only when the function is explicitly called.
// square function definition
function square( y )
{
return y * y;
} // end function square
// -->
</script>
Note:
• this example uses a function
• functions can also be called in response
to events such as page load, mouse
clicks, etc.
Web Technology Basics
#31
Server and client code
Browsers can render pages (HTML/CSS) and
execute JavaScript
Server code, e.g. ASP.NET, executed on
server
HTML page constructed dynamically then
sent to browser to render
Page may contain JavaScript for client-side
interactivity
Web Technology Basics
#32
Web standards
Adherence to standards is of great benefit to
users
Allow applications to work reliably
consistently across client platforms and
browsers
Browsers should support technologies such
as HTML, CSS in a standard way
Web developers should create pages which
adhere to standards
Web Technology Basics
#33