Example Reading

SQL
HTML
JS/JQ
Python and Flask
Conclusion

This file is under "lectures" but most lectures are intended to be usable as readings. There is also an activities file in this directory as well.

This course will cover

SQL for the back end
HTML forms and WAVE. Mostly skipping HTML and CSS
JS/JQ for the front end
Python and Flask for the middle

SQL¶

We'll cover SQL statements like this:

drop table if exists pet;
create table pet (
    pid int auto_increment,
    name varchar(30),
    dob date,
    weight float,
    sex enum('male','female'),
    neutered enum('yes','no'),
    species enum('dog','cat','rabbit'),
    litters tinyint,
    behaviors set('bites','hisses','scratches'),
    primary key (pid)
    );

HTML¶

We'll cover HTML forms like this one:

<!doctype html>
<HTML lang="en">
<head>
    <meta charset="utf-8">
    <meta name=author content="Scott D. Anderson">
    <link rel="stylesheet" type="text/css" href="sda-style.css">
    <title>Questions from the Mighty Wizard Tim</title>
</head>
<body>

<h1>Questions from the Mighty Wizard Tim</h1>

<form method="post" action="https://cs.wellesley.edu/~cs304/cgi-bin/dump.cgi">

<p><label> What is your name?
        <input type="text" name="user" size="30" placeholder="Arthur, King of the Britons">
    </label>

<p><label for="quest-elt">What is your quest?</label>
<p><textarea id="quest-elt" name="quest" rows="3" cols="50" placeholder="To seek the grail."></textarea></p>

<p><label>What is your favorite color?
        <select name="color">
            <option value="">choose
            <option>Blue
            <option>No, yel...
        </select>
    </label></p>

<p><input type="submit" value="process form">

</form>

<h2>Accessibility</h2>

<p>You can <a href="https://wave.webaim.org/refer">check this page with the WAVE tool</a></p>

<P>&copy; Scott D. Anderson<BR>
This work is licensed under a <a rel="license"
href="https://creativecommons.org/licenses/by-nc-sa/1.0/">Creative Commons License</a> <BR>
Date Modified: 
<!--#echo var="LAST_MODIFIED" -->

<!-- Creative Commons License -->
<ul id="iconlist">
<li>
<a rel="license"
href="https://creativecommons.org/licenses/by-nc-sa/1.0/"><img
alt="Creative Commons License" style="border: 0"
src="somerights.gif"></a> 
<!-- /Creative Commons License -->

<li><a href="https://www.anybrowser.org/campaign/"><img
style="border:0"
src="enhanced.gif" width="96" height="32" alt="Viewable With Any
Browser"></a> 

<li><a href="https://validator.w3.org/check?uri=referer"><img
style="border:0;width:88px;height:31px"
src="valid-html5v1.png"
alt="Valid HTML 5" height="31" width="88"></a> 

<li><a href="https://jigsaw.w3.org/css-validator/check/referer"><img
style="border:0;width:88px;height:31px"
src="vcss.gif" alt="Valid CSS!"
height="31" width="88"></a>
</ul>

</body>
</html>

JS/JQ¶

We'll cover some JavaScript and jQuery code like this:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name=author content="Scott D. Anderson">
    <meta name=description content="">
    <meta name=keywords content="">
    <link rel="stylesheet" href="https://cs.wellesley.edu/~anderson/sda-style.css">
    <title>Color Rotation</title>
</head>
<body>

<h2>Some Colors</h2>

<ol id="colorList">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Cyan</li>
  <li>Magenta</li>
</ol>

<form>
  <p><button id="nextColorButton" type="button">Next Color</button>
</form>

<h2>Even More Colors</h2>

<form onsubmit="return false;">
  <p><label for="colorMenu">Color Menu:
      <select id="colorMenu">
        <option value="">Choose One</option>
        <option>Chartreuse</option>
        <option>Salmon</option>
        <option value="#DF73FF">Heliotrope</option>
  </select></label></p>
  <p><label for="colorName">Color Name to add to the list:
      <input id="colorName" type="text" placeholder="brown">
  </label></p>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
// Code for Exercises 1 and 2

var mainColors = ["red","green","blue","yellow","cyan","magenta"];
var currColorIndex = 0;

