Notes on DJ4E: Session 1

This is a presentation of notes on the first four units of Django for Everybody:

  1. Introduction to Dynamic Web Content
  2. Installing Django on PythonAnywhere
  3. HyperText Markup Language (HTML)
  4. Cascading Style Sheets (CSS)

The goal is not to reproduce the most excellent materials Dr. Chuck has already provided us, but rather to supplement them with a few comments, adaptations, and demonstrations.

Participants are assumed to have to have completed the following units of Django for Everybody (https://www.dj4e.com) before this presentation:

  1. Introduction to Dynamic Web Content
  2. Installing Django on PythonAnywhere
  3. HyperText Markup Language (HTML)
  4. Cascading Style Sheets (CSS)

For each of these units, they should have:

  1. Watched the videos.
  2. Taken notes from the slides.
  3. Taken the quiz.

Client-Server Architecture

The first big takeaway is that web applications use a client-server architecture with the following characteristics:

  1. The user interacts with (interfaces with, to speak geek ;-) the application through the web client, a web browser.
  2. The data storage and processing takes place on a machine located across the network, called the web server
  3. The web client and web server are both computer programs that communicate with each other across the network through network sockets.

NOVA Web's "Software Stack"

The following are the specific technologies we focus on at NOVA Web Development:

  1. For our front-end web development, you need to know HTML, CSS, and JavaScript, the three languages that can be processed by web browsers.
  2. For our back-end web development, the tools to learn include GNU/Linux, PostgreSQL, Python, Django, Nginx, and Gunicorn.

Your goal for the internship should be to learn as much of this development stack as you can, and to identify which parts of it are the most appealing to you.

NOVA Web's Business Plan

Our plan is to launch our business by offering custom web application development using Django and the other tools in our stack.

We will begin marketing our skills using the three applications in our portfolio that demonstrate what we can do:

A high end goal of the Summer internship would be to add another application to this list. In order for that to happen, you would not only learn the basics of the development tools, but the best practices, including agile software development, which we aspire to learn and adopt.

Getting Data from the Server

We will use the GET HTTP/1.0 request with telnet to retrieve a web page from a virtual machine running Nginx on my laptop.

By the way, the linux kernel comes with virtualization built-in. I use Virt-Manager all the time to manage KVM VMs.

We'll pause here for the demo...

In Case You Missed It: Some RFCs

RFC791

The internet protocol (IP) specification - September 1981

RFC2616

Hyptertext Transfer Protocol (HTTP/1.1) - June 1999

The Simplest Browser

import socket

mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
mysock.connect(('rms.local', 80))
cmd = 'GET http://rms.local/ HTTP/1.0\r\n\r\n'.encode()
mysock.send(cmd)

while True:
    data = mysock.recv(512)
    if len(data) < 1:
        break
    print(data.decode(), end=' ')

mysock.close()

The Simplest Server

from socket import *

def create_server():
    serversock = socket(AF_INET, SOCK_STREAM)
    try:
        serversock.bind(('0.0.0.0', 9000))
        serversock.listen(5)

        while True:
            (clientsock, address) = serversock.accept()

            recved = clientsock.recv(5000).decode()
            pieces = recved.split('\n')
            if (len(pieces) > 0):
                print(pieces[0])

            data = 'HTTP/1.1 200 OK\r\n'
            data += 'Context-Type: text/html; charset=utf-8\r\n\r\n'
            data += '<!DOCTYPE html>\n<html lang="en">\n<head>'
            data += '<meta charset="utf-8">\n<title>Simplest Web Server'
            data += '</title>\n</head>\n<body>\n<h1>Hello, from the Simplest'
            data += ' Web Server!</h1>\n</body></html>\r\n\r\n'

            clientsock.sendall(data.encode())
            clientsock.shutdown(SHUT_WR)

    except KeyboardInterrupt:
        print('\nShutting down...\n');
    except Exception as exc:
        print('Error:\n', exc)

    serversock.close()

print('Access http://0.0.0.0:9000')
create_server()

The Final Demo

Let's end with a demo of the simplest_browser.py accessing the simplest_server.py. I'll be running the server on a virtual machine named rms, running inside my host machine (the laptop from which you are viewing this).

The VM can be accessed using the naming provided by Avahi, which enables services and hosts on a local network to discover each other, so I can access rms with the name, rms.local, without having to figure out what its IP address is.

After this last demo we will discuss our study plan for next week.