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.

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, follow the instructions below.

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 click on the "Log In Via Sheridan" button at the bottom. Then sign in using your Sheridan user name (not the UPN or email address) and password. The first time you sign in during a new term, your account is automatically created.

To manage your web space and the utilities using the browser and web interface, go to https://cpanel.login.dev.fast.sheridanc.on.ca.

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.

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 can upload your files/projects.

• Log into the dev.fast server and on the cPanel main menu, go to the File category and click on File Manager.

  

• On the left side of the File Manager app, make sure public_html is the current directory (it will be bold - if not, click it). You should also notice that it says "public_html" in the field at the top of the list, between the house icon and the GO button.

  

• If you still have projects/files from a previous semester, you can delete those, assuming you already have copies on your own computer (if not, you'll have to manually download all the files).

The /public_html directory is where you would create all your project directories and upload files. For example, you should first create your /assignments directory for your graded assignments (Note that file/directory names are case-sensitive, so your directory/file names must always match the instructions EXACTLY):

• Click the "+Folder" button above the list of directories on the left.

  

• Enter the name of the "New Folder Name" as the name of the directory you want to create. If you are creating the /assignments directory, it needs to be "assignments" in all lower-case. DO NOT type it any other way or I will not be able to access your assignments and you risk a grade penalty.

  

• Double-check that "New folder will be created in" is set to "public_html". If it isn't, you can just change the selection.
• Click the "Create new Folder" button.

To create sub-directories, simply click the parent directory in your directory list on the left so that you're inside that directory (again, it should be bold and also show in the field at the top of the directory list). Then click the "+Folder" button to repeat the process above.

To upload files, click the directory where you want to upload and select the "Upload" button.

A new browser tab/window will open. You can use the "Select File" button to browse and select files on your system or you can simply drag files from another window (e.g. Windows File Manager) to the area on the screen.

If you are copying over files that already exist, make sure you check the Overwrite existing files checkbox.

When the upload is complete, you can use the "Go Back..." link at the bottom of the screen to return to the file manger. You should see your uploaded files listed.

Important!
You can't upload a whole directory at once by selecting or dragging the directory in the Select Files screen! :(
You have to first create the directory on the server, then enter it, and then upload the files that belong in that directory. Yes, it's tedious, that's one reason why using an FTP client is preferred.

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.