1. ECT 270 Client-side Web Application Development Professor Robin Burke

2. 2 Introduction to the course Overview of networking, the Internet and the WWW, Unix survival 1 st week HTML 3 weeks Cascading Style Sheets 1.5 weeks JavaScript 4 weeks

3. 3 Information Professor Robin Burke Office: CST 453 – CTI building Email: rburke@cs.depaul.edu Phone: 312-362-5910 Office hours: 10 am – 1 pm on Monday Also by appointment!

4. 4 Resources Course web site http://josquin.cs.depaul.edu/~rburke/ courses/f03/ect270/ Course On-Line for submitting homework for discussion forum

5. 5 What you need Prerequisites CSC 211 & ECT 250 Texts Carey, P. Creating Web Pages with HTML and XML / Creating Web Pages with Dynamic HTML Possibly other on-line readings Materials Diskettes to store work Unix account on students.depaul.edu (shrike) Verify your user id and password ASAP. Contact ID card services – DePaul Center 9700, SAC 182

6. 6 Grading 7 assignments more or less weekly quizzes on most assignment due dates 40% Midterm not multiple choice will not require you to memorize HTML details 30% Final project Group project Details in Week 5 30%

7. 7 Academic Integrity Acts of plagiarism or cheating will not be accepted – any violation of the academic integrity policy will be punished and may result in an “F” grade. Plagiarism & cheating include (but are not limited to) Direct copying of any source without proper acknowledgement. You may only use code that you did not write if given permission by the instructor to do so. Code so used must be clearly cited. Pictures or text copied by other websites are acceptable, as long as proper acknowledgment is specified. Using material prepared for other purpose, e.g. submissions for other courses Submitting work prepared by someone else or copying material from someone else. Refer to the course information & the DePaul University academic integrity policy

8. 8 Outline Networking Internet Protocols Addressing Web Protocol History Break Using shrike Crash course on Unix

9. 9 What is the Internet The Internet is an interconnected network of thousands of networks and computers. ( “inter-network”) Began in the 1960s as a Department of Defense project The World Wide Web is just one of the services that run on the Internet.

10. 10 What is a network? Computer system that links two or more computers - To share data, info, hardware, software Local Area Network (LAN) A collection of computers that share hardware, software and data over a small geographical area (home, office, school lab) Wide Area Network (WAN) It spans a wider area (offices, schools, cities, countries) Connects different LANs

11. 11 Networking

12. 12 Network layers

13. 13 Packet switching The Internet is an example of packet- switched network Each message traveling on the network is broken down into packets of bytes Each packet is transmitted individually from computer to computer over different paths. Routers decide the optimal path to get each packet to its destination

14. 14 Packet-switched Network

15. 15 Benefits of packet switching Load distribution data distributed over a wide number of possible paths to balance traffic. Error recovery inexpensive to replace damaged packets, instead of entire messages. Fault tolerance communication can continue even if a node goes down

16. 16 Protocols Because networks use a wide variety of hardware and software, protocols are needed to coordinate communication and data transmission. A protocol is a set of rules for the exchange of data across communication lines.

17. 17 Need for Protocol Client programs must know how to state requests Server must know how to interpret The protocol is the agreement Important A weak or inflexible protocol limits what can be done A complex protocol may be difficult to implement

18. 18 TCP/IP TCP (transmission control protocol) controls the break down of a message into packets before it is transmitted over the network. the reassembly of packets once they reach their destination The IP (Internet Protocol) includes rules for routing individual data packets from their source to their destination addressing details for each packet.

19. 19 Packets

20. 20 Addressing The IP protocol has to know where to send its packets “Routing” To route a packet we need its address “IP Address”

21. 21 IP Addresses A host on the Internet must have an IP address 32-bit number divided in four 8-bit numbers Written with a dot in between 14.192.1.100 Each number ranges from 0-255 Some addresses have a special interpretation 127.0.0.1

22. 22 IP Addresses, cont’d In general the farther to the right in the address the closer to a particular host 14.192.1.100 all of the machines with 14.192.1 addresses are probably in a LAN all of the machines with 14.192 addresses might be owned by the same organization

23. 23 Problem #1 can we run out? 2^32 addresses Answer yes Solution IPv6 = 128 bit addresses starting to be available now

24. 24 Problem #2 How to keep track of lots of 32-bit numbers Would you rather type 207.171.183.16 or amazon.com Solution domain naming system

