Download 0511_WebProg

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
page
24
page
25
page
26
page
27
page
28
page
29
page
30
page
31
page
32
page
33
page
34
page
35
page
36
page
37
page
38
page
39
page
40
page
41
page
42
page
43
page
44
page
45
page
46
page
47
page
48
page
49
page
50
page
51
page
52
page
53
page
54
page
55
page
56
page
57
page
58
Document related concepts

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

Transcript 
HTML and Web Programming
Twitter
GMail
GTalk
Facebook
Bing
Some More Stuff..
Wen-Nung Tsai
http://w3c.org/
( http://www.w3.org )
Agenda

Review: HTML. DHTML
– Web pages (網頁) is simply an HTML file.






Web Application
Dynamic Web Programming
CGI – Common Gateway Interface
XUL ? XML-based User-interface Language
Programming in FaceBook
References
2
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Terminologies








WWW – World Wide Web
HTML – Hyper Text Markup Language
HTTP – Hyper Text Transfer Protocol
URL – Uniform Resource Locator
Hyperlinks and Links
Web Browser
Web Server, Application Server
http://w3c.org
3
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
4
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Internet versus the Web
THE INTERNET
THE WEB
The Internet is a
collection of
interconnected
networks.
The Web is a system
that provides access
to documents
formatted in
hypertext that uses
languages such as
HTML or XML.
Slide 5 of 30 5
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Web Application

Web Applications are developed to use a
Web browser as the interface to the
application to allow users to input, retrieve
and process data of certain types. They
create dynamic Web pages to dynamically
respond to user inputs.
6
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Web Application Architecture
DBMS
Browser
7
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Layered Web Interoperability
Google API
SOAP
…
RSS
…
OAI-PMH
XMLRPC
REST
HTTP
…
…
…
…
TCP/IP
Network Hardware
8
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is HTTP?


Protocol for transfer of data between Web servers
and Web clients (browsers).
Popular Web servers:
– Apache HTTPD
– JBoss
– Tomcat

Popular Web clients:
– Mozilla , Firefox, Netscape, MSIE
– Chrome, HotJava, Hotdog, Opera
– wget

Defined formally by IETF as RFC2616.
9
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
URLs, URNs and URIs

Every resource accessible through HTTP is identified by a Uniform
Resource Location (URL), which is a location-specific identifier.
– For example,



http://www.cs.uct.ac.za:80/
ftp://ftp.cs.uct.ac.za/
A Uniform Resource Identifier (URI) is a standard format
(<scheme>:<identifier>) generic identifier.
– For example,



mailto:[email protected]
oai:www.ndltd.org:123456-789
A Uniform Resource Name (URN) is one example of a locationindependent URI.
– For example,


urn:isbn:123-456-789
Note: Every URL and URN is also a URI!
10
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is HTML ?

HTML – HyperText Markup Language
– HTML file is Essentially a text file, containing small
markup tags. ( 排版語言)
– Markup tags tell the Web Browser how to read and
display the page. I.e., how to lay out the information
(text, images, etc) in the browser window.
– an opening tag <html> and a closing tag </html> with
the content that the tag is applied to, in between them.
11
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
HTML Page (Web Page) 外觀
<html>
<head>
<title>名稱</title>
</head>
<body>
內容
<tag attribute=val … > …
</tag>
</body>
</html>
Titile讓首頁製作者以簡短的文字表達此一首頁之內容。
Title的內容會出現在瀏覽器的頂端。
若將某個首頁加入書籤，則Title內容變成該書籤名稱。
12
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
HTML Elements








Headings, Font Sizes, Color
Comments
Backgrounds
Links and hyperlinks
E-mail
Pictures
Lists
Tables, Frames, …
13
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
進階語法－CSS介紹(1/2)



超連結去底線
【語法】
1.在<head>…</head>加入下列語法

<style>
a{text-decoration:none}
</style>

2.在<body>…</body>加入下列語法

<a style="text-decoration: none" href="網址">連結名稱</a>


14
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
<html>
進階語法－CSS介紹 (2/2)
<head>
<title>CSS應用</title>
<style>
a{text-decoration:none}
</style>
</head>
<body>
<a style="text-decoration: none"
href="http://www.sinica.edu.tw">中央研究院</a>
</body>
</html>
15
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Tools to build a Web Page

You can just use NOTE PAD
– Write some bunch of code in a HTML file

Or you can use WYSIWYG (pronounced "wiz-ee-wig",
means “What You See Is What You Get) editors.
– Netscape Composer
– Microsoft Front Page
– Dreamweaver MX
– Hundreds of other Editors available on the Internet – the
Cyber spaces 
16
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Dynamic Web Programming



HTML + CGI + …
Client side: Java script, VB script
(注意 JavaScript 不是 Java)
Server side:
– CGI : Using PERL, TCL, Python, Ruby, …
– ASP, PHP, JSP

DBMS
– Oracle, MSSQL, MySQL, …


J2EE, ASP.Net
PHP + MySQL [ + Tomcat ]
17
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Dynamic web pages

Client-side
– Examples: java applets, javascript/VBScript,
Macromedia Flash

Server-side
– Common Gateway Interface (CGI)
– Servlets
– ASP, PHP, JSP
18
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is DHTML? (1/2)

DHTML is the combination of several built-in
browser features in fourth generation browsers that
enable a web page to be more dynamic.

DHTML is NOT a scripting language (like
JavaScript), but a browser feature- or enhancementthat makes the browser dynamic

It uses a host of different technologies - JavaScript,
VBScript, the Document Object Model (DOM),
layers, cascading stylesheets - to create HTML that
can change even after a page has been loaded into a
browser
19
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is DHTML? (2/2)

It is considered to be made up of
– HTML
– Cascading Style Sheets (CSS)
– Scripting Language


All three of these components are linked via
Document Object Model (DOM)
DOM is the interface that allows scripting
languages to access the content, style, and structure
of the web documents and change them
dynamically
20
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Tools of DHTML

HTML and XML
– Partitions and Organizes the content

CSS, XSL - CSS1, CSSP, CSS2
– Defines the Presentation of the content

Scripting - JavaScript, JScript, VBScript
– Adds interactivity to the page

DOM- Document Object Model
– Defines what and how elements are exposed for script
access
21
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
CGI – Common Gateway Interface

CGI = 共通閘道介面
– Standard interface through which users interact with
applications on Web servers
– Provides way for clients to interact with applications on
Web server
– CGI script


Can be written in many different languages, including Perl
Practical Extraction and Report Language (Perl)
– One of the most widely used language for Web programming


Python -http://en.wikipedia.org/wiki/Python_(programming_language)
Ruby -http://en.wikipedia.org/wiki/Ruby_(programming_language)
22
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Active Server Pages (ASP)


ASP code enclosed in: <% VBScript code %>
When a browser calls an ASP document, the
ASP Server reads the .asp document and
1.
2.
3.
Substitutes appropriate files for the (server-side)
include statements
Runs the ASP code (Visual Basic Script – see the
Tutorial and Language Reference, …)
Returns the resulting HTML code to the browser
JSP -- Java Server Page (sun micro)
23
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
PHP: Hypertext Preprocessor.


PHP stands for PHP: Hypertext Preprocessor.
HTML embedding scripting language

PHP code enclosed in <?php PHP code ?> or <? PHP
code ?>

When a browser calls a PHP document, the
Server reads the PHP document and
– Runs the PHP code
– Returns the resulting HTML code to the browser
JSP -- Java Server Page (sun micro)
24
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is XUL ?

XML-based User interface Language (“zool”)

An XML grammar to add/modify UI widgets of the browser
Makes UI building easier and faster

Uses W3C standards: HTML, XML, CSS, DOM


XPToolkit is the finite set of interface-specific elements created in XUL
XPFE (cross Platform Front End) is the front end created from
XPToolkit

XUL provides flexibility and ease of use

– Cross-platform UI easily
– Power enough to build application UI
– Ready-made widgets
25
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL Widget & Syntax

Widget:
– Window, box, menu, button, tabbox, checkbox, …

Syntax & Rules:
– XUL is case sensitive: all events and attribute must be
written in lower case
– All strings must be double quoted
– All attributes must have a value
– XUL file extension: .xul
26
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Inside XUL package

Main components
– Content:

XUL files describes XML description of UI
– Appearance:

CSS, images, and others control presentation
– Behavior:
 JavaScript defines event handling within widgets
– Locale:
 All localizable strings in external DTD
27
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL and JavaScript



XUL interface is a collection of disconnected
widgets until programmed
Using JavaScript and/or C++
JavaScript included in XUL or a separate file
<html:script>
function InitWindow( ) {
var checkbox = document.getElementByID("remember");
if (checkbox) checkbox.checked = true; }
</html:script>
<html:script language="javascript" src="myscript.js"/>
28
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Adding Event Handlers

JavaScript

DOM Event Listener
29
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Chrome URI’s


XUL files are loaded via chrome URI’s
chrome://<package name>/<part>/<file.xul>
The chrome URI has three parts:
Package name : Given by user
Type of data : Content or Skin or Locale
Content : xul and js files
Skin
: images and css files
Locale : DTD and .properties files
File name
: Path of the file to load
30
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL Overlays




Overlays attach other UI widgets to XUL
documents at run time.
XUL fragments are inserted at specific
merge points in the master document.
For example:<statusbar id="status-bar">
<statusbarpanel id="my-panel"
label="Hello, World"/> </statusbar>
“status-bar” is the merge point and “mypanel” is the new XUL fragment
31
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL file
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://sample/content/test.js"/>
<?xml-stylesheet href="chrome://sample/skin/test.css"
type="text/css"?>
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello World"/>
</statusbar>
32
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Programming in Facebook
Hussein Suleman
uct cs honours 2007
What is Facebook?
34
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
How Facebook Apps work

Every profile page is made up of many independent
portlets or profile boxes.

Each portlet is generated statically by a possibly external
application and stored by Facebook.
It could be an iframe, but in most cases is not.



Portlets are not actually changed in the profile page –
they are changed elsewhere!
Facebook has mechanisms to link in applications, and
APIs for applications to communicate with Facebook.
35
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Facebook Communication
request for profile
profile
request for canvas
request for canvas content
Facebook API use
update profile box, etc.
canvas
canvas
user
facebook.com
36
application (UCT)
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What can the API do ?






Get a list of friend ids or friends who are
running the same app
Get and set notifications of events
Set content of profile box
Get specific information on a user
Add to the Newsfeed for a user
etc.
See: http://developers.facebook.com/documentation.php?v=1.0&doc=
37
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
FBML






Language used by Facebook to specify any
fragment of Web pages.
Mostly just like HTML!
Forms get additional fields added to pass
Facebook parameters silently.
Images are redirected to local copies.
Links must be absolute (parameters do not work
as expected in all toolkits).
Lots of additional Facebook-specific items
– <fb:name uid=…> for a user’s name
– <fb:profile-pic …> for a user’s profile picture
38
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
FQL

Facebook Query Language allows access
to user database with language that is
similar to SQL.

Example:
– SELECT first_name FROM user WHERE
uid=$params->{user}
– To get the first name of a user based on the
user-id
39
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Creating an Application

What you need:
– Web Server
– API toolkit or roll-your-own

Add the Developer application to your profile.

Switch to the Developer application.

Apply for a key.
40
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
41
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
42
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
43
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
44
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What does a typical
application do?






Check CGI parameters.
Authenticate using Facebook API.
Draw configuration Web page on canvas.
Allow user to update options …
Write FBML to profile box.
Save per-user state in database or in
filesystem.
45
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Example: Profile Box
46
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Example: Application Canvas
47
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Code – index.pl


























#!/usr/bin/perl
#
# sample adapted from Facebook Perl API example
# hussein suleman
# 31 july 2007
use strict;
use CGI;
use WWW::Facebook::API;
use Data::Dumper;
use LWP::UserAgent;
use XML::DOM;
# create FB object with keys included
my $facebook = WWW::Facebook::API->new(
api_key => "8a3b63fde6e900f853c51903e6689e5b",
secret => "f1818d69d7140fa0192b623b55e7da59",
app_path => "hussein_testb",
parse => 1,
);
# remember to add proxy for UCT!
$facebook->ua->proxy ('http', 'http://cache.uct.ac.za:8080/');
sub main {
# handler CGI parameters
my $q = new CGI;
print $q->header;
redirect("Must
be called in facebook canvas")
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
unless $facebook->canvas->in_fb_canvas($q);
48







# auth methods.
$facebook->session_key( $params->{session_key} );
}
else {
# User hasn't added app (could reject/display info/whatever)
# (Or handle later when a user is needed).
}

my ( $action, $param ) = ( $q->path_info =~ m!^/(\w+)/?(.*)! );

# trigger action depending on parameters passed to app
if ($action eq '')
{ handle_index($param, $params); }
else
{ print_error ("cannot understand request"); }





}

# canvas drawing routine
sub handle_index {
my ( $param, $params ) = @_;











print "<fb:header/>";
print "<h1>Watch My Students</h1>";
print "<fb:profile-pic uid=\"$params->{user}\"/> ";
# list data from disk file with links to delete entries
print "<h2><fb:name uid=\"$params->{user}\" useyou=\"false\"/>\'s Current Wat
ched Entries</h2>";
my $fbml = "<b>Watch My Students</b><hr/><p>Sneak peek at what the 1016 stude
nts are chatting about in the class forum ...</p><ul>";
print "<ul>";
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
49





























open (my $ofile, "data.txt");
my $po = 0;
while (my $aline = <$ofile>)
{
$po++;
chomp $aline;
print "<li><a href=\"http://banzai.cs.uct.ac.za/~hussein/cgi-bin/2007/face
book/perl/delete.pl?position=$po\">Delete</a> $aline</li>";
$fbml .= "<li>$aline</li>";
}
close ($ofile);
print "</ul>";
$fbml .= "</ul>";
print "<hr/>";
# list data from RSS feed with links to add entries
print "<h2><fb:name uid=\"$params->{user}\" useyou=\"false\"/>\'s Latest RSS
Entries</h2>";
print "<ul>";
my $results = get_RSS();
$po = 0;
foreach my $aresult (@$results)
{
$po++;
$aresult->[2] =~ s/\<[^\>]+\>//go;
print "<li><a href=\"http://banzai.cs.uct.ac.za/~hussein/cgi-bin/2007/face
book/perl/add.pl?position=$po\">$aresult->[0] (by $aresult->[1])</a><br/>$aresul
t->[2]</li>";
}
print "</ul>";
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
50


"'>Add this application</a>.";
}
# update profile box
$facebook->profile->set_fbml (markup => $fbml);



}

