SYST10049 Setup Tasks

Basic Terms and Concepts

It's important that you understand these basic terms and concepts before you proceed. Make sure you are familiar with each one so you can accurately trouble-shoot any issues you might have.

Installing Software

In this course, you will need a compression/extraction tool so you can submit assignments and receive files from your professor, an editor that allows you to create and edit source code for web pages, and an FTP client to publish files to a web server.

Compression/Extraction Tool

A compression/extraction tool allows you to compress several files into one file that usually has a .zip extension (usually just called a "zip-file"). You will use this tool to submit your assignments to the SLATE dropbox. You will also sometimes use this tool to unpack a collection of files that your professor wants to give you for an exercise or assignment. For example, s/he might wish to give you a collection of images to use for a web site.

There are several free tools you can use. Note that for this course, we only accept .zip or .rar files, so if you choose a different tool, be sure that it's capable of creating standard .zip and/or .rar files with no password protection.

Here are a few I recommend. All of them are free: you don't need to pay for any of these.

• IZArc
• PeaZip
• 7-Zip
• WinRAR

HTML/CSS Editor

You need to have some kind of editor or IDE (Integrated Development Environment) that allows you to create and edit source code (HTML and CSS) for web pages. There are hundreds of free editors and IDEs, some more complicated than others. For this course, we will focus on VS Code (Visual Studio Code) but feel free to use something else. If you prefer to use a different IDE, it is assumed you are familiar with that tool and know how to solve any problems with it: your professor doesn't have time to help you figure out how to use a different tool.

Download Visual Studio Code for your platform.

Just download the latest version of VS Code and install it. The installation process should be pretty straightforward.

You don't need any extra plugins or extensions, but let me know if you have a favourite that you think we should add to the course.

If you're ever on a different machine, you can always use a Free On-Line HTML Editor temporarily.

FTP Client

An FTP (File Transfer Protocol) Client allows you to upload and download files to/from a server. You will use an FTP client to upload and manage your files in your web space on the Dev.FAST web server. There are several free FTP Clients available, but I find FileZilla to be the easiest to use. If you don't like FileZilla, you can find something similar such as Core FTP or CoffeeCup (the same people who wrote the free HTML editor).

• FileZilla (the client version, since you will be using it on your own machine)
• Core FTP
• CoffeeCup FTP

You will need to configure your FTP Client to connect to your web space after you install it. You'll do this after you set up your web space (instructions are farther down).

Setting Up Your Workspace

You will be storing the files that make up your web pages on the laptop you use in class (and/or on your computer at home). If you have not done so already, you should set up a folder/directory on your system for your term 1 or term 2 (whatever is appropriate) courses. Inside that folder/directory, you should add folders/directories for all of your courses (e.g. web, programming, math, etc.) You can use whatever names you like for the directories - you can use the course code, for example. In the screen shot below, I was lazy and just used simple names like "Python" and "WebDev".

Inside the folder/directory you created for this course, add an "assignments" (all lower-case letters) folder/directory. This is where you'll save all of your evaluated projects (graded exercises, assignments, etc.) You can store other stuff in the root web folder (e.g. in the "WebDev" directory) such as handouts, slides, and other files for the course. I also recommend setting up additional sub-directories for each week e.g. /week1, /week2, etc. Find some way to organize all your web projects so that you can easily find them (e.g. in week 8 I might say, "Open the project from week 4 with the navigation example...")

Once you set up your web space, the contents of your "WebDev" directory will be mirrored or cloned on the server: you'll have a directory there with copies of /assignments, /week1, /week2, etc. and all of the contents of those directories. This will make it really easy to publish your work on the server.

Setting Up Your Web Space

All assignments and exercises must be published on the Dev.FAST web server. You will be given space on this web server to publish your work. To obtain access to this space, you must request your space and a password that you will use to access that space (e.g. upload files, change settings). The password will be emailed to you within one business day, so don't leave this task until the last minute!

The dev.fast web server uses a server software called cPanel. CPanel provides a graphical interface that makes it easy to manage directories and files, and also manage security settings, among several other things.

