Web Application Development Essentials

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

2. Outline • Introduction to the course • Using shrike • Crash course on Unix • Homework #1

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

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

5. Course Overview • Overview of networking, the Internet and the WWW, Unix survival • 1st week • HTML • 3 weeks • Cascading Style Sheets • 1.5 weeks • JavaScript • 4 weeks

6. Assessment • 7 assignments • more or less weekly • 40% • Midterm • not multiple choice • will not require you to memorize HTML details • 30% • Final project • Group project • Details in Week 5 • 30%

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. What you need • Prerequisites • CSC 211 & ECT 250 • Texts • Carey, P. Creating Web Pages with HTML and Dynamic HTML • Other on-line readings • Materials • Diskettes to store work • Unix account on students.depaul.edu (shrike)

9. Shrike account • Shrike • shrike.depaul.edu • aka students.depaul.edu • Verify your user id and password ASAP • Contact ID card services • DePaul Center 9700, SAC 182

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

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

12. Some Unix commands • 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

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

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

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

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

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

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

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

20. “Public” directory 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 most Unix servers) 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.

21. 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 • mkdir public_html(creates the directory) • chmod 755 public_html(sets permissions)

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

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

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

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

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

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

28. 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.exthttp://josquin.cs.depaul.edu/~rburke/ courses/f03/ect270/hwk/carrots.jpg

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

30. What's wrong? • http://josquin.cs.depaul.edu/~rburke/courses/s04/ ect270/hwk/Carrots.jpg • http://josquin.cs.depaul.edu/~rburk/courses/s04/ ect270/hwk/carrots.jpg • http://josquin.cs.depaul.edu/rburke/courses/s04/ ect270/hwk/carrots.jpg • http://josquin.cs.depaul.edu/~rburke/courses/s04/ ect270/carrots.jpg • http://josquin.cs.depaul.edu/~rburke/courses/s04/ ect270/hwk/carrots3.jpg • http://josquin.cs.depaul.edu/~rburke/courses/s04/ ect270/hwk/TEST/carrots.jpg

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

32. Next class • Overview of how the web works • Reading: HTML, Tutorial #1