FTP BASICS

There are instructions at the bottom of this file for MAC users. The MAC users may still need to read the top section of notes however for more details. Both the MAC and PC upload files the same way -- they just use different software so the interface looks a little different.

There is a FREE FTP program called WinSCP which you can download off the Internet.

All of you should already have an account set up on the server. If you go to the following address in a browser you should see your name listed:

Power Server

For this example I am using an account for a student named Mary Apple

When you click her name on the power server I end up on a page that looks like this:

Notice the link to CISW 300. This is the course Mary Apple is currently enrolled in. If you are enrolled in more than one web course, you see a link to all those classes listed here. Each one of these links takes you to your starting HOME Page for that class. This home page is named index.html. When I click that link to CISW 300 I end up on a page that looks like this:

The actual URL for this page is:

Upload Your Files to this account

Start WinsSCP by double clicking the icon. Your screen will look like this:

Hit NEW. You'll get this screen next:

You need to fill in some basic information. The program needs the HOST NAME which is the domain of the computer you are connecting to. It will need your USER NAME and your PASSWORD. Leave everything else alone.

Your Username should be your lastname with the first initial. Your password should be your student id number. So if I am login as Mary Apple with a student id of 1234567, the info would be as follows:

Once you have filled out this information, hit LOGIN. If it asks you about the server identity or KEY, just hit YES. You will be taken into your account on the power server. Your interface will look something like this:

The left side of your screen is your computer (where you are currently working). Notice you can see my C: directory circled in pink. That blue arrow is pointing to the directory navigation button -- I can use it to move through my directory tree.

The right side of the screen is your account on the Power server. See the area circled in green -- it shows the home/applem/ directory. The area where the orange arrow is pointing shows a folder in my Power Server account called public_html.

I want to upload some files from my computer to my web site. Before I can do this, I must navigate to the proper places on both computers. I'll start with the Power Server first by double clicking the folder called public_html. This takes me down into that folder where I see the following:

The blue arrow in the image above is pointing to the 'up' arrow. If I double click this I can go back up into the public_html folder (though I have no reason to do this). The area circled in Pink tells me where I am -- you can see I'm now inside the public_html folder.

You will see folders in this level for all the web classes you are currently enrolled in. If you are enrolled in more than one class, you will see multiple folders here. There is also a file called index.pl. Ignore this file.

Since I want to upload files for my Cisw300 class, I am going to double click that folder next.

Notice the area circled in pink up above. This indicates that I am in the correct folder. You can see I already have 2 files in this directory -- my home page index.html and another file called lab1.html.

I am now going to move over the right side of the screen and find the files I want to upload by moving through my directory tree on my computer.

By using the navigation tool that the pink arrow is point to up above, I find the correct folder. I'm going to upload a couple of files from this folder over to the web server, so the next thing I do is select the files I want. I can move them one at a time by dragging and dropping, or I can select multiple files by holding the control key down and then dragging and dropping.

In the image below, I grabbed the files from the left side of the screen and dragged them over to the right side of the screen and let them go. See the files as I release them circled in pink. It's important you drop them into a white space area. If you drop them onto of a folder on the right side of the screen -- they will move into the folder. If you drop them onto of another file, sometimes they don't move at all.

The moment I release (or drop) the files, I'll see a screen that looks like this.

Click Copy to complete the transfer.

Your files are now uploaded. You can go look at them on the internet by opening your browser and going to the correct URL. In the example I have used, if I wanted to look at the file called first.html I would go to the following URL:

It's important that you learn how to find your URL. Here's another example -- if my name was Bob Smith and I am enrolled in ARTNM 404 and I uploaded a file to my account called assignment9.html I would go to this address:

Notepad++

While Winscp is opened, you can right mouse click any of your files and select 'EDIT'. This will open your file in a text editor. You can change your code and then hit the save button. Your file will automatically save itself and REUPLOAD to the server. It saves you from having to constantly drag your files from one area to another every time you want to make a change.

The default editor that comes with WinSCP is a very basic text editor. You can, however, change the editor to anything you want, such as Notepad++ (assuming you have it installed on your computer). To do this, follow these steps:

Go to Options, and select 'Preferences'

Select 'EDITORS'. If Notepad++ is not listed in the list on the right, click the ADD button.

Change to EXTERNAL EDITOR, and type notepad++ into the box. Then click Okay.

Notepad++ should now be added to the list. Select it, and move it to the top of the stack, but clicking the 'UP' button. Then click Okay. When you select EDIT now, it should open in your new editor.

MAC USERS

First start the program fetch. This program works much the same as winSCP.

You'll now see a screen like this.

You need to fill in the hostname, username and password. These are these same regardless of whether or not you are using a Mac or a PC. In this example I am using an account for Kathy Brown, who has the studentid of 7654321.

NOTE: you many need to change the 'Connect Using' drop down option to SFTP

As soon as you hit connect you'll see a window like this. On the left side of the screen you will see your special folder called public_html (circled in red).

The rest of this program works just like the WinSCP up above. Double click the folder called public_html, then double click your class folder for the class you wish to upload your files for, such as cisw365.

After that all you have to do to upload your files is drag and drop them onto the FETCH screen. You will find your URL the exact same way the PC users do -- go read that section up above.

File Zilla

Filezilla can be used for either the Mac or the PC. It should run on both. It's free, so if you don't want to buy Fetch for the Mac, this is a good alternative. It works basically the same way as all the other programs do.

When you first start Filezilla, it will look like this:

You put the same HOST, USERNAME AND PASSWORD information in at the top of the program like it shows in the image below.

Underlined in yellow is the HOST name: power.arc.losrios.edu

Underlined in blue is the USER name: lastnamefirstinitial

Underlined in pink is the password: your student ID number

This is IMPORTANT!!! -- See the section underlined in green with the green arrow pointing to it. You must type 22 into that box. If you don't do that, your files won't work properly when you upload them to the server.

Click the button named 'Quickconnect' to connect.

Once you have connected, navigate to the directory you want. You will want to click open the folder called 'public_html', and then the appropriate class folder. The green arrow is pointing to the local computer where I have navigated to my desktop. You can see the file I want to upload called 'pagex.html' where the other green arrow is pointing. The pink arrow is pointing to the 'public_html' folder. When I click that I'll also see the class folder for my web class such as 'cisw300'. I must also click that.

When you have successfully navigated to the correct directory, you'll see the full path listed (circled in blue).

Once I've opened all the correct folders, I simply drag and drop my file 'pagex.html' over to the right side of the screen to upload it.

You will find your URL the exact same way the PC users do -- go read that section up above.