Django Tutorial Walkthrough 4A

Part 4A of a code walkthrough of the official Django tutorial. You may follow along if you are learning too. https://docs.djangoproject.com/en/4.0/intro/tutorial03/

Transcript

The following transcript was automatically generated by an algorithm.

00:02 : welcome to part four of a coding
00:05 : walkthrough for uh for learning the
00:07 : django web application
00:10 : we are at part four of the tutorial as
00:12 : you can see
00:14 : and um part three we went through how to
00:19 : make uh views that you make use of
00:22 : templates
00:23 : like the one use html template to be
00:26 : more specific
00:28 : and uh part four i believe is going to
00:31 : do um
00:32 : some forms
00:33 : where users can uh
00:36 : can input some data into the application
00:39 : so let's get started
00:41 : um so last time we had looks like we're
00:44 : gonna be working on this detail view
00:47 : a little bit more
00:49 : which uh currently looks like this
00:53 : uh
00:54 : and
00:55 : what we're gonna do
00:56 : is we're gonna update this detail view
00:59 : template
01:00 : let me go open that up
01:04 : there it is uh so currently it looks
01:06 : like this but we're going to change it
01:08 : to use a form element and
01:11 : looks like this is a quite
01:14 : a big change
01:16 : uh looks like we're basically starting
01:18 : over
01:19 : so let me go ahead and
01:21 : delete all of this code
01:24 : and this
01:26 : form code is slightly hard to read at
01:29 : the moment
01:31 : so i might actually
01:32 : decrease the font size by a little bit
01:35 : so the code lines up a little bit better
01:38 : on my screen maybe like this
01:44 : okay let's go for it so we're gonna
01:46 : start with a form element
01:51 : like so
01:52 : and
01:53 : [Music]
01:54 : there's some csrf token stuff which um
01:59 : which is for
02:01 : security purposes uh it will prevent a
02:04 : cross-site request forgery which is
02:08 : what a csrf
02:10 : stands for
02:13 : which is a very very common
02:17 : attack on web
02:19 : applications um
02:26 : and so it's good to see i think nowadays
02:30 : most
02:31 : web frameworks have some sort of
02:33 : built-in mechanism to prevent cf
02:37 : c as rf
02:39 : and django is no exception
02:42 : okay so we have this action
02:46 : maybe i'll make this text a little
02:48 : smaller as well um
02:50 : okay so i use the double quotes on the
02:52 : outside i think i need to use single
02:55 : quotes on the inside
02:58 : to be more sane and
03:00 : the method is post we're going to use a
03:03 : post method for this form
03:05 : um
03:08 : so when you when the user submits this
03:10 : form it's going to make another request
03:12 : to the to the django server
03:15 : we
03:16 : put the csrf token here
03:21 : um i'm not going to go into the details
03:25 : about how uh
03:28 : how cross-site request
03:30 : forgery works
03:33 : however i just strongly suggest you
03:37 : learn about it in the event that you
03:39 : don't already know
03:42 : how all that
03:44 : works okay
03:47 : okay so we're gonna have a field set
03:50 : uh which i think a field set just looks
03:53 : like a
03:55 : like a box
03:57 : like that
03:58 : i think that's what a field set is oops
04:01 : sorry
04:03 : uh a field set kind of looks like this i
04:05 : believe with a little title
04:11 : and then you have you're gonna have your
04:13 : fields
04:14 : field one blah field
04:19 : two blah and
04:21 : outside of the field set we have an
04:24 : submit input which just says vote so
04:28 : this is more or less the form that we're
04:31 : making
04:32 : so the form consists of this
04:36 : whole thing
04:38 : yeah so i think we're making something
04:40 : like this more or less
04:44 : okay and we actually are going to have
04:46 : h1 title here
04:51 : oh
04:52 : that's the legend
04:53 : okay
04:57 : i'm gonna kind of do my own thing when
05:00 : it comes to indentation because i don't
05:02 : have a lot of horizontal space on my
05:04 : screen right now
05:07 : and
05:09 : the thing the text that goes into the h1
05:13 : title is the question text
05:17 : and then
05:19 : and then that's the legend so the legend
05:21 : is this h1 maybe i don't quite need to
05:24 : make it multiple lines i can maybe go
05:26 : with that
05:27 : and then
05:30 : oh we have this if statement that
05:32 : conditionally renders an error message
05:35 : so
05:36 : so it an error message would be rendered
05:40 : like this
05:45 : and this
05:47 : this looks like a separate error message
05:50 : variable maybe to multi-line this guy
05:54 : so this would be error message would be
05:56 : passing as
05:58 : a context later on so like here
06:03 : this guy is the context
06:05 : we're going to need to at some point
06:09 : uh add in an error message here
06:14 : i bet
06:16 : all right to do here but this is going
06:18 : to make an
06:20 : error of some sort uh and that allows an
06:23 : error message to be defined here in the
06:26 : context of the template
06:29 : but this is conditional so we're going
06:31 : to add an if statement here i'm just
06:33 : doing the same thing as they do i just
06:36 : do it out of order
06:38 : so that i can explain
06:41 : things in the order that i want to
06:44 : explain them so
06:48 : okay so this
06:50 : error message is rendered conditionally
06:52 : depending on if an error message was
06:55 : supplied
06:56 : and then we're gonna loop through the
06:59 : choice set uh like we had done
07:03 : previously although i have deleted all
07:06 : that code now
07:08 : but it doesn't hurt to right write it
07:11 : again
07:13 : it never hurts to redo the same thing
07:15 : over again
07:21 : okay
07:23 : and then so for each choice uh each
07:26 : choice would be like
07:28 : choice a b c d and each one you the user
07:31 : can select it so we're gonna use a radio
07:34 : button
07:35 : to allow them to select it i'm gonna
07:38 : multi-line this
07:39 : so we can see everything on the screen
07:45 : and okay so this is interesting there's
07:48 : a loop counter construct
07:51 : that's being used here
07:54 : for loop dot counter
07:56 : um
07:57 : so that i would imagine that would be
08:00 : just counting starting from zero zero
08:03 : one two three of that there's a further
08:07 : and that gets uh we can we can
08:10 : use
08:10 : that uh using this double bracket
08:14 : notation and
08:16 : this
08:16 : id will end up being choice zero choice
08:20 : one choice two choice three and so forth
08:25 : uh we we can we can test that later to
08:29 : verify what i just said but i think
08:31 : that's what's going on
08:36 : and then we
08:37 : put the database id of the choice object
08:43 : in as the value
08:47 : and then we're going to have a label
09:00 : and
09:06 : and then in the label so this four
09:09 : attribute of the label
09:11 : associates this label with the input
09:14 : uh by the id of the input so this for
09:18 : field
09:19 : the fact that it matches the idea of
09:21 : this input
09:22 : associated
09:24 : associates the label with his input i
09:26 : think one of the effects of that is
09:29 : when the user clicks on this label
09:32 : it will also
09:33 : cause it to
09:35 : cause the browser to
09:38 : make it be like as if the user clicked
09:41 : on this radio button here
09:45 : among other things
09:47 : it also helps with the accessibility
09:50 : aspect
09:54 : of like like that when
09:55 : when a user
09:57 : uses a screen reader for example
10:01 : okay and then we have a brick
10:04 : and then we have an end for oh i already
10:07 : put in the end for okay and we have the
10:10 : end of the field set
10:12 : okay and then after the end of the field
10:15 : set we're gonna put in this submit
10:19 : input and then whose value is gonna be
10:22 : vote
10:24 : okay so that's our form
10:27 : we will probably need to update the view
10:31 : which is here
10:33 : in order to get this form to render
10:35 : correctly and we need to put in the
10:37 : error message among other things
10:42 : a quick rundown
10:45 : the name of each radio button is choice
10:48 : yeah so
10:49 : name here we're talking about here name
10:52 : of every single radio button is the same
10:54 : is choice which allows them to group
10:57 : together it causes
10:59 : it so that when you um
11:03 : that you have radio button
11:06 : like choice one
11:08 : choice one
11:10 : choice
11:11 : two
11:13 : well okay
11:14 : one let's say only one of them
11:17 : are supposed to be selected at a time
11:20 : and currently we have choice one
11:22 : selected
11:23 : um
11:24 : having all of them
11:26 : have the same name
11:29 : so all three of these radio buttons have
11:31 : the same name which is choice
11:34 : uh tells the browser that they're in
11:36 : this within the same group so when you
11:38 : select two for example
11:40 : and therefore e
11:42 : unselect one you'll know that to
11:45 : unselect one because all these are three
11:47 : are in the same group and therefore only
11:49 : one of them are supposed to be selected
11:52 : at any one given time
11:54 : so that's why we make all of them
11:57 : have the same name attribute uh the
12:00 : forms action
12:02 : uh is
12:03 : where we specify what url the browser
12:07 : should go
12:08 : in the event
12:10 : that uh
12:12 : the user submits this form uh clicks
12:14 : this vote button
12:15 : and what they're doing is
12:17 : adding a vote
12:20 : for the particular choice that they have
12:22 : chosen and that will end up being sent
12:26 : to
12:27 : the polls
12:30 : the polls vote
12:32 : url
12:34 : um
12:35 : which i think is supposed to be
12:40 : um
12:42 : this function down here which we haven't
12:45 : implemented yet but when we do
12:47 : we're gonna make it actually save the
12:50 : choice in the to save the vote in the
12:52 : database
12:53 : um this loop for loop counter indicates
12:57 : how many times the four attack has gone
12:58 : through its loop so it would go once for
13:02 : each choice
13:03 : that's associated with the question
13:06 : let's
13:07 : go ahead and go to the next part
13:10 : all right so
13:12 : we also created the dummy implementation
13:14 : of the vote function let's
13:16 : create a real version so they're talking
13:19 : about you know what before we create the
13:21 : real version
13:22 : so this is exactly what i was talking
13:24 : about so when you submit this form
13:26 : you'll hit this url which will end up
13:30 : hitting this vote function currently it
13:32 : doesn't do anything
13:34 : and they're saying the next step is
13:36 : write all of this code
13:38 : to make it actually save to the database
13:40 : uh before i do that i actually want to
13:42 : render this form
13:44 : and see if that's been written correctly
13:48 : clearly no
13:50 : the error message
13:52 : to do is undefined
13:54 : did they have code
13:57 : to
14:03 : put that in
14:04 : no not yet
14:08 : so we're kind of not ready to
14:12 : do that yet
14:16 : um
14:16 : [Music]
14:19 : whoa
14:22 : what are these
14:24 : amend views okay
14:27 : i'm gonna skip that one for now
14:33 : i kind of want to
14:36 : before i start changing these views
14:44 : okay let me just
14:46 : undo this change that i made so that
14:48 : this can actually render
14:54 : wait for the server oh there we go
14:56 : there's our form awesome
15:00 : so yeah i just wanted to test that this
15:02 : code actually did something
15:05 : it
15:06 : looks
15:07 : kind of nasty
15:09 : it doesn't look great the the spacing
15:12 : like
15:12 : th this border is
15:16 : sticks to this button which looks awful
15:20 : um and there's like way too much spacing
15:23 : up here versus down here so the whole
15:26 : thing just looks awful but we're not
15:28 : going to worry about that
15:30 : i don't think that's the point of the
15:32 : tutorial i'm going to select
15:35 : fried chicken and click on vote and what
15:38 : that did is it took us to the
15:42 : polls
15:43 : slash two slash vote
15:45 : url
15:47 : which
15:47 : was specified
15:52 : uh over here and that brings us to the
15:56 : views.vote function
15:58 : which is this guy and which is why we're
16:01 : seeing
16:02 : your voting on question two
16:05 : but in reality
16:06 : uh we should make this
16:10 : actually do something in the database uh
16:13 : namely record a vote
16:16 : instead of just just spitting out some
16:18 : text saying you're voting okay
16:20 : so that's what we're doing in the next
16:23 : step
16:25 : let's go ahead and do that
16:28 : um
16:30 : so the first thing we want to do is grab
16:32 : the question
16:35 : that is in question
16:37 : uh that is associated with the passed in
16:40 : question id which ultimately comes from
16:42 : the url over here in this case it would
16:45 : be two
16:46 : but we don't know what it actually is so
16:48 : we're gonna fetch it
16:51 : we're gonna use this get object or 404
16:54 : function
16:55 : which came from this
16:58 : django.shortcuts module we covered that
17:00 : in the last part
17:02 : of the tutorial
17:05 : and i'm going to pass in the model
17:08 : class and then um
17:11 : the primary key the pk
17:15 : okay i'm going to multi-line this
17:18 : so that we can i'm actually gonna
17:22 : kind of collapse the other methods so
17:24 : that we're focused then on this
17:27 : vote function here okay so step one
17:32 : we are getting the question
17:36 : based on this question id
17:38 : and then we're gonna do a try
17:40 : catch thing
17:44 : hmm
17:47 : uh i i see i'm going we use we're gonna
17:51 : use the choice set to grab
17:54 : the choice object
17:56 : that the user has selected
18:03 : are we using a post method yes we are
18:06 : okay
18:19 : so we can ask the request
18:22 : for
18:22 : [Music]
18:24 : parameters or post parameters more
18:27 : specifically
18:28 : using this syntax evidently post is like
18:32 : a dictionary that contains all of the
18:34 : values that were sent in from the form
18:37 : that were posted in so each input here
18:41 : has a name
18:42 : and the name of the input is the key
18:45 : by which the values are stored so you
18:49 : your input's name is choice
18:52 : uh it comes in as a the key choice
18:54 : within this post
18:56 : dictionary
18:58 : okay so we're gonna try
19:01 : to fetch
19:02 : the choice by this choices
19:05 : id i believe
19:07 : but if that didn't work we're gonna do
19:10 : some error handling
19:16 : evidently um
19:18 : is this i think this except with the two
19:21 : things in a tuple that means
19:23 : except if it's either of these types
19:27 : then we're gonna
19:29 : this is like a multi-match
19:32 : i believe
19:41 : then we're gonna
19:43 : render using the shortcut render
19:46 : function
19:48 : from over here that we covered in a
19:50 : previous video to render this
19:54 : detail.html
19:56 : template
20:04 : and here we supply the error message you
20:07 : didn't select a choice interesting
20:11 : okay
20:13 : trailing commas hello people like using
20:16 : trailing commas
20:18 : um
20:20 : i
20:21 : i have not gotten in the habit of using
20:24 : them
20:25 : um
20:26 : i don't mind it i guess i will
20:29 : do it like that
20:32 : else
20:36 : you can have an else as part of a try
20:39 : accept statement
20:41 : oh this this would be like else would be
20:44 : there was an error but it's not one of
20:47 : these two errors
20:49 : is that true or no
20:52 : or or else it means it did not
20:56 : have an error probably
20:59 : or
21:00 : then i have one of these two errors
21:02 : even if it's a different error it's
21:04 : still fine i guess is that what it means
21:08 : i might need to read about this python
21:10 : try except else
21:33 : execute if
21:35 : no exception i see also means
21:38 : there was no exception at all
21:42 : okay
21:43 : that's fine
21:44 : i would have put this code
21:46 : under
21:48 : this line
21:49 : in that case
21:51 : that's just what i am used to
21:54 : but this is the first time i have seen
21:56 : the
22:00 : else construct
22:02 : used with the try except
22:05 : so yeah i would have just put these two
22:07 : lines in here
22:09 : but i will follow
22:11 : the suggested
22:12 : way
22:14 : okay
22:15 : so now we're actually gonna redirect
22:18 : yeah this is a very common pattern when
22:20 : when somebody submits a form
22:22 : instead of rendering something directly
22:25 : we redirect it to a different page
22:28 : which in turn displays the results
22:32 : so let's do that
22:35 : so we're gonna redirect
22:39 : what is this reverse
22:41 : thing
22:44 : does that mean reverse lookup all right
22:47 : the word reverse
22:50 : is kind of curious
22:54 : parks equals question
22:58 : id comma
22:59 : so this
23:00 : this trailing comma is necessary to make
23:04 : python interpret this thing as a tuple
23:08 : if you didn't have this
23:11 : comma then
23:13 : it would be as if there were no
23:15 : parentheses at all
23:18 : so
23:19 : if you want to wrap the question id
23:21 : within a tuple
23:22 : oh that contains one thing in it yeah
23:25 : you have to do this trailing comma
23:29 : um
23:30 : all right
23:33 : all right i want to read about what this
23:35 : reverse thing
23:36 : is
23:37 : we're using the reverse function
23:40 : in the http
23:41 : response.redirect constructor
23:44 : constructor in this example this
23:45 : function helps avoid having to hard code
23:48 : a
23:48 : url in the view function
23:51 : it is given the name of the view
23:54 : that we want to pass control to and the
23:57 : variable
23:59 : portion
24:00 : where does this reverse function come
24:02 : from it comes from the
24:04 : django urls okay
24:07 : so reverse is
24:11 : a url utility
24:15 : i still think the word reverse is
24:18 : slightly
24:21 : what's the word
24:23 : jarring
24:25 : because it makes me think of reversing a
24:27 : list or something
24:30 : but that's okay
24:33 : as long as you know what it is
24:37 : uh so the reverse call will produce a
24:40 : url like this okay that's fine
24:44 : um and then
24:48 : what are we doing here
24:50 : after somebody votes in a question the
24:53 : vote view
24:55 : redirects to to the results page which
24:58 : would be this one and the results page
25:02 : uh we're gonna
25:03 : write that view now uh but let me test
25:06 : what we have done before changing yet
25:08 : another view okay
25:12 : slow down here
25:14 : um
25:15 : all right so i'm gonna go lasagna
25:19 : uh okay
25:21 : that didn't work there's a syntax error
25:24 : uh
25:25 : 40 line 49.
25:30 : did i forget to close something
25:39 : i forgot to close this parentheses that
25:43 : was opened here for the call of the
25:45 : reverse function so let me try to
25:49 : fix that
25:51 : okay i think we fixed
25:54 : yes i want to resubmit the form
25:57 : that i previously
25:58 : http response redirect was not defined
26:02 : so i
26:03 : forgot to import that
26:05 : that guy it should come from the same
26:07 : place as http response is my guess
26:12 : okay refresh and i can resubmit the form
26:14 : you're looking at the results of the
26:16 : question too
26:18 : but
26:19 : what i want to see is actually the
26:22 : change in the database because we have
26:24 : update we have upped
26:27 : the votes of the selected choice
26:30 : um and that should be seen
26:33 : i don't know which let's just go to the
26:36 : database
26:42 : which i can do by using my
26:46 : db browser for sqlite
26:53 : there
26:54 : i'm going to open up that
26:57 : database um which i i showed how to do i
27:00 : think in part two
27:03 : um okay so now we're gonna do go to the
27:06 : choice
27:07 : uh
27:08 : table and i see that lasagna
27:12 : has two votes so that must have been
27:16 : our doing in submitting the form
27:19 : so yeah if i if i vote for lasagna one
27:21 : more time
27:23 : then this number should get bumped up to
27:25 : three now if i go back and i look for
27:28 : fried chicken
27:30 : then fried chicken
27:32 : should get bumped up yeah and it did
27:35 : very good
27:36 : beautiful
27:38 : beautiful okay
27:40 : so now we're going to continue on
27:42 : and implement this results
27:45 : view function i'm going to collapse this
27:47 : vote function now and
27:50 : i'm going to focus on this
27:52 : results
27:54 : function
27:55 : so what we're going to do is
27:58 : again query for the question with that
28:02 : question id
28:03 : uh it really is the same line as here
28:09 : and here they're all the same line so i
28:11 : i might even do a copy and paste
28:16 : there
28:17 : and
28:18 : we're going to
28:19 : call the render just simply call the
28:22 : render
28:24 : from the shortcuts
28:28 : render takes a request
28:32 : the path
28:33 : to the template which in this case is
28:36 : result
28:38 : and it takes a context
28:41 : dictionary
28:43 : which contains the variables
28:46 : that we're going to pass to the template
28:49 : do we have this results template no
28:52 : so
28:54 : is it results plural yeah so i bet we're
28:57 : gonna create that template next yeah and
29:00 : there it is
29:01 : all right let's create this
29:04 : results html template
29:07 : and i'm just going to go ahead and copy
29:10 : what they have
29:13 : on there
29:16 : okay there's a header
29:21 : under the text of the question and then
29:25 : there's an unordered list
29:27 : and then we're going to use a little for
29:29 : loop again
29:37 : again we're using the choice set to loop
29:40 : through
29:40 : all of the choices
29:42 : that are um that are associated with
29:45 : this question
29:47 : um
29:48 : and for each of them we're going to make
29:50 : a
29:51 : list item
29:52 : like and
29:57 : first
29:58 : we're gonna show the text for that
30:00 : choice and then we're gonna do dash dash
30:03 : and then
30:04 : i'm gonna show how many votes
30:08 : um
30:10 : were cast
30:11 : for that choice
30:13 : and then
30:15 : i'm gonna show the
30:18 : oh
30:20 : there's this plural eyes
30:22 : okay
30:26 : interesting
30:27 : is it gonna say
30:29 : s or no s basically
30:36 : yeah this probably
30:39 : will put on an s or not depending on
30:42 : whether
30:44 : there's one
30:45 : choice one vote or more
30:48 : and then
30:51 : there's a link
30:53 : to allow the user to go to the vote page
30:57 : again
30:59 : which seems odd
31:02 : because
31:03 : why
31:06 : why would you repeatedly vote
31:11 : okay
31:12 : some some
31:14 : types of questions can allow you to
31:16 : repeat the level but i imagine you just
31:19 : select multiple of the choices
31:21 : and vote once
31:24 : in that case so i find this design
31:26 : choice
31:28 : odd
31:30 : okay in any case there it is
31:33 : let's try it
31:36 : okay nice fried chicken one vote lasagna
31:40 : three votes and if i go back to the vote
31:42 : page
31:43 : look for fried chicken again now it
31:45 : redirects me back to this page and show
31:48 : shows me the updated tally
31:51 : okay
31:52 : um
31:55 : note the code for a revolt view does
31:58 : have a problem what's the problem
32:01 : tell me what's the problem this vote
32:04 : he's saying this function has a problem
32:07 : it first gets the selected choice object
32:10 : from the database
32:12 : then computes the new va new value of
32:15 : vote and then saves it back to the
32:16 : database if two user there's a there's a
32:18 : race condition
32:20 : yeah two users of your
32:23 : website try to vote exactly at the same
32:25 : time
32:26 : it might go wrong as in one of the users
32:29 : votes will not get counted
32:32 : um
32:33 : if you're interested you can read about
32:36 : avoiding race conditions using f
32:40 : to learn how you can solve this issue
32:42 : okay interesting i'm not going to go
32:44 : down that route but i might in the
32:47 : future
32:49 : using generic views less code is better
32:53 : okay the detail function from tutorial
32:56 : 3.
32:58 : would that be this function here
33:01 : probably
33:03 : and the result views are very short
33:07 : and
33:08 : as mentioned above redundant the index
33:11 : view
33:12 : here
33:14 : which displays a list of polls is
33:17 : similar these views represent a common
33:20 : case of basic web development getting
33:22 : data from the database according to a
33:24 : parameter pass into the url
33:27 : loading a template and returning
33:29 : the rendered template because this is so
33:32 : common
33:33 : uh django i'm reading this paragraph by
33:36 : the way because this is so common
33:38 : django provides a shortcut called the
33:41 : generic views system
33:44 : generic views abstract common patterns
33:46 : to the point where you don't even need
33:49 : to write python code
33:52 : to write an app let's convert
33:55 : our poll
33:57 : app to use the generic views system so
34:00 : that we can delete a bunch of our code
34:05 : okay i'm actually going to um
34:09 : pause
34:10 : there
34:11 : uh because i need to uh run to uh
34:16 : to pick up my daughter from school so
34:18 : i'm gonna pause this here and continue
34:21 : on
34:22 : in the next video