Putting your data on the web with webtools

The Internet & the Web

Servers
IPs, DNS, URLs

Let us start with URLs

Uniform Resource Locator

protocol: How to get the information
server: Where to get it
location: Where to get it on the server
query: Parameters

Server names & IP addresses

www.google.com is mapped to 74.125.136.99
74.125.136.99 is the IP address.

HTML

Basic language of the web
Textual markup language

<html>
    <body>
        <p>This is a paragraph</p>
    </body>
</html>

Markup language

Text based
Marks certain pieces of text
Mix of semantic and visual marking

Basics of HTML

<tag> is an opening tag and </tag> is a closing tag
<tag /> is short for <tag></tag>
We'll see an example in a second.
Use lower-case (even if it doesn't matter).
Hierarchical structure
- html
  - head
    This contains meta information about your document
  - body
    This contains your actual document
    - p: paragraph

Example

We will start developing our own webpage.
Open a new file called index.html and copy the code below:

<html>
    <body>
        <p>This is a paragraph <strong>with a strong message</>.</p>
    </body>
</html>

This looks ugly

CSS: Cascading Style Sheets.
Associate markup with visual aspects.

<html>
    <head>
    <style>
    strong {
        color: red;
    }
    </style>
    </head>
    <body>
        <p>This is a paragraph <strong>with a strong message</>.</p>
    </body>
</html>

Include images


<img src="image.png" />

Dynamic Websites

With what we learned so far, we can write a static website.
A static website is one which always shows the same results.
It's not so interesting, although we can make some excellent websites with Javascript.
The other method is to have the server generate the pages dynamically.

Generating webpages with Python


from flask import Flask

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    return """
<html>
    <body>
    <p>Hello World</>
    </body>
</html>
"""

app.run()


$ python flaskr.py

Making output depend on the query


from flask import Flask, request

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    name = request.args.get('name', 'World')
    return """
<html>
    <body>
    <p>Hello {0}</>
    </body>
</html>
""".format(name)

app.run()

Using templates

The previous operation is common, flask supports it builtin


<html>
    <body>
    <p>Hello {{ name }}</p>
    </body>
</html>


from flask import Flask, render_template, request

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    name = request.args.get('name', 'World')
    return render_template('greet.html', name=name)

app.run()

Generating images from Python!


<html>
    <body>
    <p>Value is {{ value }}</p>
    <p><img src="pow-fig?value={{ value }}" /></p>

    </body>
</html>


from flask import Flask, render_template, request
import numpy as np
from matplotlib import pyplot as plt


app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    value = float(request.args.get('value', 2.0))
    return render_template('pow.html', value=value)


@app.route('/pow-fig')
def pow_fig():
    value = float(request.args.get('value', 2.0))
    fig,ax = plt.subplots()
    ax.plot(np.arange(10)**value)
    ax.set_xlabel('x')
    ax.set_ylabel('pow(x,{})'.format(value))
    fig.savefig('tmp.png')
    data = open('tmp.png', 'rb')
    return data.read()
app.run()

We could do better code, but this is pretty decent

Go back and forth!


<html>
    <body>
    <p>Value is {{ value }}</p>
    <p>
    Go to <a href="/?value={{ value - 1}}">prev</a><br />
    Go to <a href="/?value={{ value + 1}}">next</a>
    <p><img src="pow-fig?value={{ value }}"</p>

    </body>
</html>

Forms


<form action="/form" method="get">
    <p>Set <input name="value" value="{{ value }}" />
    <input type="submit" />
</form>

Putting your data on the web with webtools

Goals for this session

The Internet & the Web

Let us start with URLs

Server names & IP addresses

Special IP addresses

Ports

Summary

HTML

Markup language

Basics of HTML

Example

This looks ugly

More HTML

Include images

Javascript

Dynamic Websites

Generating webpages with Python

Making output depend on the query

Using templates

Generating images from Python!

Go back and forth!

Forms

This is all on the fly

Important Words on Security

Thank You