Studio: FlickList 2
In this studio we will talk about incorporating forms into your app, so that users can provide input and your app can respond to their input.
In our FlickList app, we will delete much of the previous "Movie of the Day" code, and start something new. Remember that ultimately our goal is to allow the user to keep a running "watchlist" of movies she plans on seeing. Today, we will create an app with a form that allows the user to "add a movie" to her watchlist. In the process, we will talk about:
Creating an HTML form
- GET vs POST
Responding to a form submission:
- map the request to a route on our app
- this should match the
actionattribute on our form
- this should match the
- accessing the data in the incoming request
- sending an appropriate response
Our app won't really be able to keep track of the user's movie list at this point. We will need a database to do that (coming up in a few weeks!). But for now, we'll just pretend the stored list exists by hard-coding movie titles
For the studio, your job is to provide another form that allows the user to "cross off" an item from her Watchlist.
Checking out the Studio code
For this studio (and all subsequent studios), you will want to start at the exact place where your instructor left off at the end of the Walkthrough. But don't worry--you do not need to have finished the previous studio, nor do you need to have frantically copied each line of code that your instructor wrote just now. Thanks to the magic of Git branches, we have a system in place that will allow you to start each studio with the correct starter code no matter what. Here's how:
First, check your status and make sure you do not have any uncommitted changes. If you do have uncommitted changes, make sure you
committhem right now, before moving on. Checking Git's status after doing so will result in a message similar to this:
$ git status On branch studio1 Your branch is ahead of 'origin/studio1' by 3 commits. (use "git push" to publish your local commits) nothing to commit, working tree clean
The start-point for today's studio is saved in its own separate branch. More generally, we have created one branch for each and every FlickList studio. Currently, you are on the
walkthrough2branch. To obtain today's starter code, you must switch to the
studio2branch, using the
$ git checkout studio2 Branch studio2 set up to track remote branch studio2 from origin. Switched to a new branch 'studio2'
After switching, if you type
git branchat the terminal, you will now see that there are four local branches, and you are currently on the
$ git branch studio1 * studio2 walkthrough1 walkthrough2
And if you look again at your code in your text editor, you will see that the code has changed! You have been transported to the parallel universe of Studio 2.
As mentioned above, your task is to implement a new feature for "crossing off" movies from the user's watchlist.
main.py in your text editor. You should see 3
# TODO comments in the code:
Add a form. Fill in the HTML string for
crossoff_formso that it displays something like:
I want to cross off ___ from my Watchlist.
where the blank is an input text field in which the user can type in the title of the movie she wants to cross off.
Handle the form submission. Fill in the function called
crossoff_moviewith the necessary code to handle incoming submissions and respond appropriately. You should display a confirmation message like:
Star Warshas been crossed off your Watchlist.
You can use the
<strike>tag to get that cool
Strikethroughstyle of text. Directly above the function definition, you will need to add a new url route for your app that should respond to incoming requests at
Use a dropdown instead of an input text field. For deleting a movie from a pre-existing list, an input field does not really make sense, because the user could theoretically type anything, even something that is not on her watchlist in the first place. A more sensible UI component would be a dropdown, which only allows the user to choose from among a limited set of choices.
<option>tags to create a dropdown component where the only available choices are the movies that are currently in the user's Watchlist. See w3schools for more about this form element.
Thus far, of course, there is no such thing as the user's "real" Watchlist, so you can just pretend. Simply hard-code a few of your favorite movies into the dropdown as if those movies make up the user's current watchlist. In other words, the movies in the dropdown will be the same each time because they will be part of the
Check in Your Changes
Before you leave, as always, you should
commit your changes:
$ git add . $ git commit -m "implemented TODOs"
Obviously your commit message might be something different. The goal of the commit message is just to provide a useful description of the changes you have made. This will make it easier for collaborators and/or your future self to understand your project's development progress.