1. Web Programming Essentials:
Connecting to Server
Transferring Files
Unix Basics
Web Programming

2. Publishing Web Content
5/19/2018
Publishing Web Content
Edit
Web Server PC
Edit
Publish
Display
Display
upload to Web Server
Display
Publish
WCC Mode #1
WCC Mode #2
Web Content Creation Mode #1 (easy)
Create HTML & CGI files on the PC using Notepad.
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)
Login to the Web server using SSH.
Secure SHell (SSH)  Method for connecting to computers on the Internet
Create HTML & CGI files using a Unix editor (e.g., pico, vi)
Web Programming

3. Connecting to Server Secure SHell (SSH) SSH Client Software
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

4. SSH Client: PuTTY PuTTY configuration Download and double click PuTTY
Type in the Host Name (e.g. widit.knu.ac.kr) and click Open
Login
Web Programming

5. SSH Client: PuTTY PuTTY configuration (continued)
Right-click the top blue bar of the PuTTY window
Select “Change Settings”
Select “Translation” under Window Category
Set Character set translation to “UTF-8”
Web Programming

6. SSH Client: PuTTY PuTTY configuration (continued)
Select “Appearance” under Window Category
Set Font settings to desired font if needed
Select “Colors” under Window Category
Set Default Foreground and Default Background to desired colors if needed
Click Apply to apply the current settings.
Web Programming

7. SSH Client: PuTTY PuTTY configuration (continued)
Click the “Session” category
Type in a name for the current configuration (e.g., widit) in the “Saved Sessions” box
Click Save to save the current settings
Next time, you can right-Click the top blue bar and select Saved Sessions to choose the appropriate session (e.g. widit)
Web Programming

8. Transferring Files SSH File Transfer Protocol (SFTP) SFTP Clients
Most secure ethod 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

9. SFTP Client: FileZilla
In the FileZilla’s main menu,
Click File and
select Site Manager.
In the Site Manager window,
Click New Site
Type in the Remote Host Name (e.g. widit.knu.ac.kr)
Select SFTP Protocol
Select Ask for password Logon Type
Type in your User Name (leave the password blank)
Click the Rename button
Type in a site name (e.g., widit)
Click Connect
Web Programming

10. SFTP Client: FileZilla
Message Log
Client
(Local) Files
Remote
(Server) Files
Transfer Queue
Web Programming

11. SFTP Client: FileZilla
Adding Bookmarks:
Go to target directories by typing in the path in the site address box (A) or traversing the directory tree (B).
Click Bookmarks and
Select Add bookmark.
Select Site-specific bookmark and
Type in the bookmark name
→ The saved bookmark should appear under the Bookmarks menu.
Web Programming

12. SFTP Client: FileZilla
 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
Web Programming

13. SFTP Client: FileZilla
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.
Web Programming

14. Unix: OS for Internet Servers
Web Programming

15. Unix Basics Unix is an Operating System
5/19/2018
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

16. Unix: File System ~ Home directory shorthand
5/19/2018
Unix: File System
File and directory paths use the forward slash “/”
/ "root" directory
/home/kiyang subdirectory “home” → subdirectory “kiyang”
root
~ Home directory shorthand
~kiyang = /home/kiyang
~topzoo = /home/stud/topzoo
~/ = user’s home directory
home
usr
kiyang
stud
topzoo
freeghsd
public_html
public_html WP WP
/home/stud/freeghsd/public_html/WP/
Web Programming

17. Unix Basics: Command Syntax
5/19/2018
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
(example) ls -al /home/kiyang/public_html
Web Programming

18. Unix Basics: Basic Command
5/19/2018
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

19. Unix Basics: Working with Directories
5/19/2018
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 :45 TT
-rw kiyang kiyang :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
"cd" alone brings you home (RUBY slippers!)
"cd ~" and "cd ~username" brings you home (or to "username's" home)
"cd.." brings you down a directory
Web Programming

20. Unix Basics: Working with Files
5/19/2018
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
Try:
ls -l /etc/motd
Try "cp" to copy:
cp /etc/motd ~/motd.my.copy
Try "mv" to rename:
mv motd.my.copy blah
Try "rm" to delete (forever):
rm blah
Directories are special types of files
mkdir blahdir ("rmdir" to remove)
cp /etc/motd ~/blahdir ("ls blahdir" to view)
Web Programming

21. Unix Permissions rwx r-x r-- 111 101 100 7 5 4 file type permission
5/19/2018
Unix Permissions
file type
permission
owner
group
size
last modified time
file name
owner
group
world
000 = 0 = ---
001 = 1 = --x
010 = 2 = -w-
011 = 3 = -wx
100 = 4 = r--
101 = 5 = r-x
110 = 6 = rw-
111 = 7 = rwx
rwx r-x r--
1=Allowed
0=Not Allowed
In decimal number
Web Programming

22. Changing Unix File Permissions
5/19/2018
Changing Unix File Permissions
Use the chmod command
Syntax: chmod permissions filename
e.g., chmod 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 index.htm
Server-side Programs
Must be executable → chmod roster.cgi
User group depending on web server configuration
Directories
Must be world executable → chmod public_html
Web Programming

23. UNIX Shortcuts Up arrow Tab key after partial filename Alias
5/19/2018
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

24. UNIX Editor: Pico pico file1  edit file1
5/19/2018
UNIX Editor: Pico
pico file1  edit file1
Ctrl-o  save the current file
Ctrl-x  save & exit
Ctrl-e  delete to the end of current line
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