CSE 190 M: Web Programming, Summer 2012

Uploading Your Files

The real fun of writing web pages is putting them online on a real web site for others to see. This quarter we'll be putting our lab work and homework on a server named webster.

Files are uploaded using a protocol called FTP. We will be using the secure variant, SFTP. You will need an SFTP program to upload files to your web space. All University computers have the necessary program to do this.

To do this from home you will need to download and install appropriate SFTP software onto your computer. See the Working at Home page about how to do this and then come back.

Using Cyberduck to Upload Files to Webster

Note: The instructions below are for Cyberduck. The procedure for uploading will differ slightly with other programs, but every SFTP program contains similar commands to what is shown below, so hopefully this will be enough to give you an idea of what to do. If you get stuck, please email your TA for help. If you are using Windows I suggest you also read the FileZilla tutorial below because some lab machines may not come with Cyberduck preinstalled but will come with FileZilla.

Cyberduck is a free program for both Mac and Windows which will allow you to upload files to our class server. You will need to upload each of your assignments to get full credit. Here is how to use Cyberduck to upload files. Note: The screenshots are from the mac version of cyberduck. The interface might be slightly different than described here if you are using Windows. If you are confused by this tutorial or need additional help, please email your TA or the instructor.

1. Download Cyberduck from http://cyberduck.ch/.

2. Open the Cyberduck application.

3. Open a new connection by choosing File > Open Connection...

4. The following window will pop up. Choose the protocol from "FTP" to "SFTP." Enter "server.cs.washington.edu" as the server. Enter your UW NetID username and password. It should look like this:

   

5. You can now upload files to the webster server! Any files you put into the public_html folder will show up on the internet.

   

   You can drag and drop files into the folder, or you can choose the menu option File > Upload....

6. You can view uploaded files by typing the following URL in your browser: http://webster.cs.washington.edu/YOUR_UW_NETID/YOUR_FILE_NAME

   For example, if you NetID was "stepp," and you uploaded the file "marty_is_awesome.html," then you could see the file by pointing your browser to http://webster.cs.washington.edu/stepp/marty_is_awesome.html

Using FileZilla to Upload Files to Webster

Note: The instructions below are for FileZilla, a Windows exclusive SFTP client.

1. Run the FileZilla program from your Start Menu. On computers in the IPL, it should be located in a FileZilla FTP Client start menu folder.
   
2. In the FileZilla program, enter a server name of webster.cs.washington.edu . Use your own UWNetID and password, and enter 22 for the port. Press Quickconnect.
   

   When you connect for the first time, FileZilla will ask if you trust the server you're connecting to, since it doesn't recognize the server's security key. Click OK to carry on connecting.

   
3. The left side of the FileZilla window is the files on your hard drive. The right side is the files on your web server space. Navigate the left side pane to the directory where you saved your files you want to upload. Navigate the right side to the public_html directory, which is the root of your web storage. Then drag the files from the left and drop them on the right.
   
   You may want to create a directory on the web server inside of public_html/ to put your files in, so that not every lab's files share the same folder. To create a folder, right-click the empty white space in the right pane and choose Create directory.
   
4. Go view your files on the web by typing the following URL into your browser:
   • http://webster.cs.washington.edu/YOUR_UW_NETID/
   For example, if your UW NetID is johndoe, type the following URL:
   • http://webster.cs.washington.edu/johndoe/