1. Programming the Web Web = Computer Network + Hypertext

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

3. 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

4. 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.

5. 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

6. 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

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

8. 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?

9. 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

10. HelloWorld in HTML PHP Hello, world! http://cs.boisestate.edu/~tcole/web/seminar/hello.html

11. 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

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

13. 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

14. 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

15. 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

16. HelloWorld in PHP PHP http://cs.boisestate.edu/~tcole/web/seminar/hello.php

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

18. 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

19. HelloWorld in JavaScript JavaScript document.write ( "Hello, World!"); http://cs.boisestate.edu/~tcole/web/seminar/jshello.html

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

21. 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)

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

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