Lab 1: Linux, HTML, Python Programming, and Numeric Operations

Goals

After the lab, you should know how to

Objective: Preparing for Lab

Review Lab 0 if you don't remember how to use the lab machines.

After logging into the lab machine and opening a terminal, run labhelp

Objective: Set up for Programming

  1. Open a terminal (if you haven't already).
  2. Create a directory called lab1 in your cs111 directory. Your programs and the output for this lab will all be saved in the lab1 directory.
  3. Copy all the files from the /csci/courses/cs111/handouts/lab1/ directory that end in .py into your lab1 directory.
    (Note: I made a shortcut for cs111 so you don't need to type the long course name.)

Objective: Introduction to the Python Interpreter (15 points)

On our system, you have two main options for writing Python programs:

  1. write your programs in a text editor (e.g., emacs) and use the terminal to run Python. This is what I will tend to do in class.

    OR

  2. write your programs in IDLE, using its shell to run the programs and then restart the shell to demonstrate your program working.

For your lab work, use IDLE.

Using the Interpreter in Interactive Mode

In a terminal, navigate to your directory for this lab, which you set up earlier. (The directory should be ~/cs111/lab1.)

To open Python's integrated development environment IDLE, use the command idle &

Recall: what does the & allow you to do?

You can use the interpreter in interactive mode to try out expressions before using them in a script. IDLE labels the interactive mode as "Python Shell". In IDLE, the main window--opened by default on start--is the interactive Python interpreter.

Type the following expressions at the Python interpreter prompt, one line at a time, and note what the interpreter returns:

Save the output from the interpreter in a file called interactive_practice.out.
Make sure that this file is saved in the appropriate directory (~/cs111/lab1).
You won't see the file if you try to open the file in IDLE--unless you select all files in the drop down box.

Using the Interpreter in Batch Mode

Save the output from the interpreter in a file called practice.out. Again, make sure that this file is saved in the appropriate directory (~/cs111/lab1).

Objective: Writing Your Own First Programs

Your programs will be graded on both correctness and style. Style will become more important as the semester continues.

As you probably figured out, the convention is that the names of Python scripts end in ".py".

Objective: Arithmetic Operations in Python

We'll practice writing several Python programs, each in their own text file. Name the files lab1_1.py through lab1_3.py.

Your programs will be graded on correctness and style. Make sure you adhere to the good development practices we discussed in class, e.g., use good variable names.

After you've developed a correct solution to each program, close the IDLE "shell" and reopen it by running the program again (using F5), demonstrate that the program works, and save the output to a file named lab1_x.out, where x is the problem number.

If you need help visualizing what happens when you run your program, you can use the Python visualizer. This is the same tool that is used in the online textbook.

  1. (15 pts) This problem has several parts. You will create a program (i.e., a script) in the first step and modify it for each subsequent step. Submit one program and one output file. I'll know you did the steps from your comments.
    1. Create three variables (i, j, and result) to calculate and display result = i² + 3j - 5 for the case where i=7 and j=2. Your code will not look exactly like this formula. Display the result and verify that the result is what you expect. Put the answer/output in a comment.
    2. Now that you have the computation/calculation working, consider what you should display. What would you want to see if you're the user? How will you know what the program does?

      You'll likely edit the program, execute it, review the output and if it looks like you want in a cycle multiple times as you get the display to be what you want it to be.

      Note that this is a good development process. First, get the "basic" program working. Then, make sure that your program is easy for the user/others to understand. The goal is not perfection the first time you write code (although that's something to aspire to). The goal is a development process that produces quality results in a reasonable amount of time and that shows you that you are making progress on each step. Progress can still come from a program that fails to do what you hoped, as long as you can say something like "that didn't work; I understand why and I know what to look into next."

    3. Change the name of the variable i to i21. Be sure to change the name everywhere the variable is used. Execute it to verify it still works.
    4. Now edit the Python script again and change the variable name to 21i. What error message do you get? Record in comments the error message and why the error message occurred.
    5. Revert your program back to a correct/appropriate variable name.
  2. (10 pts) How do you measure, measure a year? The musical Rent asks how you would measure a year and suggests love as the metric. Since we don't have a primitive data type that represents love, we'll measure a year in minutes. Write a program that computes (or calculates) the number of minutes in a year and plugs it into part of the chorus of Seasons Of Love.

    Note: do not recompute the number of minutes each time it is used in the chorus. Compute the minutes once and save it in a variable that you use in the print statements.

    Output (which is not exactly the same as the actual song's lyrics) should look like:

    525600 minutes, 525600 moments so dear.
    525600 minutes - how do you measure, measure a year? 
    
  3. (15 pts) MLB Hall of Famers. Rickey Henderson was voted into the Major League Baseball Hall of Fame in 2009. At one time Henderson was the career leader in three major offensive categories: runs, stolen bases, and walks. (Barry Bonds passed him in walks.)

    Henderson stole 1406 bases and was caught 335 times. Lou Brock is second with 938 stolen bases and 307 caught stealing.

    Calculate and display Henderson's and Brock's successful base stealing percentages. Then, display the difference in their percentages.

    Think about how to model the problem. What are you given? What do you need to represent? Create variables for what you need to model (and think about their data types). What do you need to output?

    Make sure your output is understandable to a user running your program.

    Note: The calculated numbers are not very pretty when displayed. We'll learn how to format the output more nicely later this term.

Objective: Using a Text Editor and Creating an HTML File (25)

You're going to create a web page using a text editor. Creating web pages isn't all or even most of what a computer scientist does. However, the Web is a great venue for a computer scientist to share her work with the world! (Or to create resources and information for her students.)

Use your newly learned Unix command skills to do the following:

  1. Open a new terminal. In one terminal, you will be working on the lab machine. In the new terminal, you'll be working on the computer science department's web server.
  2. ssh into the computer science department's web server using
    ssh -XY cs.wlu.edu

    You don't need to include your username because it's the same as your username on the lab machine.

    You are now in your home directory of the web server. View the contents of your home directory. Note that you don't have a cs111 directory because the web server has a different file system than the lab machines.

  3. Create a public_html directory. This is where you will put files that you want others to see on the Internet.
  4. Go into your newly created public_html directory and view its contents (which should be nothing).
  5. Copy the example.css, example.html, and example.gif files from your lab machine to the web server. (What? How?!?)
    1. In the terminal on your lab machine, go into your ~/cs111/lab0 directory.
    2. Confirm that you have the files we want to copy in this directory. If not, copy those files from /csci/courses/cs111/handouts/lab0

      (Copying the files into this directory was supposed to be done when we did the part of the lab starting with the slide titled "New Copy Task".)

    3. Copy all the files that start with example to your public_html directory on the web server, using
      scp example* username@cs.wlu.edu:public_html

      Make sure to change username to your username.

      scp means secure copy. It's very similar to the copy command, except that it allows you to copy files from one machine to another.

    4. Similarly to before, answer yes to the questions and then enter your password (which you won't be able to see).
    5. Confirm that you have copied those example files into this directory.
  6. Open another tab in your browser so that you can easily switch between the lab instructions and your work.
  7. Point your browser at the location:
    https://cs.wlu.edu/~yourusername/example.html

    You should see the example web page. Below are some fixes if you get an error message in the browser window:

    Error Solution
    file not found Check the URL. Does it match the one shown above? Is it similar to the URL for the course web site.
    permission denied Execute the following command in a terminal, in the public_html directory:
    chmod o+r *
    and then reloading the page. The command chmod means "change modifiers" and is giving others read permission on those files.
  8. Point your browser at the location:
    https://cs.wlu.edu/~yourusername/
    What do you see?
  9. In your terminal on the web server, copy example.html into a file named index.html. Now, point your browser to the location (or just reload the page):
    https://cs.wlu.edu/~yourusername/
    What do you see?

    (For now, just recognize that index.html hides the contents of your web directory and is the default file that the web server "serves" when the URL is a directory.)

  10. Type emacs index.html &

    Recall: What does the & in the command do?

      Possible problems:
    • If emacs opens with a "split" screen, click on the screen you want (likely the top one), then hit Ctrl+x 1. (Note that you are no longer holding down control when you hit 1.)
    • emacs may open by default on a "scratch" file. Under the "Buffers" menu, select index.html

  11. Look at the file and compare it to what you saw in the browser. How are things in the file related to what you see in the browser? For example, when you look at certain text in the HTML file, what does it look like in the browser? Or, look at it the other way: look for text you see in the browser. How is that marked up (the M in HTML) in the HTML document?

    HTML is not a programming language. You cannot solve computational problems using HTML. Rather, HTML is used to markup document with structure, for example, separating meta data from the body of the document and distinguishing headings from paragraphs in text.

    You don't need to understand everything in the document. For example, there are some elements in the given example.html file that are just meant to give you a pretty starting point for your web pages. The directions below will focus what you should look at in the document.

  12. Edit the file so that the title (between the <title> and </title> tags) and the top-level heading (between the <h1> and </h1> tags) say Your Name's Web Page instead of Example Web Page. Save the file. Reload the page in the browser.
    How cool is that?
  13. Now that you've seen how changing the HTML affects what you the browser renders, in your web browser, view the source for the web page. You can do this by right-clicking on the page and then you'll see "View Page Source" or something similar. Viewing the source is another way to help you find errors in your HTML because erroneous HTMl source code will display in red.

    In another tab in your browser, go to the W&L web page or another page of your choice, and view its source. Anyone can view any page's HTML source!

  14. Next, you're going to add two more links to bulleted (unordered) list of links.

    Start by finding a link on the web page and the corresponding code in HTML that marks up the link. Note the pattern of the links in the HTML file. How would you create a link to VMI? (You will perform similar activities throughout the course. You'll look at example code that does something similar to what you want to do, copy the code, and modify the code to do what you want.)

    1. The first link will be to the CSCI111 student sitting to your right. Imagine reaching out your right hand to your right. The person could be across from you in the pod. If you're in the rightmost chair in your pod (i.e., your right hand is against the wall or window), you'll link to the leftmost person in the pod to your right when you stand in the center of the room. Imagine that everyone reaches to their right and creates a "ring" around the classroom.

      Find out the person's full name, username, and year (for upperclass students) to create the link. The text for the link should include the student's full name and year, e.g, "Class of 2026" too.

      In the end, we will have created a "ring" of CSCI111 students!

    2. The second link will be to an online news article about computer science. See the Extra Credit page for ideas on how to find such an article. You may want to search for an article after lab, depending on your time constraints because we still have more to do in this lab. (Recall that you can connect to the CS web server from anywhere, as long as you have an internet connection and an SSH client.)
  15. Next, add an image to your web page. Find an image from the web. Yes, you are likely violating some copyrights, but it's for educational use, so you should be okay.

    This gets a little tricky, but we'll try.

    1. In your terminal on the web server, make sure you're in your public_html directory.
    2. Get the URL of your image. Typically, you can right-click on an image and there is an option to "View the Image in its own tab" or similar functionality. Copy that URL.
    3. Back in the terminal on the web server, run the command
      wget the-url-you-just-copied

      wget is a non interactive network downloader. We're using it to get an image by its URL.

    4. View the contents of your directory. It should now contain the image.
    5. If the image has an "ugly" name, rename it using the mv command, for example:
      mv this_is_SUCH_an_UGly_original_name12345.jpg newname.jpg Make sure that the image name has the same extension as the original name. Make sure that the image was saved in the appropriate directory.
  16. Change the image (img) tag in your web page to display this image. The alt attribute is used by screenreaders to describe the image to blind people. If you want to change the size of the image, use the width attribute, e.g., width="300" would make the width of the image 300 pixels.
  17. Don't forget to update the information at the bottom of the page as well, to give yourself credit for your work.

    Note that you didn't need any fancy software to create a nice web page! I create my web pages for the course in a similar manner.

Finishing up: What to turn in for this lab

You should be in the terminal (not the Python shell) to execute the following commands. You should be in your cs111/ directory.

  1. If you're not already, go into your cs111 directory. Create the printable file of your lab using the command:
    createPrintableLab <labname>
    In this case, the lab name is lab1.

    Putting it all together, the command you should execute is
    createPrintableLab lab1

    The script createPrintableLab creates a condensed version of your lab in a postscript file called lab1.ps and then converts the file to pdf in lab1.pdf. To save paper, the script puts two pages on a piece of paper. The script also highlights Python code appropriately.

    View the compiled printout using the command evince lab1.ps &

    evince allows you to view postscript files, which are suitable for printing. You should verify that the file "looks correct", i.e., no "garbage characters" and that your file is not be more than a few pages. Otherwise, you're printing too much. See the instructor or student assistant if you're having trouble.

    Review your printout with Professor Sprenkle before moving on OR, complete the next step and let her know that you have submitted your file so she can check it out.
    After making changes to your files, you must run the script to create a printable lab again. (You may also need to rerun the turnin script, described below.)

    Cleanup: emacs, jEdit, and IDLE may make backup files. The backup files have an "~" appended to the name of your file. When printing, if you see any files that end in ~, tell us and we will help you delete the files.
    Don't worry if you don't have these files.

  2. Submit your lab1 directory to your turnin directory so that I can see your files by running the command turnin lab1
    If everything is set up correctly, you copied your lab1 directory PLUS the printable lab as a PDF into your turnin directory. If you run the script again, it will create a backup of the previous submission and copy your current directory.
  3. Print out your lab submission. Open up the printable lab using evince again using evince lab1.ps &
    Under the "hamburger menu" (the three horizontal lines icon), select the print icon and choose to print to HPLaserJetIntroLab (If you're in the advanced lab, choose HPLaserJetAdvancedLab. It should be the default printer selected if you're in the lab.)
  4. Write out and sign the honor pledge on the print out. Staple all pages together.

Labs are due at the beginning of Friday's class. The electronic version should be in the turnin directory before 8:25 a.m. on Friday.

Ask well before the deadline if you need help turning in your assignment!

Grading (100 pts)