# deal with users trying to use app without logging into FB
sub redirect {
div_error("Please go <a href='"
. $facebook->get_app_url
. "'>to facebook</a>" );
exit;
}


















# general error handler
sub print_error {
print "<div style='padding: 20px'>", join( "", @_ ), "</div>";
}
# retrieve and parse an RSS feed
sub get_RSS
{
my $ua = new LWP::UserAgent();
$ua->timeout(10);
$ua->proxy ('http://cache.uct.ac.za:8080/');
my $response = $ua->get('http://banzai.cs.uct.ac.za/phpBB2-1016/rss.php');
my @results = ();
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
51

{
my $title = '';
foreach my $anode ($anitem->getElementsByTagName ('title'))
{
if ($anode->hasChildNodes == 1)
{
$title = $anode->getFirstChild->toString;
}
}
my $author = '';
foreach my $anode ($anitem->getElementsByTagName ('author'))
{
if ($anode->hasChildNodes == 1)
{
$author = $anode->getFirstChild->toString;
}
}
my $description = '';
foreach my $anode ($anitem->getElementsByTagName ('description'))
{
if ($anode->hasChildNodes == 1)
{
$description = $anode->getFirstChild->toString;
}
}
$description =~ s/&lt;/\</go;
$description =~ s/&gt;/\>/go;
$description =~ s/[\n\r]//go;
push (@results, [$title, $author, $description]);




























}


}
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
52
The Code - add.pl