To set up your web space account, simply go go Dev.fast cPanel (https://cpanel.dev.fast.sheridanc.on.ca) and sign in using your Sheridan user name (not the UPN or email address) and password.

To manage your web space and the utilities using the web, go to either one of the following URLs:

• If you're on any Sheridan campus: dev.fast.sheridanc.on.ca:2083
• If you're not on campus (i.e. at home): https://cpanel.login.dev.fast.sheridanc.on.ca where "login" is your own Sheridan login/user name.
• Note: if you're logging in from an unsecured network (e.g. from home) your browser might block access to CPanel. Chrome/Firefox gives you some advanced options on the page that can allow you to access CPanel "at your own risk". It's fine, it's safe to proceed.

If you see the "Choose a Starting Point" screen, just click the SKIP button.

The main cPanel page has many categories of tools. Each of these categories is collapsable, so you might want to collapse them all as you search for the tools you want - it makes it easier to search for things!

While using the tools, you can return to the main tools menu at any time by clicking the "Tools" link on the far left side of the page.

Changing your dev.fast Password (Optional)

If you'd like to change your password to your dev.fast account, scroll down the main cPanel page and look for the "Preferences" heading. Under that you should see the item "Password and Security". Or if you prefer, use the search box on the top-right of the page and search for "password".

Follow the instructions/prompts to create a new password.

Change File Settings (Mandatory)

There are a few file settings that need to be changed:

1. On the cPanel page, find Files > File Manager.

   

2. Click the "Settings" icon in the top-right of the main cPanel window.

   

3. For "Always open this directory in the future by default:" select Web Root (public_html or www)
4. Check off Show hidden files.
5. Click the SAVE button to save your changes to the settings.

   

Once you have your web space set up, you need to configure your FTP Client to connect to the web server so you can upload and manage your project files. The instructions below use FileZilla, but they should be similar for other FTP clients.

Setting Up the FTP Connection

FileZilla is one of several FTP clients you can use to upload (publish) files to your web space on the dev.fast server. You can also upload files using cPanel, but using FileZilla is much faster and easier.

Open up your FTP Client (e.g. FileZilla). You need to create a connection so that FileZilla will remember it and allow you to easily connect whenever you want.

1. Open the dialog where you can add/edit FTP connections. In FileZilla, this is done in the Site Manager (which many other FTP programs have). You can access the Site Manager by clicking on the first button in the button bar, shown in the screen shot below:

   

2. Add a new connection. There should be a button or menu item that allows you to add a new connection to your site manager.
3. You now need to enter the connection details. For the FAST Development Server, use the following details (if a field is not listed here, leave it set to its default value; if there is a field for the name of the connection, just choose whatever you prefer):
   • Protocol: SFTP (SSH File Transfer Protocol, SSH FTP, or Secure FTP)
   • Host: dev.fast.sheridanc.on.ca
   • User: enter your Sheridan login name
   • Password: enter the password you were given in when you set up your web space. If you've forgotten your password, reset it at tech.fast.sheridanc.on.ca.

   

4. Save the connection - there should be a Save, Ok, or similar button.

Once you have a connection established, you can check to make sure your connection works. If it's not already running, run your FTP client. Choose your connection to the development server and connect to it. In FileZilla, you do this by selecting it from the Site Manager.

If everything works, it should show you as connected and you can see the remote server directory listing. If you see any error messages, something didn't go right. Read the error message and fix the problems, then try again. Ask your professor if you see an error message that you don't understand.

Note
When you connect the first time, you will see a dialog box that warns you about a "Host Key Mismatch" error. This is nothing to worry about, just check "Update cached key for this host" and then click the OK button.

Copying your Directories onto the Server

Now you can mirror or clone your local workspace directory structure to the server in your /public_html directory. Open FileZilla if it's not already open.

• In FileZilla, connect to the development server if you're not already connected.
• Your local files are on the left side of the screen and your remote server is on the right side (think Left/Local, Right/Remote).
• On the server/remote side, make sure you are in your public_html directory by selecting in from inside your home directory: you can click it or you can click the small + sign beside it to expand the directory. When selected, the full path should appear above the main remote directory listing in the "Remote Site:" field.

  

• Now just drag all the directories (/assignments, /week3, /week4, etc) over from the local side (left side) to the remote side:
  • select all the directories on the local side by clicking the top directory, then hold down your computer's SHIFT key while you select the last directory - now all the directories should show as selected
  • use your mouse to drag-and-drop the selected directories over from the local (left) side to the remote (right) side
    

    

• You should now have a copy of all the files/directories from your local workspace onto your server space.
  

  

You can repeat this process for any directory/directories or file(s) that you want to upload from your local machine to the server. For more information on publishing, see How to Publish. You will create other directories throughout the course, so make sure you keep these instructions handy (i.e. bookmark them or summarize them in your notes) so you can refer to them if you need to.

Password Protect Assignments

You should now password-protect your assignments directory. The instructions are on a separate page: Protect Using the cPanel Directory Privacy Tool (opens in a new tab/window)

After you have set up your /assignment directory's credentials, come back to this page.

If you are still not sure or the professor has not provided a link to one of those documents in the course materials, email your professor and ask for clarification.

Once you have set up credentials for your /assignments directory, you can test it out:

• Open an "Incognito" or "private" window in your browser.
• In your browser's address bar, navigate to https://login.dev.fast.sheridanc.on.ca/ (replace "login" with your Sheridan user name). Make sure everything is in lower-case.
• You should see a page that is similar to the one below.
  

  

  
  Notice that you don't see your /assignments directory. That's normal: that is what is supposed to happen! Your /assignments directory is protected - no one can see it unless they are logged in using the credentials you just created. The only way for someone to access it is if they know to type /assignments at the end of the URL and they know your login and password.
• Now go up into the browser's address bar and add /assignments to the end of the URL.
  

  

• You should now be prompted to log in. Use your Sheridan username and the password you created for your /assignments directory. Remember, this is not your Sheridan password or cPanel password, this is the password you just created for your /assignments directory.
  

  

• After you successfully log in, you should be in the /assignments directory and see the contents of that directory (it's very likely empty, unless you've already added sub-directories/files in there previously).
  

  

If you have any issues with this process, review the instructions and make sure you followed them exactly as they are written. If you still can't figure out the problem, ask your professor for assistance: be sure to provide thorough details of what is going wrong, and take screen shots of any error messages or strange output you have.