25. 25 Domain Name Server A Domain Name Server (DNS) is responsible for the mapping between domain names and IP addresses. bach.cs.depaul.edu Org. type (top level domain) Organization name Host name IP address: 140.192.32.50.com.org.gov.mil.net.it.museum.biz

26. 26 DNS One of the few centralized services in a distributed Internet Everybody must agree on what name matches what number Site creator must go through a domain registration process claim a name associate it with an address

27. 27 Client/server interaction A lot of Internet applications work under the client/server model Server knows something, or can do something Client wants to know something, or wants to do something

28. 28 Client/server cont’d Client sends request Server sends response Example: Email A central computer stores and forwards electronic mail Client computers contact the server to get email for a particular user

29. 29 Protocols for client/server internet applications Simple Mail Transfer Protocol (SMTP): transferring email messages from one machine to another File Transfer Protocol (FTP): transferring files between local and remote machines. Telnet: a terminal emulation protocol used to login in remotely. Telent now superceded by ssh increased security

30. 30 HyperText Transfer Protocol HTTP is the protocol responsible for transferring and displaying web pages. HTTP uses the client/server model of computing. The client is the user’s web browser (I.E, Netscape) The server is the web server where the page resides. (www.nyt.com)

31. 31 Client/Server Web Interaction

32. 32 HTTP Protocol Request “I want something” Response “Here it is” or “Not found” Headers Body

33. A Typical HTTP Exchange Client: Please open a connection to ‘www.nytimes.com’ and send me the default file. I am located at IP Address 140.192.1.6. Netscape’s URL Window NY Times Web Server Server: Let me check…. Okay, the default file at this site is of type HTML. It is 1749 bytes in size. The date is Tue, May 2nd at 15:33:33. NY Times Web Page

34. 34 HTTP Response Example

35. 35 Uniform resource locator People on the Web use a naming convention called the uniform resource locator (URL). A URL consists of at least two and as many as four parts. A simple two part URL contains the protocol used to access the resource followed by the location of the resource. Example: http://www.cs.depaul.edu/http://www.cs.depaul.edu/ A more complex URL may have a file name and a path where the file can be found.

36. 36 http://josquin.cs.depaul.edu/~rburke/courses/f03/index.html domain The protocol used path that identifies location of document uniquely document name A Web URL deconstructed The user is a directory in the system

37. 37 Note Path may not correspond to files/folders The web server is free to interpret the path however it likes 80% of the time the path indicates a location in a file system where a file is stored

38. 38 FTP URL ftp://rburke4@condor.depaul.edu/ Access my files on condor using File Transfer Protocol Email URL mailto:rburke@cs.depaul.edurburke@cs.depaul.edu mailto scheme for electronic mail addresses Newsgroup URL news:dpu.general news scheme for USENET news groups and articles Other URLs

39. 39 Prehistory of the Web In the 1960s Douglas Englebart, created the first experimental hypertext system: Augment 1984: Apple releases the HyperCard program as part of its graphical user interface operating system Macintosh. Introducing hypertext as a widely- available commercial product.

40. 40 Hypertext Documents Hypertext refers to a document that its connected with other documents in many ways Hypertext systems have been around for a long time 1960s Why was the web an innovation? keep this question in mind

41. 41 CERN and hypertext In 1990 CERN, a lab for particle Physics in Geneva, had been connected to the Internet for 2 years. Scientists were looking for better ways to circulate their scientific papers and data. Tim Berners-Lee proposed an hypertext development project.

42. 42 The birth of the Web In the next two years Berners-Lee developed the code for an hypertext server program and made it available on the Internet. He envisioned the set of links to and from computers worldwide as a spider web, hence the name World Wide Web. The CERN is considered the birth place of the WWW.

43. 43 What did Berners-Lee invent? HTTP The protocol for distributing web pages HTML The language for describing web pages

44. 44 HTML Documents Most web pages are HTML documents HTML HyperText Markup Language A language for describing the contents of a hypertext page

45. 45 Web browser history A web browser is a user interface that allows users to read (browse) HTML documents. It acts as a web client. The first browsers were text based. In 1993 Andreessen developed the first browser with a graphical user interface, named Mosaic. In 1994 Andreessen developed Netscape In 1995 Microsoft released free Internet Explorer starting the “Browser Wars”. In 1998, Netscape was clearly losing. Launched mozilla.org Made a browser based on Netscape code open-source

