Programming the Web Web = Computer Network + Hypertext.

23
Programming the Web Web = Computer Network + Hypertext

Transcript of Programming the Web Web = Computer Network + Hypertext.

Page 1: Programming the Web Web = Computer Network + Hypertext.

Programming the Web

Web = Computer Network + Hypertext

Page 2: Programming the Web Web = Computer Network + Hypertext.

TopicsNetworkHypertextLanguages for the web

HTML for contentServer-side programs

PHPCGI programs

Client-side programsJavaScript

What Next?

Page 3: Programming the Web Web = Computer Network + Hypertext.

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

Page 4: Programming the Web Web = Computer Network + Hypertext.

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.

Page 5: Programming the Web Web = Computer Network + Hypertext.

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

Page 6: Programming the Web Web = Computer Network + Hypertext.

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

Page 7: Programming the Web Web = Computer Network + Hypertext.

The Browsing ProcessWeb page stored on serverClient browser requests page

Page 8: Programming the Web Web = Computer Network + Hypertext.

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?

Page 9: Programming the Web Web = Computer Network + Hypertext.

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

Page 10: Programming the Web Web = Computer Network + Hypertext.

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

Page 11: Programming the Web Web = Computer Network + Hypertext.

Beyond HTMLCascading Style Sheets separate form and

contentcan have multiple views of same content

XML provides extensibility

Document Object Model created to support scripting

Page 12: Programming the Web Web = Computer Network + Hypertext.

Server-side ProgramsProgram running on server has access to

all server dataNetwork traffic required for each

interaction

Page 13: Programming the Web Web = Computer Network + Hypertext.

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

Page 14: Programming the Web Web = Computer Network + Hypertext.

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

Page 15: Programming the Web Web = Computer Network + Hypertext.

ExamplesPHP

Hello with formIndex of a directoryUsing a database with PHP

CGIHello as a perl CGI programCode for above program

Page 16: Programming the Web Web = Computer Network + Hypertext.

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

Page 17: Programming the Web Web = Computer Network + Hypertext.

Client-side ScriptsProgram runs on clientMust use language that client can runNeed to protect client from malicious

actions

Page 18: Programming the Web Web = Computer Network + Hypertext.

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

Page 19: Programming the Web Web = Computer Network + Hypertext.

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

Page 21: Programming the Web Web = Computer Network + Hypertext.

Web of collaborationpersonal information systempermanent, anywhere access

web removes distance as a factor in human interaction

location independenceprotocol-independencedevice-independence (scalable vector

graphics)

Page 22: Programming the Web Web = Computer Network + Hypertext.

Next dream for the webCollaboration between machines

Semantic webSearch enginesSOA

Page 23: Programming the Web Web = Computer Network + Hypertext.

SourcesWeaving the Web by Tim Berners-LeeWikipediaWeb programming Links