function nextColor() {
    currColorIndex++;
    if( currColorIndex > mainColors.length - 1 ) {
        currColorIndex = 0;
    }
    return mainColors[currColorIndex];
}

function setNextColor() {
    var color = nextColor();
    $("#colorList li").css("color",color);
}

$("#nextColorButton").click(setNextColor);
</script>

<script>
$("#colorMenu").change(
    function () {
        $("#colorList li").css("color", $("#colorMenu").val());
    });

$("#colorName").change(
    function () {
        var extraColor = $("#colorName").val();
        $("#colorList").append("<li>"+extraColor+"</li>");
        $("#colorList li").css("color", extraColor);
    });
</script>



<!-- Creative Commons License -->
<ol id="iconlist">
<li>
This work is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/1.0/">Creative Commons
License</a> 

<li><a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/1.0/"><img
alt="Creative Commons License" style="border: 0"
src="http://creativecommons.org/images/public/somerights.gif" /></a> 
<!-- /Creative Commons License -->

<li><a href="http://www.anybrowser.org/campaign/"> <img
style="border:0"
src="https://cs.wellesley.edu/~anderson/enhanced.gif" width="96" height="32" alt="Viewable With Any
Browser"></a> 

<li><a href="http://validator.w3.org/check?uri=referer"><img
style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a> 

<li><a href="http://jigsaw.w3.org/css-validator/check/referer"><img
style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
height="31" width="88"></a>
</ol>
</body>
</html>

Or snippets like this:

// Code for Exercises 1 and 2

var mainColors = ["red","green","blue","yellow","cyan","magenta"];
var currColorIndex = 0;

function nextColor() {
    currColorIndex++;
    if( currColorIndex > mainColors.length - 1 ) {
        currColorIndex = 0;
    }
    return mainColors[currColorIndex];
}

function setNextColor() {
    var color = nextColor();
    $("#colorList li").css("color",color);
}

$("#nextColorButton").click(setNextColor);

$("#colorMenu").change(
    function () {
        $("#colorList li").css("color", $("#colorMenu").val());
    });

$("#colorName").change(
    function () {
        var extraColor = $("#colorName").val();
        $("#colorList").append("<li>"+extraColor+"</li>");
        $("#colorList li").css("color", extraColor);
    });

Python and Flask¶

We'll spend a lot of time with Flask, including code like this:

from flask import (Flask, render_template, make_response, url_for,
                   request, redirect, flash, session,
                   send_from_directory, jsonify
                   )
from werkzeug import secure_filename
app = Flask(__name__)

import random

app.secret_key = 'your secret here'
# replace that with a random key
app.secret_key = ''.join([ random.choice(
    ('ABCDEFGHIJKLMNOPQRSTUVXYZ' +
     'abcdefghijklmnopqrstuvxyz' +
     '0123456789'))
                        for i in range(20) ])

# better error messages for certain common request errors
app.config['TRAP_BAD_REQUEST_ERRORS'] = True

@app.route('/')
def index():
    return render_template('main.html',title='Hello')

@app.route('/greet/', methods=["GET", "POST"])
def greet():
    if request.method == 'GET':
        return render_template('greet.html',
                               title='Customized Greeting')
    else:
        try:
            ## throws error if there's trouble
            username = request.form['username'] 
            flash('form submission successful')
            return render_template('greet.html',
                                   title='Welcome '+username,
                                   name=username)

        except Exception as err:
            flash('form submission error'+str(err))
            return redirect( url_for('index') )

@app.route('/formecho/', methods=['GET','POST'])
def formecho():
    if request.method == 'GET':
        return render_template('form_data.html',
                               method=request.method,
                               form_data=request.args)
    elif request.method == 'POST':
        return render_template('form_data.html',
                               method=request.method,
                               form_data=request.form)
    else:
        return render_template('form_data.html',
                               method=request.method,
                               form_data={})

@app.route('/testform/')
def testform():
    return render_template('testform.html')


if __name__ == '__main__':
    import sys, os
    if len(sys.argv) > 1:
        # arg, if any, is the desired port number
        port = int(sys.argv[1])
        assert(port>1024)
    else:
        port = os.getuid()
    app.debug = True
    app.run('0.0.0.0',port)

Conclusion¶

Hopefully, readings will be kept relatively tight.