Web Programming Essentials: Connecting to Server Transferring Files Unix Basics

Web Programming 1

Publishing Web Content

Web Content Creation Mode #1 (easy)1. Create HTML & CGI files on the PC using Notepad.2. Upload the files to the Web server using SFTP.

• Secure File Transfer Protocol (SFTP) → Method for transferring data on the Internet

Web Content Creation Mode #2 (preferred)1. Login to the Web server using SSH.

• Secure SHell (SSH) → Method for connecting to computers on the Internet

2. Create HTML & CGI files using a Unix editor (e.g., pico, vi)Web Programming 2

Edit

Edit

Publish

PublishDisplay

Display

upload to

Web Server

WCC Mode #1 WCC Mode #2

PC

Display

Web Server

Connecting to Server Secure SHell (SSH)

► Method for connecting to computers on the Internet► Like Window’s Remote Desktop (without the GUI)► Provides a secure channel between the local and remote computer.► Communication is encrypted over port 22

SSH Client Software► PuTTY► MobaXterm

Web Programming 3

SSH Client: PuTTY PuTTY configuration

1. Download and double click PuTTY2. Type in the Host Name (e.g. widit.knu.ac.kr) and click Open3. Login

Web Programming 4

SSH Client: PuTTY PuTTY configuration (continued)

4. Right-click the top blue bar of the PuTTY window5. Select “Change Settings”6. Select “Translation” under Window Category7. Set Character set translation to “UTF-8”

Web Programming 5

SSH Client: PuTTY PuTTY configuration (continued)

8. Select “Appearance” under Window Category9. Set Font settings to desired font if needed10. Select “Colors” under Window Category11. Set Default Foreground and Default Background to desired colors if needed12. Click Apply to apply the current settings.

Web Programming 6

SSH Client: PuTTY PuTTY configuration (continued)

13. Click the “Session” category14. Type in a name for the current configuration (e.g., widit) in the “Saved Sessions” box15. Click Save to save the current settings 16. Next time, you can right-Click the top blue bar and select Saved Sessions to choose the appropriate

session (e.g. widit)

Web Programming 7

Transferring Files SSH File Transfer Protocol (SFTP)

► Most secure method for transferring data on the Internet

SFTP Clients► GUI Interactive file transfer programs

• FileZilla – cross platform (Windows, Linux, Mac OS)• WinSCP – supports SFTP & SCP

Other protocols for File Transfer► FTP over SSL (FTPS)

• a.k.a. Secure FTP• Encrypted transfer over port 21

► Secure Copy (SCP)• Transfers files over SSH session• Variant of ‘rcp’ utility – most often used in command line

Web Programming 8

SFTP Client: FileZillaIn the FileZilla’s main menu,1. Click File and 2. select Site Manager.

In the Site Manager window,1. Click New Site2. Type in the Remote Host Name

(e.g. widit.knu.ac.kr)3. Select SFTP Protocol4. Select Ask for password Logon Type5. Type in your User Name

(leave the password blank)6. Click the Rename button7. Type in a site name

(e.g., widit)8. Click Connect

Web Programming 9

SFTP Client: FileZilla

Web Programming 10

Client (Local) Files

Remote (Server) Files

Transfer Queue

Message Log

Adding Bookmarks:

1. Go to target directories by typing in the path in the site address box (A) or traversing the directory tree (B).

2. Click Bookmarks and 3. Select Add bookmark.

4. Select Site-specific bookmark and5. Type in the bookmark name

→ The saved bookmark should appear under the Bookmarks menu.

SFTP Client: FileZilla

Web Programming 11

SFTP Client: FileZilla

Web Programming 12

displays saved site profile toggles the display of the message log toggles the display of the local directory tree toggles the display of the remote directory tree toggles the display of the transfer queue Refreshes the file and folder lists

Using Quickconnect:

In the Quickconnect bar, Type in Host name, Username, Password, Port value of 22, Click the Quickconnect button, and Click OK to connect.

Click File in the Menu bar, and Select Copy current connection to Site Manager.

In the Site Manager window, Type in the site name and Click OK.→ The saved connection should appear

in the Site Manager.

SFTP Client: FileZilla

Web Programming 13

Unix:OS for Internet Servers

Web Programming 14

Unix Basics Unix is an Operating System

► An operating system (OS) is software that enable the computer to function► Developed in 1960’s at Bell Laboratories

