Lecture 33

Redirects and forms

MCS 275 Spring 2024
Emily Dumas

Lecture 33: Redirects and forms

Reminders and announcements:

• Project 4 is due 11:59pm Central on Fri Apr 26.
• Mon Apr 8 is the last day to submit email proposal for a non-SQLite project 4 topic.
• I expect to post Project 3 grades and feedback today

Web app updates

Let's review some offline work I did that is similar to what was shown in Lecture 32.

(Result: The task list view is nearly done.)

Web app todo list

• ☑ HTML mockup
• ☑ Stylesheet
• ☑ Learn a bit about Flask
• ☑ Database schema & test data
• ☑ Code/template to generate task list
• ☑ "Wait" button modifies DB
• ☐ "Wait" button doesn't crash server
• ☐ Activate rest of buttons
• ☐ Add page to create new task
• ☐ Create a front page

Action URLs

• /task/3/update?status=1 - Change status
• /task/3/update?shared=0 - Change privacy / sharing flag
• /task/3/delete - Delete a task (add this later?)

HTTP response code

Every HTTP request results in a numerical status.

So far, we've seen:

• 404 NOT FOUND
• 200 OK
• 500 INTERNAL SERVER ERROR

Redirect

There are also codes that instruct the browser to load another resource, e.g.

• 301 MOVED PERMANENTLY
• Means: Moved, make note of it. Never come here again.
• 302 FOUND
• Means: Temporary move. This time, you need to check some other place.

return flask.redirect("http://destination/",code=302) will accomplish a redirect.

Web app todo list

• ☑ HTML mockup
• ☑ Stylesheet
• ☑ Learn a bit about Flask
• ☑ Database schema & test data
• ☑ Code/template to generate task list
• ☑ "Wait" button modifies DB
• ☑ "Wait" button doesn't crash server
• ☐ Activate rest of buttons
• ☐ Add page to create new task
• ☐ Create a front page

Other buttons

We need to slightly upgrade update() so it checks the query parameters and forms a DB query that does whatever is asked.

We'll write one that supports updating multiple columns (even though the buttons don't do that).

Web app todo list

• ☑ HTML mockup
• ☑ Stylesheet
• ☑ Learn a bit about Flask
• ☑ Database schema & test data
• ☑ Code/template to generate task list
• ☑ "Wait" button modifies DB
• ☑ "Wait" button doesn't crash server
• ☑ Activate rest of buttons
• ☐ Add page to create new task
• ☐ Create a front page

Forms

Interactive elements in an HTML document (text entry, checkbox, dropdown list, etc.)

        

            Full name:
            
            Nickname:
            
            
        
    

jsfiddle is a nice way to test out form designs (for code that can be public).

Inputs name vs id

Each form input should have both a name and id attribute. Usually they are equal, but they have separate roles:

• name is what this value is called when submitted to the server.
• id is used to match an input with its <label>.

Textarea

<input type="text"> is typically for single-line answers.

Longer text entry (multi-line) should be handled with a <textarea> tag.

HTTP request types

GET - load a resource, the only action we've considered so far.

GET requests are supposed to be idempotent, meaning repeating the same request multiple times has the same effect as doing it once.

HTTP request types

POST - submit data and/or request an action.

POST requests are not expected to be idempotent. Browsers typically prevent reloading a POST request, for example.

Form values are made available to the function handling submission through flask.request.values.get(name).

Note that a Flask route must explicitly declare that it accepts POST requests:

        from flask import Flask, request

        # ... app setup ...

        @app.route('/registernick',methods = ['POST', 'GET'])
        def record_fullname_and_nickname():
            print("Received nickname {}".format(
                request.values.get("nick")
            ))