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 BurkeOffice: CST 453 – CTI buildingEmail: [email protected]: 312-362-5910Office hours: after class – 3 pm on
Monday• Also by appointment!
4
Resources
Course web sitehttp://josquin.cs.depaul.edu/~rburke/
courses/s04/ect270/ Course On-Line
for submitting homeworkfor discussion forum
5
Course Overview
Overview of networking, the Internet and the WWW, Unix survival1st week
HTML3 weeks
Cascading Style Sheets1.5 weeks
JavaScript4 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
Shrikeshrike.depaul.eduaka students.depaul.edu
Verify your user id and password ASAP
Contact ID card servicesDePaul Center 9700, SAC 182
10
Tools for building and maintaining your web site shrike.depaul.edu
a server computerrunning the Apache web server
Various programs for site buildingtelnet: run commands on shrikeftp: move files to and from shrikebrowser: for viewing your filestext 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
• 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
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 spacesmy-web-page.htmlnot “my web page.html”
All lower casemy-web-page.htmlnot “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://[email protected]
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 OptionsClick 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
areClick 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 menuSelect New – FolderType in the name you want your
directory to have
20
A web server typically requires that any web pagesthat are to be published on the site must be locatedin 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.
“Public” directory
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
1. mkdir public_html (creates the directory)
2. 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
Top Related