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: rburke@cs.depaul.eduPhone: 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://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 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