46. 46 Web Page with Interesting Fonts, Graphics, and Layout This figure shows a Web page is not only a source of information, it can also be a work of art. links graphic image The Web designer has a great deal of control over the format of the page. interesting fonts

47. 47 Terminology Web browser a client program that can render (display) web pages and other media wide variety: text, graphical, cell phone, etc. Web server a server program that responds to web requests and delivers web pages and other media Proxy / gateway / cache / firewall / load balancer Special programs or devices that are "middlemen" in the communication between browser and server Improve efficiency, security, etc.

48. 48 More terminology web page an HTML document that can be viewed in a web browser hyperlink a special notation in an HTML document that points to an Internet resource

49. 49 More terminology client-side processing that takes place within or associated with the web client, or browser server-side processing that takes place within or associated with the web server web application any software application whose mode of delivery is the WWW

50. 50 The name of this class Client-side Web Application Development We will be developing web applications that make use of the browser

51. 51 Why the Web? The protocols that made linking possible were open The concept of linking extended to an open-ended set of Internet protocols The concept of inclusion of images by a mechanism similar to linking The use of one-way links with minimal bookkeeping requirements

52. 52 Open protocols The web protocol (HTTP) is open Meaning anyone can write a web server anyone can write a web browser anyone can author web pages there is a well-defined public mechanism for revising and extending the standard Not true of earlier hypertext technologies

53. 53 Break

54. 54 Tools for building and maintaining your web site shrike.depaul.edu a server computer running the Apache web server Various programs for site building telnet: run commands on shrike ftp: move files to and from shrike browser: for viewing your files text editor: for working with HTML files

55. 55 Telnet Telnet is a protocol used to access computers remotely. To remotely log into your students account From any Windows computer connected to the Internet Click START – RUN type telnet students.depaul.edu when prompted, type in userID and password From computers in DePaul labs Click START – Internet Applications Click Telnet Shrike when prompted, type in userID and password Warning 3 strikes policy!

56. 56 Where am I? Print Working directory: pwd Move to a child directory: cd directoryname Move up to a parent directory: cd.. List files/directories in the current directory: ls List files/directories with details: ls –l Remove a file: rm filename Copy a file: cp old_file new_file Rename (Move) a file: mv old_name new_name Create a new directory: mkdir directoryname Remove a directory: rmdir directoryname Help on a Unix command: man command_name Some Unix commands

57. 57 FTP File Transfer Protocol. Allows for the transfer of files between a local and a remote machines. The machines do not have to use the same operating system. Filenames may change slightly when the file is transferred (upper case becomes lower case) Be careful when using it to move files to students, since UNIX is a case sensitive OS

58. 58 File naming advice No spaces my-web-page.html not “my web page.html” All lower case my-web-page.html not “My-Web-page.html”

59. 59 FTP with a browser To use a browser as an interface with FTP:  Make sure you are connected to the Internet  Type ftp://yourlogin@students.depaul.edu in the address bar of the browserftp://yourlogin@students.depaul.edu  This should bring up a window that prompts you for your password.  Type in your password and hit enter.  The files in your main directory will appear.

60. 60 FTP with a browser (cont) What if it doesn’t work? Make sure you are connected to the Internet Click on the Tools button of IE Click on Internet Options Click on the Advanced tab Scroll down the Browsing options and select Enable folder view for FTP sites

61. 61 FTP clients There are available/freeware FTP Clients: Windows Smart FTP (Windows 98+) at http://www.smartftp.com/http://www.smartftp.com/ FTP Explorer (9x/ME/2000/NT4.0) at http://www.ftpx.com.http://www.ftpx.com WS_FTP LE (95/98/Me/NT/2000/XP) at http://download.cnet.com/ http://download.cnet.com/ FTP/Telnet Secure Shell (SSH) at www.ssh.comwww.ssh.com Mac FTupperWare at www.stimpsoft.com/products/ftupperware.html www.stimpsoft.com/products/ftupperware.html VicomSoft FTPclient at http://www.vicomsoft.comhttp://www.vicomsoft.com Fetch at http://www.fetchsoftworks.com/http://www.fetchsoftworks.com/

62. 62 FTP with a browser (cont.) To browse a file/open a folder: double click on it To rename it: right click on it and choose rename To transfer files from your desktop to a directory in your shrike account (or viceversa): Navigate to the directories where the files are Click on the file on your desktop (shrike) And drag it to the folder on shrike (desktop) To move files within the same machine, click and drag to the desired location