#!/usr/bin/perl
#
# sample adapted from Facebook Perl API example
# hussein suleman
# 31 july 2007
use strict;
use CGI;
use LWP::UserAgent;
use XML::DOM;
sub main {
my $q = new CGI;

handle_add ($q->param('position'));

print "Location: http://apps.facebook.com/hussein_testb/\n\n";

} http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
53



























sub handle_add {
my ( $position ) = @_;
$position--;
my $results = get_RSS();
my $aresult = $$results[$position];
if (defined $aresult)
{
$aresult->[2] =~ s/\<[^\>]+\>//go;
open (my $ofile, ">>data.txt");
print $ofile "<a href=\"$aresult->[1]\"><b>$aresult->[0]</b></a> $aresult>[2]\n";
close ($ofile);
}
}
sub get_RSS
{
my $ua = new LWP::UserAgent();
$ua->timeout(10);
$ua->proxy ('http://cache.uct.ac.za:8080/');
my $response = $ua->get('http://banzai.cs.uct.ac.za/phpBB2-1016/rss.php');
my @results = ();
if ($response->is_success) {
my $parser = new XML::DOM::Parser;
my $doc = $parser->parse ($response->content);
foreach my $anitem ($doc->getElementsByTagName ('item'))
{
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
my $title = '';
54




























foreach my $anode ($anitem->getElementsByTagName ('title'))
{
if ($anode->hasChildNodes == 1)
{
$title = $anode->getFirstChild->toString;
}
}
my $guid = '';
foreach my $anode ($anitem->getElementsByTagName ('guid'))
{
if ($anode->hasChildNodes == 1)
{
$guid = $anode->getFirstChild->toString;
}
}
my $description = '';
foreach my $anode ($anitem->getElementsByTagName ('description'))
{
if ($anode->hasChildNodes == 1)
{
$description = $anode->getFirstChild->toString;
}
}
$description =~ s/&lt;/\</go;
$description =~ s/&gt;/\>/go;
$description =~ s/[\n\r]//go;
push (@results, [$title, $guid, $description]);
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
}
55
The Code – delete.pl









#!/usr/bin/perl
#
# sample adapted from Facebook Perl API example
# hussein suleman
# 31 july 2007
use strict;
use CGI;
sub main {
my $q = new CGI;
handle_delete ($q->param('position'));

print "Location: http://apps.facebook.com/hussein_testb/\n\n";


}

sub handle_delete {
my ( $position ) = @_;


open (my $ofile, "data.txt");
my @lines = <$ofile>;
close ($ofile);

splice (@lines, $position-1, 1);

open (my $ofile, ">data.txt");
foreach my $aline (@lines)
{
print $ofile $aline;
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
}






56
References






W3C's homepage for CGI. http://www.w3c.org/CGI/
Introduction to Common Gateway Interface specifications.
NCSA Software Development Group.
http://hoohoo.ncsa.uiuc.edu/CGI/overview.html
The WWW Common Gateway Interface Version 1.1 (Internet
Draft), David Robinson, October 1995.
ISAPI (Internet Server API). Progress Software and
Microsoft. http://www.process.com/news/spec.htp
NSAPI (Netscape Server API). Netscape.
http://www.netscape.com/newsref/std/server_api.html
Vaughn Bullard, Smith, Daconta. Essential XUL
Programming. New York: John Wiley & Sons, Inc. 2001.
57
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
HTML and Web Programming
謝謝捧場
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
http://gogle.com/
58
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Related documents
Welcome [mll.csie.ntu.edu.tw]
Welcome [mll.csie.ntu.edu.tw]
os03_syllabus
os03_syllabus
Exercises01.07
Exercises01.07
Document
Document
Unit 1 Introduction to Spread
Unit 1 Introduction to Spread
沒有投影片標題
沒有投影片標題
Social Media
Social Media
Facebook_Whats_app
Facebook_Whats_app
Signtech Open Day - Jersey Chamber of Commerce
Signtech Open Day - Jersey Chamber of Commerce
An Adaptive Multiple Access Protocol for Broadcast Channels
An Adaptive Multiple Access Protocol for Broadcast Channels
Workshop of Artificial Intelligence, Knowledge Discovery, and Fuzzy
Workshop of Artificial Intelligence, Knowledge Discovery, and Fuzzy