WEBVTT 1 00:00:00.810 --> 00:00:04.110 Now, one of the first things I want to tackle is getting it out. 2 00:00:04.160 --> 00:00:07.430 Hold on the user typed in too, the URL, 3 00:00:07.700 --> 00:00:11.330 or rather known as parsing a URL in this case, 4 00:00:11.360 --> 00:00:16.360 if the user typed in ww.mysite.com and then they had a forward slash with a 5 00:00:18.050 --> 00:00:19.400 path, for example, 6 00:00:19.400 --> 00:00:24.400 forward slash Angela or forward slash mail forward slash messages forward slash 7 00:00:25.010 --> 00:00:29.900 pictures, then we want to be able to get hold of the information in that path, 8 00:00:30.380 --> 00:00:34.190 because we might be able to do something different with it and render something 9 00:00:34.190 --> 00:00:38.840 specific. Based on that URL previously, 10 00:00:38.840 --> 00:00:43.840 we already saw that we could change the route of our website by serving up 11 00:00:45.020 --> 00:00:48.290 different information. So if the user went to the home route, 12 00:00:48.290 --> 00:00:51.440 which is just the URL and then a forward slash, 13 00:00:51.680 --> 00:00:55.670 then we would show them something. But if they went to a different route, 14 00:00:55.670 --> 00:00:59.480 for example, forward slash hello, then we could show them something else. 15 00:01:00.710 --> 00:01:04.220 This is where we left off in our previous lessons. 16 00:01:04.850 --> 00:01:09.850 If I wanted to create a BI function that just simply returns by 17 00:01:13.400 --> 00:01:16.880 then I could set up the route decorator. 18 00:01:16.880 --> 00:01:21.880 So this is the decorator function to look for when the user goes to a specific 19 00:01:23.240 --> 00:01:26.120 path, for example, for what slash buy, 20 00:01:27.140 --> 00:01:29.960 remember that this is a decorator function, 21 00:01:29.960 --> 00:01:32.810 which lives inside a App Object, 22 00:01:32.900 --> 00:01:37.190 which is declared in the flask class. Now, 23 00:01:37.190 --> 00:01:39.680 if all of that sounded like it didn't make any sense, 24 00:01:39.710 --> 00:01:44.270 then be sure to review the lessons that we did in previous days on classes and 25 00:01:44.270 --> 00:01:45.020 methods. 26 00:01:45.020 --> 00:01:48.950 I'm going to assume that all of this is pretty straightforward to you by now. 27 00:01:49.910 --> 00:01:51.620 Now when we run this website, 28 00:01:51.860 --> 00:01:56.860 we can now go to the URL and we can go to the homepage, 29 00:01:57.350 --> 00:02:01.430 which says, hello world. And we could go to the buy route, 30 00:02:01.490 --> 00:02:06.380 which just says, buy with an exclamation. Okay. What if we want, 31 00:02:06.380 --> 00:02:09.860 I wanted to have a variable in that route. 32 00:02:10.130 --> 00:02:15.020 What if we want to get hold of what the user types in him, for example, 33 00:02:15.170 --> 00:02:20.170 let's say that instead of just catching by and forward slash what if we wanted 34 00:02:21.170 --> 00:02:22.610 to greet our user, 35 00:02:22.880 --> 00:02:27.880 let's say I create a greet function that takes their name and it returns 36 00:02:28.730 --> 00:02:32.540 something like hello, but then it adds the name. 37 00:02:33.800 --> 00:02:36.740 Let's turn this into an F string to make that work. 38 00:02:37.430 --> 00:02:40.640 The question is how would we create the route? 39 00:02:41.390 --> 00:02:46.160 Would it be forward slash name or would it be something else? 40 00:02:46.670 --> 00:02:51.410 Well, this is what is described in this section of variable rules. 41 00:02:51.950 --> 00:02:55.580 We can add variable sections to a URL. 42 00:02:55.640 --> 00:03:00.640 So basically it's the equivalent of creating a variable that URL by marking it 43 00:03:01.990 --> 00:03:03.400 with this syntax. 44 00:03:03.760 --> 00:03:07.210 So putting some angle brackets around the variable name, 45 00:03:08.020 --> 00:03:11.740 then all function is going to receive the variable name. 46 00:03:11.890 --> 00:03:14.680 Once the decorator is done with it, 47 00:03:15.250 --> 00:03:18.520 and then we can use it inside our function. 48 00:03:19.240 --> 00:03:20.470 So for example, 49 00:03:20.800 --> 00:03:25.030 let's say that we had a route which is forward slash username, 50 00:03:25.390 --> 00:03:29.170 and then forward slash the actual name of the user, 51 00:03:29.920 --> 00:03:32.620 which we'll put inside some angle brackets. 52 00:03:32.980 --> 00:03:37.180 This means a flask is now going to turn, whatever it is that comes after. 53 00:03:37.180 --> 00:03:41.500 Use a name forward slash into a variable for us to tap into. 54 00:03:41.980 --> 00:03:44.440 And that variable has the name of name. 55 00:03:44.980 --> 00:03:48.310 So now when our greet function goes through that decorator, 56 00:03:48.550 --> 00:03:53.440 it's going to receive that value and we can use it in this greet function. 57 00:03:54.130 --> 00:03:56.890 Now, if I go ahead and rerun my code 58 00:03:59.350 --> 00:04:04.350 and go back to that URL and I go to user name forward slash, 59 00:04:06.730 --> 00:04:09.550 and then I'll put in a user name, for example, Angela, 60 00:04:10.060 --> 00:04:15.060 then that Angela is going to be taken and it's going to be rendered dynamically 61 00:04:15.430 --> 00:04:19.090 into my webpage. So it doesn't matter what it is I put here. 62 00:04:19.120 --> 00:04:24.120 It's always going to respond accordingly and treat this as if it was the value 63 00:04:25.060 --> 00:04:25.960 to a variable. 64 00:04:28.060 --> 00:04:32.650 Now notice how every single time we update our code. So for example, 65 00:04:32.650 --> 00:04:37.420 if I didn't want this to be under the route forward slash username fall in slash 66 00:04:37.450 --> 00:04:38.170 name, 67 00:04:38.170 --> 00:04:43.170 instead if I just wanted to put it at forward slash name, 68 00:04:43.810 --> 00:04:48.340 this is not going to work as it is. It's going to give us a four Oh four, 69 00:04:48.340 --> 00:04:49.450 which is not found. 70 00:04:50.020 --> 00:04:55.020 And the reason for this is because we have to stop and refresh all server for 71 00:04:56.320 --> 00:04:58.570 these changes to be reflected. 72 00:04:59.110 --> 00:05:02.590 So I have to stop and then rerun my server. 73 00:05:02.680 --> 00:05:07.680 And now if I go to here and I start typing something like John, 74 00:05:08.860 --> 00:05:11.920 then this update to the route is now live. 75 00:05:12.550 --> 00:05:16.960 If we are testing and developing our website, this is really painful. 76 00:05:16.960 --> 00:05:21.820 Having to stop and rerun the server every single time we make a change in our 77 00:05:21.820 --> 00:05:22.900 server file. 78 00:05:23.470 --> 00:05:27.340 So one of the things that you might notice here is that there is something 79 00:05:27.340 --> 00:05:31.900 called a debug mode, and we can set this to be on or off. 80 00:05:32.380 --> 00:05:37.380 Now there's a couple advantages of having the debug mode on and it's described 81 00:05:38.020 --> 00:05:42.520 in the Quickstart. It allows us to activate the debugger, 82 00:05:42.610 --> 00:05:46.000 which helps us narrow down on any issues. 83 00:05:46.450 --> 00:05:51.450 It activates the automatic reloader so that whenever we edit off a file and hit 84 00:05:52.090 --> 00:05:55.810 save, it's going to reload our server. And finally, 85 00:05:55.810 --> 00:05:59.630 it also enables debug mode on the flask application. 86 00:06:00.230 --> 00:06:05.060 Let's give that a go in order to change our app to run on debug mode. 87 00:06:05.270 --> 00:06:07.610 All we have to do is to change right, 88 00:06:07.660 --> 00:06:10.600 the debug property to true, right? 89 00:06:11.530 --> 00:06:15.610 And now if I go ahead and rerun this application, 90 00:06:16.150 --> 00:06:19.000 then you can see my debug mode is now on. 91 00:06:19.540 --> 00:06:24.520 And I've got this debugger is active and also a debug, a pin, 92 00:06:24.580 --> 00:06:28.480 which we'll come back to in just a minute. If I go to my website, 93 00:06:29.440 --> 00:06:34.270 you can see that I can go there two, a route like this, 94 00:06:34.330 --> 00:06:35.470 and it still works. 95 00:06:35.890 --> 00:06:40.330 But if I was to change something in my code, 96 00:06:40.630 --> 00:06:43.990 for example, just adding a new word into the return. 97 00:06:44.440 --> 00:06:49.440 If I go ahead and hit command S on Mac or control us on windows to save this 98 00:06:49.960 --> 00:06:51.850 file, then it will right. 99 00:06:51.910 --> 00:06:56.440 Reload the server because it's tech did a change in that file, 100 00:06:56.680 --> 00:07:01.600 and it's going to reload our server automatically so that we don't have to stop 101 00:07:01.600 --> 00:07:04.360 and start all over again. So now, 102 00:07:04.360 --> 00:07:08.050 if we go back over here and we refresh this page, 103 00:07:08.230 --> 00:07:11.650 then you can see that update in the code is now reflected. 104 00:07:12.220 --> 00:07:16.780 This is pretty neat. But in addition, we could also do other things. 105 00:07:16.930 --> 00:07:21.580 For example, if we actually need to debug an issue, for example, 106 00:07:21.580 --> 00:07:25.360 let's say that here in my variable path, 107 00:07:25.420 --> 00:07:28.930 instead of saying name, I quote it username. 108 00:07:29.320 --> 00:07:30.940 But then in my greed function, 109 00:07:30.970 --> 00:07:33.850 I'm still trying to tap into this variable code name. 110 00:07:34.450 --> 00:07:36.220 So now if I hit save, 111 00:07:36.220 --> 00:07:40.870 it's going to reload my server and you can see that there's actually nothing 112 00:07:40.870 --> 00:07:44.320 wrong with what I've done. This is all syntactically valid. 113 00:07:44.890 --> 00:07:48.250 But if I go to my website here and I hit enter, 114 00:07:48.670 --> 00:07:51.460 I actually get the flight task debug view. 115 00:07:52.000 --> 00:07:56.140 So it's it actually telling me in this nicely formatted way? 116 00:07:56.200 --> 00:08:00.160 What is the issue? So the main issue, right, is that I got a type II error. 117 00:08:00.730 --> 00:08:01.570 Yeah, it happens. 118 00:08:01.570 --> 00:08:06.570 If we scroll through the bottom is that the green function got an unexpected 119 00:08:06.580 --> 00:08:08.980 keyword argument called username. 120 00:08:10.210 --> 00:08:14.440 So that debugger might help us to figure out that, Oh, actually, 121 00:08:14.770 --> 00:08:16.360 I've named this wrong. 122 00:08:17.110 --> 00:08:21.340 Now this is an issue with the path here. But alternatively, 123 00:08:21.370 --> 00:08:25.420 I could have made an error in my code as well. For example, 124 00:08:25.420 --> 00:08:29.020 let's say that we want to take the name that's being passed in him. 125 00:08:29.020 --> 00:08:33.220 We decided that we were going to add 12, two, it for some reason or other. Now, 126 00:08:33.220 --> 00:08:38.020 if I hit save so that my server reloads and I tried to refresh this website, 127 00:08:38.440 --> 00:08:43.060 you can see again, I've got a type II error. And this time though, 128 00:08:43.060 --> 00:08:46.330 it's telling me that I can only concatenate string, 129 00:08:46.360 --> 00:08:50.500 not an integer to a string. And if we go through these files, 130 00:08:50.530 --> 00:08:55.000 you can see one of these lines, the first to a file that we wrote, hello, dot. 131 00:08:55.860 --> 00:08:59.370 And it tells us that online 18 in the greet function, 132 00:08:59.760 --> 00:09:03.210 this is the line. That's tripping it up. Now, 133 00:09:03.210 --> 00:09:07.290 one of the things I can do at this point is I can actually open up the flask, 134 00:09:07.290 --> 00:09:11.070 a debugger. And I do that by clicking on this button right here. 135 00:09:11.880 --> 00:09:15.570 And what this is going to ask is for that pin that I showed you earlier on, 136 00:09:15.780 --> 00:09:17.760 which is in our console. 137 00:09:18.420 --> 00:09:21.510 This means that if somebody else is accessing your website, 138 00:09:21.660 --> 00:09:24.780 live on the internet and you happen to have it in debug mode, 139 00:09:25.050 --> 00:09:27.270 they can't just go and mess around with your code. 140 00:09:27.930 --> 00:09:32.930 Let's go and scroll to the bottom and copy our debugging code and then paste it 141 00:09:33.690 --> 00:09:38.190 in here as the pin, and then confirm to gain access to the debugger. 142 00:09:38.850 --> 00:09:39.240 Now, 143 00:09:39.240 --> 00:09:44.240 what it's done is basically its open up a console that is live on this line. 144 00:09:45.660 --> 00:09:48.870 So now what I can do is I can print out for example, 145 00:09:48.870 --> 00:09:52.590 the variables that it could access on that line, for example, name, 146 00:09:52.950 --> 00:09:57.360 and it tells me that name is Angela. I can start diagnosing, well, 147 00:09:57.600 --> 00:10:00.960 why is this wrong? So if I wanted you to add name to 12, 148 00:10:01.380 --> 00:10:03.030 well I can narrow it down. 149 00:10:03.120 --> 00:10:07.800 And it shows me that you can only add a string to a string or an integer to an 150 00:10:07.800 --> 00:10:09.900 integer. You can't mix up the types. 151 00:10:10.350 --> 00:10:15.350 So that might make me realize that actually I need to change this also to a 152 00:10:15.750 --> 00:10:19.260 strength. Now, 153 00:10:19.260 --> 00:10:21.060 if I go ahead and refresh, 154 00:10:21.150 --> 00:10:25.290 you can see there's no problems there and I've managed to fix the problem with 155 00:10:25.290 --> 00:10:27.450 the help of the flask debugger. 156 00:10:29.160 --> 00:10:31.800 Now just a few more things on this URL. 157 00:10:32.400 --> 00:10:36.960 One of the things that we could do is we could add some texts to the path 158 00:10:36.990 --> 00:10:41.880 before. So you remember that I said username slash name. So that works. 159 00:10:42.180 --> 00:10:44.400 We can also add paths afterwards. 160 00:10:44.640 --> 00:10:48.120 So it could be one or two, whatever it may be. 161 00:10:48.480 --> 00:10:53.480 And we can now access this route by going to our URL and then going to the first 162 00:10:54.030 --> 00:10:56.010 part, which was username. 163 00:10:56.580 --> 00:10:59.370 And then it was the variable that we could put in. 164 00:10:59.640 --> 00:11:03.180 And then finally we can add even more to the path afterwards. 165 00:11:03.450 --> 00:11:06.720 So we're in our case, the path is one. So now if I hit enter, 166 00:11:06.750 --> 00:11:08.730 you can see it still goes to the same page, 167 00:11:08.970 --> 00:11:13.970 but it's only this middle pot that's being taken as the value to this name 168 00:11:14.520 --> 00:11:17.820 variable. Now, 169 00:11:17.820 --> 00:11:20.580 if we go back to the flask Quickstart, 170 00:11:20.910 --> 00:11:25.200 you can see that the final thing you mentioned is there is something called a 171 00:11:25.230 --> 00:11:27.720 converter on the converter, 172 00:11:27.750 --> 00:11:32.750 basically converts the URL into any data type that you specify by default, 173 00:11:33.930 --> 00:11:37.380 it converts that variable value into a string, 174 00:11:37.860 --> 00:11:42.660 which means it's going to accept any text without a slash. Now, 175 00:11:42.690 --> 00:11:46.440 if you want to keep the slash, because if you are using a path, 176 00:11:46.470 --> 00:11:49.500 then that might be quite important. So for example, 177 00:11:49.500 --> 00:11:54.130 you wanted to get this entire part as your variable slash Juan. 178 00:11:54.580 --> 00:11:59.170 Well then in that case, instead of using this, you would have to specify, well, 179 00:11:59.170 --> 00:12:03.460 the data type is going to be a path and then I'm gonna save that as the name. 180 00:12:03.970 --> 00:12:07.300 So now if I hit save and I use this same URL, 181 00:12:07.330 --> 00:12:12.330 you can see the rest of that path is now being rendered in my variable and it's 182 00:12:12.910 --> 00:12:16.420 being pulled in for whatever it is that I may need it for. 183 00:12:18.280 --> 00:12:22.840 Now, alternatively, you can also have more than one variable, of course. 184 00:12:23.200 --> 00:12:27.250 So maybe this first part, I'm going to keep it as a name, 185 00:12:27.280 --> 00:12:30.910 which is a string. And then the second part, I want a number. 186 00:12:30.910 --> 00:12:35.530 So maybe I'll keep it as the datatype integer and I'll give the variable a name, 187 00:12:35.560 --> 00:12:36.580 a code number. 188 00:12:37.120 --> 00:12:42.120 So now I can tap into the name and then I can also tap into a number like, 189 00:12:45.220 --> 00:12:47.920 so now coming back here, 190 00:12:47.950 --> 00:12:51.160 if I change this URL with a bit and I hit enter, 191 00:12:51.460 --> 00:12:54.280 you can see it's taken this and placed it here. 192 00:12:54.520 --> 00:12:56.590 It's taken this and placed it here. 193 00:12:57.670 --> 00:13:02.670 So that's a quick little bit on how we can extract the parts that we want from a 194 00:13:02.920 --> 00:13:07.920 URL by using these variable paths in the next lesson, 195 00:13:08.320 --> 00:13:13.030 we're going to see how we can control the HTML that gets rendered instead of 196 00:13:13.030 --> 00:13:15.820 just letting flask render what is the default. 197 00:13:16.510 --> 00:13:19.510 So for all of that and more, I'll see you on the next lesson.