CSCI-1080 Intro To CS: Web Development

Saint Louis University
Department of Computer Science

Get familiar with the Linux command line

This Code Academy Tutorial is a nice and friendly place to start learning the command line.

Your first time login on the SLU server (hopper.slu.edu)

This short tutorial guides you to change your temporarily password, assigned to you by our Computer Science Department when you enrolled in CSCI-1080. You should have received an email from Dennis Thomas with your credentials: username and temporary password. Please have that email handy before you continue.

1. You may login into our department machines at Ritter 115. If you use a computer located in our classroom instead, you may login using the student credentials (password is written on the board top-right)

2. If you are using an MAC or a linux machine, open the “Terminal” application. If you are a Windows user and you do not want to use our machines in Ritter 115, you may have to download and install some software before you continue. (putty or BitVise) Windows does not come with a Linux Terminal.

3. After opening the terminal, use the program called Secure Shell (ssh) as follows:

ssh your_slu_username@hopper.slu.edu

For example, my username is flaviostudent, so I type:

ssh flaviostudent@hopper.slu.edu

1. Now insert your temporary password sent to you by email. Note that as you type passwords linux does not move the cursor for security reasons (it is easier to guess a password if we know its lenght).

2. The system will now ask you to insert the old password a second time for confirmation, and then the new password (sometimes twice again). Current security policies at SLU require your password to be: Ten (10) characters minimum, and Requires 3 of the 4 following character classes:

   1. Upper case letters,

   2. Lower case letters

   3. Numbers

   4. Symbols, i.e., !,^,% or similar

3. If you have followed this procedure successfully, your password has been changed and the hopper machine closes your connection to confirm the password update.

To use hopper.slu.edu, you now need to repeat the ssh command shown earlier, this time with your new password. Once you are logged in agan, the Linux system that runs on the hopper.slu.edu server, by default, enters into your home directory (a default directory), indicated with the special character ~. You may check the directory that corresponds to this ~ by typing the Linux command pwd as in primary working directory. This will print the name of your current/working directory. You should see something like this:

[flaviostudent@hopper ~]$ pwd
/student/flaviostudent

You may want to use hopper as your hosting server since it is free. Your webpages will be stored but not on the home directory. The files that you want to upload online will be located on your personal directory called www/. This is a special directory that runs the web server program (hopper runs a lot of programs). To change directory in Linux, we need to use the command cd, as in change directory:

[flaviostudent@hopper ~]$ cd www
[flaviostudent@hopper www]$

{}{} Now your directory has changed; note that the last letters before the cursor show you the last directory. If you type pwd again you should see:

[flaviostudent@hopper www]$ pwd
/student/flaviostudent/www

To go back one directory you need to use cd followed by two dots

[flaviostudent@hopper www]$ cd ..
[flaviostudent@hopper ~]$

Congratulations! You now know a little bit of Linux, and you are ready to start hacking with your web development project.

Other remote clients

You may use your own computer to access remotely into hopper.slu.edu (in computer science jargon, we say “to ssh” into a remote machine) but you should be aware of some differences.

If you use download and use the NoMachine client, you will not be asked to repeat the current password (the machines in the Linux Lab or Ritter 115 will instead ask for the repeat of the temp password). If you use another ssh client (putty or BitVise) you do not have to use the command ssh but you simply have to insert hopper.slu.edu as hostname and your username and temporary password. Then a window should popup asking you to confirm your old password. The port number to insert in putty and bitvise is 22. In a nutshell, the port number is part of the address. A computer is like a condo where all the applications leave in a separate apartment. The street address is hence not enough but the apartment numbrer is needed to reach a specific application running on a server. The command ssh already has embedded the port number.

Note also that windows version after Windows 10 (included) you may download and install a Linux client just as the MAC terminal. If you decide to do so, then you may also login on hopper using the terminal. Especially if you are (or you are thinking about) a computer science major or minor, it is a good idea to start getting familiar with Linux commands on your own time.

Basic Web Developer Skills

Before you setup your web development enviroinment, you should learn how to transfer files from and to your web hosting server. You may use either FileZilla (similar programs exist), or just Linux commands.

Use Filezilla to connect to Hopper (your SLU web server)

You can access to hopper.slu.edu from any location (as long as you have an Internet connection)

• Download and install Filezilla

• Open Filezilla and insert the login information:

  • Host: hopper.slu.edu

  • Username: your SLU username

  • Password: the password you choose when you created your SLU account. If you did not receive an email from our IT with a temporary password, please let your instructor know.

  • Port: 22 (if your connection is refuesed with port 22, you may try to retype your password or change the port to 21)

  • click on Quickconnect

• Once you see on the top (log) window a message confirming a successful connection with the hopper web server, you can transfer files from your local computer (shown on the left window) to the remote server (hopper) or viceversa

• Make sure your remote files are inside the www folder

• After transfering a file, e.g., page.html, ensure that the file transfer was successful by visiting
  http://cs.slu.edu/student/YOUR_SLU_USERNAME/page.html

• You may right click on any area inside the remote server window to create a new directory, for example “hw1”, double-click on the new directory and transfer your local files in such new directory

Use the Terminal to connect to Hopper (your SLU web server)

