Announcements00:00

  • CS50 Lunch is again this Friday 10/24 at 1:15pm, RSVP at the usual http://cs50.harvard.edu/rsvp.

  • Jason dressed as a pumpkin one year for his section that happened to land on Halloween 2011 (Section 8 at cs50.tv), and that year his air pump was working, but by 2012 his costume was deflated.

  • If you want to join us in pumpkin carving with Daven and Gabe this Friday 10/24, 3pm, RSVP by emailing heads@cs50.harvard.edu.

  • The final project will be discussed soon, but they can be almost any project of interest to you, with the approval of your teaching fellow.

  • To help you with that, we will have seminars, optional classes taught by teaching fellows and other staff from across campus, on various topics that are fun and different. This year’s lineup:

    • 3D Modeling and Manufacture

    • Amazing Web Apps with Ruby on Rails

    • Android 101

    • Breaking Through The (Google) Glass Ceiling

    • Build Tomorrow’s Library

    • Cloud Computing with Amazon Web Services (AWS)

    • CSS: Awesome Style and Design

    • Data Analysis in R

    • Data Visualization and D3

    • Essential Scale-Out Computing

    • Exposing Digital Photography

    • How to Build Innovative Technologies

    • iOS App Development with Swift

    • Learning iOS: Create your own app with Objective-C!

    • Light Your World (with Hue Bulbs)

    • Meteor: a better way to build apps

    • Teach Your Computer to See: Augmented Reality with OpenCV

    • Transitioning to Agile Development from Waterfall

  • If you want to register or see more information about these topics, visit http://cs50.harvard.edu/register.

HTTP Review03:14

  • We began and concluded on Monday with HTTP, Hypertext Transfer Protocol, which is just the way your web browser speaks to a web server, like the way humans extend a hand to each other to make a handshake.

  • A protocol is just a set of conventions of sending information back and forth, like this familiar picture:

  • The most common method used is GET, that looks like this:

    GET / HTTP/1.1
    Host: www.google.com
    ...
  • And that request is placed inside a digital envelope with the IP address of the computer it is from, and the IP address of the recipient. But we need one more piece of information, the port number, since the server might be listening for different kinds of communication. Port 80 is the most common as it’s the default for web traffic, so we’ll see that often, along with 443, used for secure web traffic (HTTPS).

  • Also remember that the / after GET means that we want the root of the web server, or the default webpage.

  • Hopefully the server responds with something like this:

    HTTP/1.1 200 OK
    Content-Type: text/html
    ...
  • And the number 200 is a convention saying that everything okay, with the Content-Type of the message text/html, and the …​ will be the webpage itself.

  • So now we can pick up by writing HTML, Hypertext Markup Language, that we’ll use to write webpages and specify their structure and style.

HTML05:50

  • On Monday we looked at this:

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>hello, world</title>
        </head>
        <body>
            hello,  world
        </body>
    </html>
    • Notice the angle brackets and the words between those brackets, which we’ll start calling tags. So <head> and </head> are the open and close tags, or the start and end tags, of an HTML element called head. The same applies to <body> and <html> and so forth.

  • We’ll look at more elements as we need them.

  • Browsers interpret HTML pretty straightforwardly. When we say <html> that just means "here’s the start of our HTML page", <head> means "this is the start of the head section", </head> means "this is it for the head section, stand by for something else", and so forth.

  • Text that isn’t in a tag, like hello, world, will just be displayed in the screen.

  • Notice the indentation, where we indent every time a new tag is opened, and unindent when it is closed, just like curly braces.

    • With <title>, we used our judgment in keeping it on the same line since it looks cleaner, fits easily in one line, and only contains one inner element.

  • The indentation could also help us think of the webpage as a tree:

    Graphical representation of DOM as a tree
    • The html tag is like the root of the tree.

    • We’ll call this tree the Document Object Model (DOM) that represents the HTML.

    • html has two children, with head on the left and body on the right, and head has one child, title, which itself has a child, hello, world. The oval conveys that it’s not a tag or element, but just text. These are all just arbitrary conventions that we use to represent an HTML document in a tree like this.

    • And as another note, <!DOCTYPE html> in our original source code is not a tag, but rather just a line placed there to indicate to the browser that this is an HTML5 file (different versions have different declarations).

  • Let’s open hello.html with gedit in the appliance:

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>hello</title>
        </head>
        <body>
            hello, world
        </body>
    </html>
    • This is a webpage that lives on the Desktop (or wherever you’ve saved it) and can be opened in Chrome with control-o:

      hello.html opened as a file
    • Notice that the URL in the address bar reads file:///home/jharvard/Desktop/hello.html, indicating that we are looking at a file on our local hard drive, and no one else should be able to see it.

Servers and Permissions11:41

  • We can fix this by using a web server. The CS50 Appliance, apart from being able to compile and run C code in a standard environment, has also been configured to run standard, open-source server software, including Apache (the most popular web server software in the world) and MySQL (a database software we’ll get to). Basically, we can use the appliance as a web server.

  • First, we open our Terminal, and run the following:

    jharvard@appliance (~): cd Desktop/
    jharvard@appliance (~/Desktop): ls
    hello.html
    jharvard@appliance (~/Desktop): mv hello.html ../vhosts/localhost/public/
    • The last command moves our file hello.html into a folder in our home directory.

    • vhosts is the root folder that the appliance’s server software looks into, localhost literally just means "this computer," and public means that everything within that folder is public.

  • We can check that it was indeed moved successfully with:

    jharvard@appliance (~/Desktop): cd ../vhosts/localhost/public/
    jharvard@appliance (~/vhosts/localhost/public/): ls
    hello.html
  • And now we can open a new tab in Chrome and enter http://localhost/hello.html, meaning we’re visiting our own computer, and requesting the file hello.html.

  • If we compare what we see now with to we saw earlier, the page looks the same, with the same "hello, world" text. But the difference now is that HTTP is being used.

  • In the bottom right corner of the appliance, we have something that looks like this:

    IP address displayed in the CS50 Appliance
  • This is a private IP address, so only the local network can access it. And it’s the IP address of David’s appliance, so yours might be different.

  • We can open the version of Chrome on our Mac (that’s running the appliance), go to http://172.16.254.133/hello.html, and see our webpage from our Mac. The web server doesn’t have an easy-to-remember name, and isn’t accessible by the rest of the Internet, but HTTP is indeed being used by Chrome on our Mac to communicate with the server running on our appliance.

  • Let’s go back to our appliance and gedit, and copy all the files from today’s source code to the public folder, including cat.jpg, and change hello.html to look like this:

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>hello</title>
        </head>
        <body>
            cat.jpg
        </body>
    </html>
    • But when we save and reload, all we see is this:

      cat.jpg displayed as text
  • We need another tag to tell the browser what we want to do:

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>hello</title>
        </head>
        <body>
            <img src="cat.jpg"/>
        </body>
    </html>
    • Note that, since the img tag is always going to be empty, it has the special syntax of being closed with a /> at the very end.

  • But when we reload, we see something like this:

    cat.jpg not displayed
  • We can go to View, Developer, Developer Tools:

    Developer tools in Chrome
  • And if we go to the Network tab and reload the page, we can look at the requests being made: