ETSU Logo

CSCI 1210

Essentials of Web Development

Connect to the server with FileZilla

NEW!

Here's a new video that illustrates the steps required to upload a project from your local computer to your server account. This is how we "put our content" onto the web

Explanation

  1. OK. So, let's connect to the server, csci1210.com. What you're doing here is logging in to your account on the server in order to upload your completed web files to it so the world can see them
  1. Double-click on the FileZilla icon on the desktop (or click on the search button or bar and enter 'FileZilla', and then click on the FileZilla link)
  1. Now, you're going to be presented with a very busy display
Freeking FileZilla
Freeking FileZilla..busy! busy!
  1. So let's log in to our accounts. There is an account for each of you on the csci1210.com server, much like a commercial Internet Service Provider (ISP) would have. Think GoDaddy, for example.

    Your account name is your ETSU ID. For example, if your ETSU ID (the first part of your ETSU email address) is dokesj. So you would log in as dokesj. The server name is csci1210.com. You will be provided with your account password in class. Really?... putting it out here would get us hacked in a second! By the way...We won't email it to you, either. We've been asked. Nope. Try to remember it, please. Once you've entered the Host name, your Username, and Password, click on the Quickconnect button, and.....you're in!
Logging on to your account
Logging on to your account
  1. Here are the most important things to understand about FZ:
Understanding FZ
Understanding FZ
 

FileZilla is sort of like two windows of Windows File Explorer that are squished together. On the left, you're looking at the folders/files on your local (remember, "left" == "local") computer. The right ("remote", get it?) pane shows your folders/files on the server (remote) computer.

Whenever you launch FileZilla, you have to navigate to the proper locations on both. You can find your local working directory in the top left pane. This is why we're particular about how you name the directory (folder) - it makes it easier to navigate

The right side will be an almost mirror image of the left. There're a couple of little differences because the remote computer is running on Linux instead of Windows. Most important to understand is that the remote working directory is called '/', which is shorthand for 'root'

Understanding FZ
Understanding FZ
  1. On the right, you'll see '/' in the Folders pane and a list of folders that have already been created in the Folders pane. There are homework (ha ha!), css, images, js, labs, and midterm folders:
    • homework: We loathe homework as much as the next person. But in order to learn this stuff, we have to work on it outside of class. There will be a series of HW assignments preceeding your semester project
    • images: Experienced web designers know to create separate folders to contain similar files. It makes it easier to maintain web sites (or anything else for that matter, on a computer). These files are <global> on your site. Do not delete any of them
    • js: A JavaScript file to make your lives easier. It'll simplify your lives
    • labs: This is where you'll save your lab assignments. If they're not there, well, guess what your grade's gonna be
    • midterm: This is where you'll upload the coding part of your midterm exam. See 'labs' above for the admonition
    • css: This is a place for common CSS files, if we need it. At present, we're not using it
  1. IMPORTANT! Most of you are probably familiar with the Windows operating system. Here's the thing: Windows is not case-sensitive. It makes no difference to Windows if a file is named index.html or INDEX.HTML or InDeX.HtMl or INDEX.html or whatever. BUT your web server is running on Linux, which is a different operating system. Linux cares very much about letter case. So all of the above examples would be regarded by Linux as different files. So in this class, we'll name all of our files in all lowercase letters. And without spaces in their names
  1. In the left pane of FZ, navigate to your external drive in the folders pane. Locate your new hello.html file. Click on it and, while holding the left mouse button down, drag it to the right into your 'server' pane. Then release the mouse button. If you didn't already know, we nerds call this 'drag-and-drop.' This will make FZ upload the file to the server. Make sure you 'drop' it into whitespace, that none of the folders on the right are highlighted. That way, you'll be placing the file into the root folder of your website....we'll talk about that. Extensively
Finding the file you want to upload
Finding the file you want to upload

IMPORTANT NOTE!

A common mistake we've seen when students use the 'drag-and-drop' method of uploading work: don't 'drop' your work onto an existing folder on the right. In other words, make sure to 'drop' them into the whitespace

Dropping the files/folders on top of a folder that's already there will upload your work to that folder! ...instead of where you want it. This will mess up the path to your (current) work, making it difficult to access and possibly messing up the files/folders that are already in that subfolder

  1. The file (or folder) will then be uploaded to the server, allowing you to access it on the Internet