• to run multiple concurrent processes for many users► Ideal OS for Web servers

Unix Differences (from Windows)► No GUI► No “Undo” feature► It is CASE SENSITIVE

Unix Fundamentals► Know the difference between a directory and a file ► Know what directory you are in

• When in directory doubt, type ‘pwd‘

Web Programming 15

Unix: File System

File and directory paths use the forward slash “/”

► / "root" directory► /home/kiyang subdirectory “home” → subdirectory “kiyang”

Web Programming 16

root

home

studkiyang

usr

topzoo freeghsd

public_html public_html

WPWP

/home/stud/freeghsd/public_html/WP/

~ Home directory shorthand

~kiyang = /home/kiyang ~topzoo = /home/stud/topzoo

~/ = user’s home directory

Unix Basics: Command Syntax

Unix command syntax:

command [space] option switches [space] arguments• Options can be combined

To get help on a command► Type ‘man command’

• e.g., man ls► man pages can be difficult to read

Web Programming 17

(example) ls -al /home/kiyang/public_html

Unix Basics: Basic Command ls filename

► Lists files in a directory• Default argument = current directory

► Common options: • -a → list all files including dot files • -l → display detailed info

pwd ⇒ Lists the current working directory

cd dir_name ⇒ Move to the directory named dir_name

cp file1 file2 ⇒ Copy file1 to file2

mv file1 file2 ⇒ Rename file1 to file2

rm file1 ⇒ delete file1

cat filename ⇒ display the content of filename

more filename ⇒ display the content of filename one screen at a time

less filename ⇒ same as more plus scrolling backwards

Web Programming 18

Unix Basics: Working with Directories

Directories are special types of files ► Unix file system is hierarchical

• use "cd" and "ls" to get around

► ~/ ⇒ your home directory• ~/public_html = /home/kiyang/public_html

drwxr-xr-x 2 kiyang kiyang 4096 2011-03-16 11:45 TT-rw------- 1 kiyang kiyang 92 2010-12-14 19:17 hw1.txt

► "cd" to change directory• cd ⇒ change to home directory• cd .. ⇒ change to parent directory

► "pwd" to print current working directory► "mkdir dir_name" to create a directory named dir_name► "rmdir dir_name" to remove the directory named dir_name

Web Programming 19

Unix Basics: Working with Files

Files have owners and permissions► Owner = person who created the file► Permission

• read, write, execute by owner, group, everyone► Cannot "more" all files

• read permission needed► Special files

• Dot files: ls –a to list• Symbolic links: ls –I to list the original file

► "ls" to list ► "cp" to copy► "mv" to rename. ► "rm" to delete► "more" (less, cat) to view the content

Web Programming 20

Unix Permissions

Web Programming 21

000 = 0 = ---001 = 1 = --x010 = 2 = -w-011 = 3 = -wx100 = 4 = r--101 = 5 = r-x110 = 6 = rw-111 = 7 = rwx

rwx r-x r--

owner group world

111 101 100

7 5 4

1=Allowed0=Not Allowed

In decimal number

owner group size last modified time file namepermissionfile type

Changing Unix File Permissions Use the chmod command

► Syntax: chmod permissions filename► e.g., chmod 644 hw1.txt

• This would change the permissions to?(Hint: 6 = 110, 4 = 100 in binary)

Important in web authoring► Web pages

• Must be world readable → chmod 644 index.htm► Server-side Programs

• Must be executable → chmod 755 roster.cgi• User group depending on web server configuration

► Directories• Must be world executable → chmod 711 public_html

Web Programming 22

UNIX Shortcuts Up arrow

► Cycles through previous commands Tab key after partial filename

► Completes the filename if enough has been typed (like auto-complete)

Alias► Designates a shorter command to be used in place of a longer one.► Stored in ~/.aliases► Syntax: alias short_cmd=‘long command’► e.g.,

alias dir='ls -al |more'alias cdhwp='cd ~/public_html/WP‘alias chmo='chmod 755 ~/public_html/WP/*'

Web Programming 23

UNIX Editor: Pico pico file1 ⇒ edit file1

► Ctrl-o → save the current file

► Ctrl-x → save & exit

► Ctrl-k → delete the current line

► Ctrl-u → restore the last line that was deleted

► Ctrl-w → find/search

► Going to a specific line number • Ctrl-w → Ctrl-t → line number

Web Programming 24