Programming the Web Web = Computer Network + Hypertext.
-
Upload
melvyn-fletcher -
Category
Documents
-
view
222 -
download
0
Transcript of Programming the Web Web = Computer Network + Hypertext.
Programming the Web
Web = Computer Network + Hypertext
TopicsNetworkHypertextLanguages for the web
HTML for contentServer-side programs
PHPCGI programs
Client-side programsJavaScript
What Next?
ARPANETWorld's first packet-switching network
Funded by ARPA (Advanced Research Projects Agency)
Initially connected computers at four universities in 1969
Eventually developed into the Internet
TCP/IP internetwork protocol developed to hide the differences between different networks
HypertextPrinted documents are basically linear;
linear access is not always the most convenient.
1945 Vannevar Bush described a device called Memex which would display articles and books allowing for automatic connections to cross references.
Computers made Hypertext Feasible
Ted Nelson coined the word HypertextProject Xanadu was started in 1967 to
facilitate non-sequential writing. Doug Engelbart wrote oNLine System, a
computer collaboration programGuide was a hypertext program for
personal computersHypercard came with early Mac OS
Origins of the World-Wide-WebTim Berners-Lee proposed a hypertext
program to facilitate sharing and updating information between scientists at CERNPrototype system was called Enquire
CERN was one of the early major Internet nodesBoth local and wide-area connectionsmany different kinds of computers
WWW proposed in 1989
The Browsing ProcessWeb page stored on serverClient browser requests page
Generating ContentHTML for static contentScripting languages for dynamic content
What features do languages need?Platform independenceSecurityIntellectual propertyWhere and how do you store the information
needed by the programs?Where does the program run?
HTML for Static ContentTwo parts to the information that is being
sharedContent - what does it say Presentation - how does it look
HyperText Markup Language allows you to mark up the contentBrowser implements the mark-up commands
HelloWorld in HTML
<html><head> <title>PHP</title></head><body><h1>Hello, world!</h1><p>Hello, world!</p></body></html>
http://cs.boisestate.edu/~tcole/web/seminar/hello.html
Beyond HTMLCascading Style Sheets separate form and
contentcan have multiple views of same content
XML provides extensibility
Document Object Model created to support scripting
Server-side ProgramsProgram running on server has access to
all server dataNetwork traffic required for each
interaction
Two ApproachesCGI (Common-Gateway-Interface)
programscan be written in any languageWeb server starts program and
sends/receives data
PHPPHP code in a web page is sent to the PHP
interpreter which returns text to be sent to the browser
Using PHPPHP code goes into special elements in
HTML files.<?php … ?>
There can be multiple php elements in a page
The browser never sees the PHP codeFile needs to have a .php or .phtml
extension
ExamplesPHP
Hello with formIndex of a directoryUsing a database with PHP
CGIHello as a perl CGI programCode for above program
HelloWorld in PHP
<html><head> <title>PHP</title></head><body><?php echo 'Hello, world!' ?></body></html>
http://cs.boisestate.edu/~tcole/web/seminar/hello.php
Client-side ScriptsProgram runs on clientMust use language that client can runNeed to protect client from malicious
actions
JavaScript JavaScript code is embedded into html pages
in <script> elements in both <head> and <body> elements of a page
in event attributes of appropriate elements
JavaScript code is interpreted by your browserProgram has access only to local dataThe html document is an object whose data can
be accessed by the program
HelloWorld in JavaScript
<html><head>
<title>JavaScript</title>
</head>
<body>
<script>
document.write ( "Hello, World!");
</script>
</body></html>
http://cs.boisestate.edu/~tcole/web/seminar/jshello.html
ExamplesImage RolloverFunction calculatorForm checking
Web of collaborationpersonal information systempermanent, anywhere access
web removes distance as a factor in human interaction
location independenceprotocol-independencedevice-independence (scalable vector
graphics)
Next dream for the webCollaboration between machines
Semantic webSearch enginesSOA
SourcesWeaving the Web by Tim Berners-LeeWikipediaWeb programming Links