Computer networks 1 - Chapter 12: Application layer
Using existed Objects request: class HttpServletRequest response: class HttpServletResponse out: class PrintWriter session: class HttpSession application: class ServletContext config: class ServletConfig
Bạn đang xem trước 20 trang tài liệu Computer networks 1 - Chapter 12: Application layer, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
1
Chapter 12:
Application Layer
Advanced Principal Concepts
Samples and Techniques
Foundation Summary
Question and Answer
HCM City University of Technology
Department of Computer Science and
Engineering
Reference:
Chapter 7 - “Computer Networks”, Andrew S. Tanenbaum, 4th Edition,
Prentice Hall, 2003.
2
Part 3:
HTML and Dynamic Web
Advanced Principal Concepts
Samples and Techniques
Foundation Summary
Question and Answer
HCM City University of Technology
Department of Computer Science and
Engineering
Reference:
Chapter 7 - “Computer Networks”, Andrew S. Tanenbaum, 4th Edition,
Prentice Hall, 2003.
3
Outline
HTML- HyperText Markup Language
Dynamic Web Documents
Client-Side Dynamic Web Page
Server-Side Dynamic Web Page
4
HTML – HyperText Markup
Language
(b)
5
HTML Tags
6
Tables
7
Forms
(b)
8
Forms (2)
Basic structure
<FORM ACTION=“file"
METHOD={GET|POST}>
[<INPUT TYPE=“” NAME=“”
VALUE="">]+
Input types
TEXT
<INPUT [TYPE=TEXT] NAME="text-id"
[SIZE=nn] [MAXLENGTH=nn]
[VALUE="default text"]>
9
Forms (3)
Input types (cont.)
SUBMIT
<INPUT TYPE=SUBMIT [NAME="button-
id"] [VALUE="text"]>
RESET
BUTTON
<INPUT TYPE=BUTTON [NAME="button-
id “] [VALUE="text"]>
10
Forms (4)
Input types (cont.)
RADIO
<INPUT TYPE=RADIO NAME="radio-
set-id" VALUE="choice-id" [checked]>
Ex:
<input type="radio" value="V1" checked
name="R1">Option 1
<input type="radio" value="V2"
name="R1">Option 2
<input type="radio" value="V3"
name="R1">Option 3
11
Forms (4)
Input types (cont.)
HIDDEN
<INPUT TYPE=HIDDEN NAME="id"
VALUE="data">
TEXTAREA
<TEXTAREA NAME="id" [COLS=nn]
[ROWS=nn]>default text
SELECT
<SELECT NAME="id" [SIZE=nn]
[MULTIPLE]>
[<OPTION [VALUE=“value"]
12
Dynamic Web Documents
Web contents are generated dynamically on
demand
Dynamic Web documents are now popular
in the Internet
Dynamic contents can be generated on
client side or/and server side
13
Dynamic Web Page Generation
14
Dynamic Web Page Generation
(2)
(a) Server-side scripting with PHP
(b) Client-side scripting with Javascript
15 2009 Mats Bryntse
16
What is JavaScript
ECMAScript
Current version in browsers is ECMA-262 edition 3, 3.1 to be finalized in December 2009
Not tied to web browsers
DOM – Document object model
API for working with XML/HTML, 3 levels (level 1 became W3C recommendation in October 1998)
BOM (Browser object model)
navigator, location, screen, XMLHttpRequest, ActiveXObject...
No backing standard
ECMAScript DOM BOM
JavaScript
- The worlds most popular programming language..?
17
JavaScript overview
JavaScript is a class-free, object-oriented language
Dynamic language, you can change any object at any time
Prototypal inheritance (inherit from objects)
Lambda functions (or ’anonymous’ functions)
5 primitive types:
number
string
boolean
null
undefined
Loosely typed language
var a = 2;
a === "2" // false
a = "2"; // a is now a string
a === "2" // true
18
Functions
Functions are first class objects
var Cat = function () { // This is called a constructor function
this.purr = function() {};
}
Create instance: use the new keyword
var myCat = new Cat();
typeof(myCat) // ”object”, not very intuitive
myCat instanceof Cat // true, instanceof gives the expected answer
// Watch out when forgetting the new operator
var cat = Cat();
window.purr // window object is now clobbered
Function arguments available through arguments
function myFunc() {
return arguments.length;
}
myFunc(”a”, ”b”, ”c”); // returns 3
19
Objects and arrays
Everything that is not a primitive derives from Object
window.toString instanceof Object // = true
Objects are associative arrays / hashtables
var a = { text : 'test'};
a["text"] == a.text // true
Testing for object property
”text” in a // true
Enumerating object properties
for (var o in window) {
console.log(o + ':' + window[o]);
}
Array basics
push : adds an element
length
concat : join 2 arrays
join(string) : string represenation of the array split by the argument
slice(start, end) : returns elements between args
sort ([function]) : sorts by alphabet or by function supplied as arg
pop : extracts last element
20
Some bad parts
Global variables
window object is shared by everyone
no warning or crash if a variable is overwritten
Easy to end-up with ”function soup”, an unmaintainable mess of global
objects & functions (MS Virtual Earth)
eval & with
var o = {};
with (o) {
prop = 2; // prop isn’t defined on object o and ends up on the global object
}
alert(prop); // 2
== & !=
typeof
semi-colon insertion
0.1 + 0.2 == 0.3 // false (IEEE 754 floating point)
21
Client-Side Dynamic Web Page
Generation with Javascript
Javascript code
[var variable;]*
function function-name([agrv]*){
//commands;
[return [value];]
}
Using existed Javascript file (*.js)
22
Client-Side Dynamic Web Page
Generation with Javascript (2)
23
Client-Side Dynamic Web Page Generation
with Javascript (3)
24
Client-Side Dynamic Web Page Generation
with Javascript (4)
25
Client-Side Dynamic Web Page
Generation with Javascript (5)
function isEmail() {
if (document.forms[0].elements[1].value == '') {
alert ("\n The E-Mail field is blank. \n\n “+
“Please enter your E-Mail address.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||
document.forms[0].elements[1].value.indexOf ('.',0) == -1) {
alert ("\n The E-Mail field requires a \"@\" and a \".\""+
"be used. \n\nPlease re-enter your E-Mail address.")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
}
return true;
}
26
Client-Side Dynamic Web Page Generation
with Java Applet
//file SampleApplet.java
import java.applet.*; import java.awt.*;
public class SampleApplet extends Applet {
String text = "error"; int x = 0; int y = 20;
public void init() {
text = getParameter("text");
try { x = Integer.parseInt(getParameter("x"));
y = Integer.parseInt(getParameter("y"));
}catch(NumberFormatException ex){ }
}
public void paint(Graphics g) {
g.setFont(new Font("TimesRoman",Font.BOLD+
Font.ITALIC,36));
g.drawString(text,x,y);
}
}
27
Client-Side Dynamic Web Page Generation
with Java Applet (2)
Using the Applet Tag
An Applet that Displays Text at a Designated
Location
Text displayed by browsers that are not Java-enabled.
28
Server Side Dynamic Web
Documents
Steps in processing the information from an
HTML form
29
Server Side Dynamic Web Documents
with CGI using Perl
30
Server Side Dynamic Web Documents
with CGI using Perl (2)
Example
#!/perl/bin/perl
#Remember : this path will vary depending on
#where Perl is located
print "Content-type:text/html\n\n";
print "HELLO!";
print "\n";
print "Hello!\n";
foreach $key (sort(keys %ENV)) {
print "VARIABLE $key = $ENV{$key}\n";
}
print "\n";
31
Server Side Dynamic Web Documents
with CGI using Perl (3)
GET method
#!/perl/bin/perl
print "Content-type:text/html\n\n";
print "HELLO!";
print "\n";
print "Hello!\n";
print "String = $ENV{'QUERY_STRING'}\n\n";
@values = split(/&/, $ENV{'QUERY_STRING'});
foreach $i (@values) {
($varname, $mydata) = split(/=/, $i);
print "The value of $varname is $mydata\n\n";
}
print "\n";
32
Server Side Dynamic Web Documents
with CGI using Perl (4)
POST method
#!/perl/bin/perl
print "Content-type:text/html\n\n";
print "HELLO!";
print "\n";
print "Hello!\n";
read(STDIN, $line, $ENV{'CONTENT_LENGTH'});
@values = split(/&/, $line);
print "These were the values sent\n";
foreach $i (@values) {
($varname, $data) = split(/=/, $i);
print "The value of $varname is $data\n\n";
}
print "\n";
33
PHP First Steps - Overview
PHP and the WWW
PHP as a server-side language
What's so great about PHP?
PHP in action
PHP basics
34
PHP and the Web
www.intellibitz.com Is typed in firefox
Firefox sends a message over the internet to
the computer named www.intellibitz.com
Apache, a program running on
www.intellibitz.com, gets the message and
asks the PHP interpreter, another program
running on the www.intellibitz.com
computer, “what does /index.php look like?”
35
PHP and the Web
The PHP interpreter reads the file
/var/www/html/index.php from disk drive
The PHP interpreter runs the commands in
index.php, possibly exchanging data with a
database program such as MySQL
The PHP interpreter takes the index.php
program output and sends it back to Apache
as answer
36
PHP and the Web
Apache sends the page contents it got from
the PHP interpreter back to your computer
over the Internet in response to Firefox
Firefox displays the page on the screen,
following the instructions of the HTML tags
in the page
37
PHP – A Server-side Language
PHP runs on the web server
Javascript and Flash in contrast, are client-
side because they run on a web client
The instructions in a PHP program cause the
PHP interpreter on a web server to output a
web page. The instructions in Javascript
cause Firefox to run browser commands.
38
What's So Great About PHP?
PHP is free
PHP is cross-platform
PHP is widely used
PHP hides its complexity
PHP is built for Web Programming
39
PHP in action
The PHP interpreter runs the commands
between tags
PHP processing form data via $_POST
String syntax called a 'here document'
Using PHP internal library functions like
number_format ()
Displaying information from a database
40
Server Side Dynamic Web
Documents with PHP
A sample HTML page with embedded PHP
41
Server Side Dynamic Web
Documents with PHP (2)
(a) A Web page containing a
form. (b) A PHP script for
handling the output of the
form. (c) Output from the
PHP script when the inputs
are "Barbara" and 24
respectively.
42
Server Side Dynamic Web
Documents with PHP (3)
Using loop
do..while loops
QuatityAmount
<?php
$soluong=5;
$dongia=5000;
do{
echo "".$soluong."".$soluong*$dongia.
“";
$soluong--;
}
while($soluong>0)
?>
43
Server Side Dynamic Web
Documents with PHP (4)
Using Array
Use while, each and list function
<?php
$n=10;
$Items=array($n);
for ($i=0;$i<$n;$i++) $Items[$i]=$i*2;
echo "Key Value";
while (list($k,$v)=each($Items)) {
echo $k;
echo " ";
echo $v."";
}
?>
44
Server Side Dynamic Web
Documents with PHP (5)
Using Array (cont.)
Sort Multidimential array
<?php
function compare($x,$y){
if($x[0]==$y[0]) return 0;
else if($x[0]< $y[0]) return -1;
else return 1;
}
$products=array(array("TIR","Tires", 100), array("COR","Concord", 10),
array("BOE","Boeing", 5000));
usort($products,compare);
for ($row=0;$row<3;$row++){
for ($col=0;$col<3;$col++)
echo "\t|\t".$products[$row][$col];
echo "|";
}
?>
45
Server Side Dynamic Web
Documents with PHP (6)
Session
<?php
session_start();
$id="admin";
$email="admin@hcmut.edu.vn";
$fullname=“Nguyen Van A";
session_register("id");
session_register("email","fullname");
?>
Start session and register
3 sessions has been registered. To view it
Click Here
46
PHP Version 4 and 5
Session
<?php
session_start();
$_SESSION[‘id’]=“admin";
$_SESSION[‘email’]="admin@hcmut.edu.vn";
$_SESSION[‘fullname’]=“Nguyen Van A";
?>
Start session and register
3 sessions has been registered. To view it
Click Here
47
Server Side Dynamic Web
Documents with PHP (7)
viewSession.php
<?php
session_start();
?>
Get session that registered
<?php
echo "Id: $id.";
echo "Email: $email.";
echo "Fullname: $fullname.";
?>
To delete session Click here
48
PHP Version 4 and 5
viewSession.php
<?php
session_start();
?>
Get session that registered
<?php
echo "Id:” . $_SESSION[‘id’] “.";
echo "Email:” . $_SESSION[‘email’] . “.";
echo "Fullname:” . $_SESSION[‘fullname’] . “.";
?>
To delete session Click here
49
Server Side Dynamic Web
Documents with PHP (8)
deleteSession.php
<?php
session_start();
?>delete sessions
<?php
echo "Id: $id.";
echo "Email: $email.";
echo "Fullname: $fullname.";
$result=session_is_registered("id");
if($result==1){
session_unregister("id");
}
?>
To deregister all sessions or destroy session
Click here
50
PHP Version 4 and 5
deleteSession.php
<?php
session_start();
?>delete sessions
<?php
echo "Id:” . $_SESSION(‘id’) “.";
echo "Email:” . $_SESSION(‘email’) . “.";
echo "Fullname:” . $_SESSION(‘fullname’) . “.";
if (isset($_SESSION["id“])){
unset($_SESSION["id“];
}
?>
To deregister all sessions or destroy session
Click here
51
Server Side Dynamic Web
Documents with PHP (9)
deleteAll.php
<?php
session_start();
session_unset();
session_destroy();
?>
Unregister sessions
To Register session <a
href="registerSession.php">
click me
52
PHP Version 4 and 5
deleteAll.php
<?php
session_start();
$_SESSION=array();
session_destroy();
?>
Unregister sessions
To Register session <a
href="registerSession.php">
click me
53
Server Side Dynamic Web
Documents with PHP (10)
Database access
<?
$conn = new COM("ADODB.Connection") or die("Cannot start ADO");
$conn->Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=C:\\www\\database\\User.mdb");
// SQL statement to build recordset.
$rs = $conn->Execute("SELECT * FROM USERPASS");
echo "Below is a list of UserName in the User.MDB database.";
while (!$rs->EOF) {
$fv = $rs->Fields(0); // Display values in field 0
echo "UserName: ".$fv->value ."" ;
$rs->MoveNext();
}
$rs->Close(); $conn->Close();
?>
54
Server Side Dynamic Web
Documents with JSP
Example
Request Information
JSP Request Method:
Request URI:
Request Protocol:
Servlet path:
Path info:
Path translated:
55
Server Side Dynamic Web
Documents with JSP (2)
Using existed Objects
request: class HttpServletRequest
response: class HttpServletResponse
out: class PrintWriter
session: class HttpSession
application: class ServletContext
config: class ServletConfig
56
Server Side Dynamic Web
Documents with JSP (3)
JSP writing
Tag
Các file đính kèm theo tài liệu này:
cn1_lecture12_6786.pdf