63. 63 FTP with a browser (cont) You can use an FTP session to create a directory on your students account: Click on the File drop-down menu Select New – Folder Type in the name you want your directory to have

64. 64 A web server typically requires that any web pages that are to be published on the site must be located in a particular directory. On students.depaul.edu (and any Unix server) web pages must be located in the directory named public_html. All your web pages must be in public_html ( or subdirectories within public_html) or they will not be visible to browsers. “Public” directory

65. 65 Create your public_html directory Remotely login to students.depaul.edu, using telnet students.depaul.edu Check if you already have public_html, by typing ls –l. If not, you need to create one. At the Unix prompt type 1.mkdir public_html (creates the directory) 2.chmod 755 public_html (sets permissions)

66. 66 File permissions on Unix There are 3 types of permission that can be set on files: Read (r, 4): This allows the file to be "read-only" by people with the appropriate permission Write (w, 2): This allows people with the appropriate permission to write to, and change the files Execute (x, 1): This allows others to execute (run) these files, or navigate directories, if they have permission to The way to change these permissions is by using the unix command chmod -rw-r--r-- 1 rburke4 cscfclt 947 Jul 31 11:13 index.html

67. 67 Users The string on the left side of each file description details what permissions are set for that file -rw-r--r-- 1 rburke4 cscfclt 947 Oct 30 11:13 index.html

68. 68 Permissions and users The first 'bit' indicates whether the file is a directory or not (d = directory, - = file) The next three segments of three bits each define what permissions are set for what users. The first segment defines permissions set for the user, or owner, of the file. The second segment of three bits defines permissions set for the group (students in your case) that can access the file. The last segment defines permission for other (the rest of the world).

69. 69 Setting permissions The unix command to set permission is: chmod ### filename (or directory name) To get You need to type: chmod 644 index.html 6 = 4+2=read & write permission to the user 4 = read only permission to the group (other students) 4 = read only permission to the rest of the world -rw-r--r-- 1 rburke4 cscfclt 947 Oct 30 11:13 index.html

70. 70 Publishing files In order for the files stored in your public_html directory to be viewable, they and the directory need to have the correct permissions: public_html and any subdirectory within public_html : executable by group and others Files in public_html or subdirectories: readable by group and others This corresponds to: drwx - r x - r x … public_html (chmod 755 public_html) - rw - r - - r - - … filename.ext (chmod 644 filename.ext)

71. 71 Setting permissions To set permissions for the public_html dir Make sure you are in the main directory (pwd) Type chmod 755 public_html (711 is also ok) To set permissions for files in public_html Type cd public_html from your main directory (opens the public_html folder) Type chmod 644 filename (repeat for all files) Or chmod 644 * (* means "operate on all files") All subdirectories should also have a 755 permission

72. 72 Viewing your pages Once you have created a public_html directory, FTP-ed all HTML files, and set the correct permission, to view the files: Connect to the Internet Open a browser Type: http://students.depaul.edu/~yourlogin/filename.ext http://josquin.cs.depaul.edu/~rburke/ courses/f03/ect270/hwk/carrots.jpg

73. 73 I have done everything you told me to do but my picture is not showing up … Before you fire a distress email to the prof: Make sure the URL is correct Did you misspelled your userID? Did you forget the ~? Does the filename match (including upper/lower case) the filename on shrike? Check the permission of the file and of the public_html directory Have you refreshed your browser since the last correction?

74. 74 What's wrong? http://josquin.cs.depaul.edu/~rburke/courses/f03/ ect270/hwk/Carrots.jpg Capitalization http://josquin.cs.depaul.edu/~rburk/courses/f03/ ect270/hwk/carrots.jpg User name http://josquin.cs.depaul.edu/rburke/courses/f03/ ect270/hwk/carrots.jpg User name http://josquin.cs.depaul.edu/~rburke/courses/f03/ ect270/carrots.jpg Incomplete path http://josquin.cs.depaul.edu/~rburke/courses/f03/ ect270/hwk/carrots3.jpg File has wrong permissions http://josquin.cs.depaul.edu/~rburke/courses/f03/ ect270/hwk/TEST/carrots.jpg Folder has wrong permissions

75. 75 Assignment #1 Set up your account on shrike to serve web pages Store an image file in your public_html area Submit the working URL