• Open your shell terminal (if you are a Windows 10 user this LINK may be helpful, otherwise you should download and install Putty

• type ssh YOUR_SLU_USERNAME@hopper.slu.edu

• type your password (the cursor will not move)

• type yes if you see a message asking you to add a key (it will ask you only once)

• once you are on hopper, you will see on the terminal something like this:  $

• change directory to www (your web space) with the Linux command cd, i.e., type 'cd www’

• you may create new directory with mkdir, for example: mkdir hw2, or remove empty directory with rmdir hw2

• you may remove files with “rm file.html”

• when you are done on hopper, type exit to close your ssh connection with the server

Transfer files using Secure Copy

• You may transfer local file on your hopper server www folder using the Linux command scp:
  

• Make sure you have on hopper the directory where you want to upload your file(s)

Dissecting secure copy

• scp is the Linux command (type or google man scp to see all other options)

• hw2/file.html this is the path of the file you want to transfer on your server

• hopper.slu.edu is the server name
  

• :~ this means that on that server, we should start from the default path (directory)
  

• /www/hw2/ from the default directory, follow this path and place the file there
  
  

With scp you may also copy files from the server to your local computer (for example inside the hw2 directory):

Empty www folder on hopper

Even if you have successfully created an account on hopper, please note that if your www directory does not contain any (html) file, you will see a Not found error when you visit your URL http://cs.slu.edu/student/YOUR_SLU_USERNAME/. This is expected, since the web server does not have anything to show you. You will get the same error if you are trying to access to a file that does not exist.

Development Enviroinment Setup

In this course you are going to develop HTML, CSS and Javascript. To do so, you need several tools. In this section I am going to discuss the setup of some tools that I strongly recommend for your development enviroinment. Feel free, however, to use any other tool you think are appropriate. These are some tools you may want to use:

• Download and Install FileZilla (recommended)

• Install Google Chrome (other browser work too but Chrome is my strong preference since it has some embedded tools I will use in class)

• Signup on github.com (optional)

• One of these code editors

  • Atom.io (made by github) recommended

  • TextWrangler (already installed on MAC OS Lab)

  • Notepad++ (PC) (merely notepad is not enough to edit code)

  • Sublime Text 3, (very good)

  • Visual Studio Code

  • Brackets.io

• Git (already installed on hopper, scroll below for instructions on how to Install it on your computer)

• Browser Sync (no need to refresh)

  • will need to install nodeJS for it to work

Setup your Web Development Editor

I am not going to discuss how to install Chrome, a text editor (for example Sublime Text 3) aside from asking you to google, for example “Chrome Download”. I an not going to discuss also how to signup on GitHub.com, however:

Install and Setup git (on your MAC)

• Google “Download git for Mac”

• Download the package (name could be something like: git-2.6.3-intel-universal-mavericks.pkg)

• When trying to launch it, you may see an error since the package is from an unidentified developer. To install it, go to your system settings, and select “Security and Privacy”, then allow the download of the up clicking the lock icon on the corner top left. Then select the option allow from “Anywhere”.

• Now go back on the packeage and install it.

• Verify that git is installed by opening a terminal and type

You should see the version of the package your just installed, for example
git version 2.3.2

Install Browser-sync (on your MAC) (Optional)

Browser-sync is an app that allows your browser to refresh automatically anytime you modify the source code of an HTML or a CSS page. To install it, we need to download and install node.js first:

• Google: “Download nodejs for mac”. It should point to http://nodejs.org/en/download

• Select the package Mature and Dependable Mac installer (your mac should download the package automatically)

• Double-click on the package file and proceed with the installation (you will need to insert user and password)

• Make sure that the installation is working

  • restart a terminal

  • type node --version and make sure it is installed

  • type npm --version to make sure also node package manager is installed (that's what we need to install browser-sync) Make sure that /usr/local/bin/ is in your path by typing echo $PATH from a terminal. This is to make sure we can run any command, in particular npm commands simply by typing them in the terminal (without specifying an absolute path)

• Now we are ready to install browswer-sync; we do so by typing the following npm command:

If during the installation MAC asks you to install the developer tools or other dependencies, you should go ahead and install those too.

You can more details check www.browsersync.io for details.

• Verify that browser-sync has been installed by typing

if the version shows up, then you have browswer-sync installed.

Install and Setup git (on your Window)

I have used Windows 10 to verify these instructions. If you have problem installing the software with another version of windows please let us know.

• Google “Download git for Windows”

• Download the exe file, for example the one at 64 bit (name could be: Git-2.6.4-64-biy.exe)

• launch the executable and click Next > until you find the window asking you to "Adjust your PATH enviroinment*. Make sure you select:

“Use Git from the Windows Command Prompt” and click Next > (twice)

• On the window asking you to configure the terminal emulator to use Git Bash, use the option: “Use Windows’ default console window”

• proceed with Next till the wizard installation is completed

• open the command line (searching for cmd)

• type:

You should see the version of the package your just installed, for example
git version 2.6.4.windows.1

Install Browser-sync on your Windows PC (Optional)

Browser-sync is an app that allows your browser to refresh automatically anytime you modify the source code of an HTML or a CSS page. To install it, we need to download and install node.js first:

• Google: “Download nodejs for windows”. It should point to http:nodejs.orgendownload

• Download your node.js package version (for example .msi at 64 bit if it is good for your machine)

• Accept the terms

• Make sure the “Add to PATH” optinos are selected (they should be by default)

• Click install and we are done

• check if node is insall by relaunching the cmd (do not use the previously open version)

• • type node --version and make sure it is installed

  • type npm --version to make sure also node package manager is installed (that's what we need to install browser-sync)

• now we are ready to install browswersync by typing into the cmd:

• let us verify it is installed by opening again a new cmd terminal and type

Play with browser-sync (Optional)

Let's test browser-sync by creating a folder on your mac:

• Open your text editor and save an empty page into the directory test as index.html

• Type a basic HTML file

• cd into your test directory

• Start the browser-sync program so you can sync the directory you are developing automatically (like a server listening to our changes)

The star means any file in the current (test) directory. Now Open the index.html page with Chrome and you just see all your edits automatically refreshed in the browser as you type and save new changes.