1 / 32

ECT 270 Client-side Web Application Development

ECT 270 Client-side Web Application Development. Professor Robin Burke. Outline. Introduction to the course Using shrike Crash course on Unix Homework #1. Information. Professor Robin Burke Office: CST 453 – CTI building Email: rburke@cs.depaul.edu Phone: 312-362-5910

kiley
Download Presentation

ECT 270 Client-side Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related