Programming the Web Web = Computer Network + Hypertext

Topics  Network  Hypertext  Languages for the web  HTML for content  Server-side programs  PHP  CGI programs  Client-side programs  JavaScript  What Next?

ARPANET  World'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

Hypertext  Printed 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 Hypertext  Project Xanadu was started in 1967 to facilitate non-sequential writing.  Doug Engelbart wrote oNLine System, a computer collaboration program  Guide was a hypertext program for personal computers  Hypercard came with early Mac OS

Origins of the World-Wide-Web  Tim Berners-Lee proposed a hypertext program to facilitate sharing and updating information between scientists at CERN  Prototype system was called Enquire  CERN was one of the early major Internet nodes  Both local and wide-area connections  many different kinds of computers  WWW proposed in 1989

The Browsing Process  Web page stored on server  Client browser requests page

Generating Content  HTML for static content  Scripting languages for dynamic content  What features do languages need?  Platform independence  Security  Intellectual property  Where and how do you store the information needed by the programs?  Where does the program run?

HTML for Static Content  Two parts to the information that is being shared  Content - what does it say  Presentation - how does it look  HyperText Markup Language allows you to mark up the content  Browser implements the mark-up commands

HelloWorld in HTML PHP Hello, world!

Beyond HTML  Cascading Style Sheets separate form and content  can have multiple views of same content  XML provides extensibility  Document Object Model created to support scripting

Server-side Programs  Program running on server has access to all server data  Network traffic required for each interaction

Two Approaches  CGI (Common-Gateway-Interface) programs  can be written in any language  Web server starts program and sends/receives data  PHP  PHP code in a web page is sent to the PHP interpreter which returns text to be sent to the browser

Using PHP  PHP code goes into special elements in HTML files.  There can be multiple php elements in a page  The browser never sees the PHP code  File needs to have a.php or.phtml extension

Examples  PHP  Hello with form Hello with form  Index of a directory Index of a directory  Using a database with PHP Using a database with PHP  CGI  Hello as a perl CGI program Hello as a perl CGI program  Code for above program Code for above program

HelloWorld in PHP PHP

Client-side Scripts  Program runs on client  Must use language that client can run  Need to protect client from malicious actions

JavaScript  JavaScript code is embedded into html pages  in elements in both and elements of a page  in event attributes of appropriate elements  JavaScript code is interpreted by your browser  Program has access only to local data  The html document is an object whose data can be accessed by the program

HelloWorld in JavaScript JavaScript document.write ( "Hello, World!");

Examples  Image Rollover Image Rollover  Function calculator Function calculator  Form checking Form checking

Web of collaboration  personal information system  permanent, anywhere access  web removes distance as a factor in human interaction  location independence  protocol-independence  device-independence (scalable vector graphics)

Next dream for the web  Collaboration between machines  Semantic web  Search engines  SOA

Sources  Weaving the Web by Tim Berners-Lee  Wikipedia Wikipedia  Web programming Links Web programming Links