1 00:00:00,030 --> 00:00:05,940 Hey hi again and here I am in a brand new folder so an empty folder and if you 2 00:00:05,940 --> 00:00:09,570 remember and you should remember when we built a website with Flask, 3 00:00:09,570 --> 00:00:13,410 you should remember how a Flask directory is structured, so we have this 4 00:00:13,410 --> 00:00:20,580 templates folder where the HTML files will go and we have a static folder 5 00:00:20,580 --> 00:00:25,890 as well where we put the CSS files or JavaScript files if we have and then our 6 00:00:25,890 --> 00:00:31,740 Python file would go like straight here in this main folder I said first I'll 7 00:00:31,740 --> 00:00:37,110 Bill the front-end so I'll create HTML files first without creating any 8 00:00:37,110 --> 00:00:41,730 Python file. And you know that we use atom for web 9 00:00:41,730 --> 00:00:48,090 applications so inside the templates folder of create a file and let's call 10 00:00:48,090 --> 00:00:56,730 this index dot HTML and also a file in static let's say main dot CSS, so the CSS 11 00:00:56,730 --> 00:01:02,460 file and index dot HTML file. In this lecture and we will build the HTML part 12 00:01:02,460 --> 00:01:08,070 so those input fields that you saw in the previous lectures. When someone 13 00:01:08,070 --> 00:01:13,799 visits your website, your URL and there is a file named index.html in the main 14 00:01:13,799 --> 00:01:20,159 directory of your web server, that file will be open as the home page so just to 15 00:01:20,159 --> 00:01:27,360 be clear. Now let's go ahead and build this HTML script. This is a first thing 16 00:01:27,360 --> 00:01:38,549 you pass there always, so the document type HTML and then HTML tags and the closing 17 00:01:38,549 --> 00:01:45,979 tag so I assume you understand HTML. HTML is very easy. If you've never done that 18 00:01:45,979 --> 00:01:51,180 you can still follow me in this lecture by just typing with a type but it's good 19 00:01:51,180 --> 00:01:57,210 to go through a basic tutorial with HTML. HTML it's way easier than Python so that 20 00:01:57,210 --> 00:02:03,600 shouldn't be a problem for you to learn. And normally you pass here the language 21 00:02:03,600 --> 00:02:08,470 and English. And now everything goes between here so 22 00:02:08,470 --> 00:02:24,050 let's put a title which will show on a browser bar. Yep, and then you have the head 23 00:02:24,050 --> 00:02:32,840 or your HTML script. There you can put the links to your CSS files or 24 00:02:32,840 --> 00:02:38,960 JavaScript files, so that's what I'm gonna do now. So you need to use the 25 00:02:38,960 --> 00:02:48,230 link tag and then I can put here the relative path to my CSS file so that's 26 00:02:48,230 --> 00:02:54,110 how my HTML script will know where to look for CSS styling. And so we are here in 27 00:02:54,110 --> 00:03:01,400 index dot HTML so we need to go one level up so two dots and one slash. 28 00:03:01,400 --> 00:03:08,240 this means so we go one level up and then we enter the static folder and then 29 00:03:08,240 --> 00:03:13,760 access the main dot CSS file, yeah that should do it. 30 00:03:13,760 --> 00:03:21,530 You need to declare that you're working with a style sheet and at the moment we 31 00:03:21,530 --> 00:03:28,220 have an empty CSS file so that will not take an effect for now. Our HTML page will be 32 00:03:28,220 --> 00:03:35,420 a plain HTML without colors and anything. Here we are done with the meta part. 33 00:03:35,420 --> 00:03:41,480 So now we start rewriting the part where we will display the content and the part 34 00:03:41,480 --> 00:03:48,140 that displays the content it goes inside the body tags like that and now 35 00:03:48,140 --> 00:03:53,900 everything goes inside these tags. We now start thinking from up to the bottom of 36 00:03:53,900 --> 00:04:00,290 our page so the first thing we had there was this title that says collecting 37 00:04:00,290 --> 00:04:02,840 heights. You can write anything but and we 38 00:04:02,840 --> 00:04:08,600 could create that with an h1 tag so a big fold heading but before I do that I 39 00:04:08,600 --> 00:04:17,229 would like to use a division, so a division is to organize your HTML 40 00:04:17,229 --> 00:04:22,880 elements better and this also allows you for better referencing form your 41 00:04:22,880 --> 00:04:32,380 CSS script. So the division will wrap up the entire container, the entire page. 42 00:04:32,380 --> 00:04:38,740 I'll put that name container so with that name I'll refer from the CSS class. 43 00:04:38,740 --> 00:04:49,780 Then everything goes inside this division so h1 h1 collecting heights. 44 00:04:49,780 --> 00:05:01,070 And maybe another heading there with smaller fonts so h3. So we want to tell 45 00:05:01,070 --> 00:05:06,590 the user what to do with those input entries there so let's say please feel 46 00:05:06,590 --> 00:05:18,590 the entries to get on height. You can tweak this text wherever you like and 47 00:05:18,590 --> 00:05:22,130 also the data that you are expecting from user so maybe you don't want to 48 00:05:22,130 --> 00:05:29,000 collect highest but another attribute so feel free to do that. Yeah, this should be 49 00:05:29,000 --> 00:05:36,560 final if I try that. Show in explorer. Index. Yep. 50 00:05:36,560 --> 00:05:44,300 Seems to be working so let's go ahead now and add the form will those inputs 51 00:05:44,300 --> 00:05:56,810 entries and that is implemented using a form tag so like that. And now this form, this 52 00:05:56,810 --> 00:06:02,000 expects the user to enter some data and so you need to perform an action 53 00:06:02,000 --> 00:06:08,000 then after the user presses the bottom of this form so when the user presses 54 00:06:08,000 --> 00:06:17,810 the bottom of this form, what you want to do is you want to go to this URL which 55 00:06:17,810 --> 00:06:22,640 in this case is just a file that we'll be creating in the templates folder so 56 00:06:22,640 --> 00:06:30,870 here we'll have like a success, success dot HTML file, yeah. 57 00:06:30,870 --> 00:06:37,410 And basically what we'll have here is, let me copy these just for being quick 58 00:06:37,410 --> 00:06:48,260 and basically this we'll have, no these ones, but remove the form closing tag so 59 00:06:48,260 --> 00:06:54,949 we could have here some simple text thanking the user like "Thank you for 60 00:06:54,949 --> 00:07:03,990 your submission!" and maybe a brake line there so we go to the next 61 00:07:03,990 --> 00:07:15,780 line "You'll receive an email with the survey results shortly." And yeah, don't 62 00:07:15,780 --> 00:07:24,900 forget to close the p tag like that. And if I try this, yeah so it's a 63 00:07:24,900 --> 00:07:31,740 plain text for now but the CSS will stylize it later so don't worry. So this 64 00:07:31,740 --> 00:07:36,810 page will be open when the user presses that bottom so let's go ahead and create 65 00:07:36,810 --> 00:07:40,260 that button, but before we create that button we have to create the 66 00:07:40,260 --> 00:07:46,320 input forms and there's also something important to pass here so you want to 67 00:07:46,320 --> 00:07:54,450 pass the method which is post. So normally you have get methods 68 00:07:54,450 --> 00:08:01,740 when you just want to recall a file from the server say when you open a URL like 69 00:08:01,740 --> 00:08:07,050 you opened this index dot HTML URL and you get the HTML element so you see the page. 70 00:08:07,050 --> 00:08:10,680 This is a get request so you're just getting, but when you send data through the web 71 00:08:10,680 --> 00:08:15,870 servers like you're doing in this case we are sending the email and the 72 00:08:15,870 --> 00:08:23,039 height so this is a post request and you want to specify that here explicitly. Now 73 00:08:23,039 --> 00:08:30,080 to create those two input forms that we have there you need to use input tags 74 00:08:30,080 --> 00:08:37,500 like that and you don't have to write an opening tag and a closing tag, you 75 00:08:37,500 --> 00:08:41,339 can just go ahead and write everything here so the attributes of the input tag 76 00:08:41,339 --> 00:08:47,430 in here inside these brackets so that we have a title and the title is 77 00:08:47,430 --> 00:08:52,680 shown when the user holds the cursor in the input for a while 78 00:08:52,680 --> 00:09:01,260 and you want to say something like maybe your email will be safe with us and then 79 00:09:01,260 --> 00:09:05,430 you have something called the placeholder and that is the default text 80 00:09:05,430 --> 00:09:11,880 that the input shows, so let's say enter your email address and then you have 81 00:09:11,880 --> 00:09:19,350 another attribute called type. That should be email in our case, so type is 82 00:09:19,350 --> 00:09:24,780 important because if you put you could put text here but if you if you put 83 00:09:24,780 --> 00:09:29,940 email your input will be able to validate the email address of your user 84 00:09:29,940 --> 00:09:35,280 so it will say if the user has entered a format that doesn't look like an 85 00:09:35,280 --> 00:09:41,070 email he'll get some pop-up saying that you have to put something that looks 86 00:09:41,070 --> 00:09:47,520 like an email. And then you have name and this is we can put anything here email 87 00:09:47,520 --> 00:09:53,070 name let's say and this will be used by Python to pull off the email address 88 00:09:53,070 --> 00:09:57,660 that the user enters in the input so with Python you'll say something like 89 00:09:57,660 --> 00:10:04,230 give me the value of the input where name is email name is equal to this 90 00:10:04,230 --> 00:10:10,590 string. Basically that's it and you need to put this to make this a 91 00:10:10,590 --> 00:10:14,490 required field so the user cannot press submit 92 00:10:14,490 --> 00:10:19,200 if he hasn't entered this data. And this remains like that 93 00:10:19,200 --> 00:10:26,640 so basically that's it. If you want you want a break line so that in 94 00:10:26,640 --> 00:10:36,300 the next line you write the next input form and I've copied this one here and put 95 00:10:36,300 --> 00:10:47,220 it there. Now let's change this to "Your data will be safe with us". 96 00:10:47,220 --> 00:10:56,880 And this has to be "Enter your height in centimeters". Yeah, we need to change 97 00:10:56,880 --> 00:11:04,200 the type here and you can even put text there or you could put number putting 98 00:11:04,200 --> 00:11:09,780 text in there would require that you convert that string into an integer or 99 00:11:09,780 --> 00:11:15,090 a float in Python when you write the Python script, however that that's not 100 00:11:15,090 --> 00:11:21,870 the problem. The problem is if you input text you cannot apply some restrictions 101 00:11:21,870 --> 00:11:27,180 of the input that's the user will enter. So if the user wants to enter a thousand 102 00:11:27,180 --> 00:11:32,880 there with a text type here in the HTML you'll not be able to check for that, but 103 00:11:32,880 --> 00:11:40,860 if you put a number then you can apply some minimum attribute so you can say 104 00:11:40,860 --> 00:11:49,200 don't put anything below 50 centimeters and also don't put anything above let's 105 00:11:49,200 --> 00:11:55,650 say 300 centimeters, so that's three meters. You can tweak these values 106 00:11:55,650 --> 00:12:01,590 to wherever you want. And also if you want the user to also enter something 107 00:12:01,590 --> 00:12:09,480 like 170 centimeters point one you'd want to pass the step attribute there 108 00:12:09,480 --> 00:12:15,510 and specify how many decimal points you want to allow the user to enter so if you 109 00:12:15,510 --> 00:12:21,750 put for instance zero point one you'd only allow one decimal point. 110 00:12:21,750 --> 00:12:27,240 If you put zero point zero one that would be more decimal points. 111 00:12:27,240 --> 00:12:32,610 However I think it's enough accuracy to have centimeters for the height so I'll 112 00:12:32,610 --> 00:12:39,560 just remove this and just restrict the user to enter whole numbers. Good and 113 00:12:39,560 --> 00:12:53,010 then this would be height name. Yeah. Lastly we want to input the button and 114 00:12:53,010 --> 00:12:57,570 then we try out the form so to see what we have this far and that would be a 115 00:12:57,570 --> 00:13:01,520 button tag and the closing tag and between these 116 00:13:01,520 --> 00:13:08,570 two goes the tags that you want to display above the bottom, so submit and 117 00:13:08,570 --> 00:13:14,260 then you need to pass some attributes here so the type of the button will be 118 00:13:14,260 --> 00:13:20,450 submit so this defines the role that this button has over this form, so the 119 00:13:20,450 --> 00:13:25,730 button will submit the entries that the user will input in this input boxes. 120 00:13:25,730 --> 00:13:31,270 That's basically it. That's our form and let's see how this goes, so control R to 121 00:13:31,270 --> 00:13:40,580 reload it, and yeah we have the inputs there so don't worry if this box is smaller 122 00:13:40,580 --> 00:13:45,740 than this. This is an email type so this has to be bigger but then later 123 00:13:45,740 --> 00:13:52,640 we will make this the same with CSS and so let's try something let's fake email 124 00:13:52,640 --> 00:13:59,690 address so if you pass something like this you'd get something like please 125 00:13:59,690 --> 00:14:06,470 include an @ in the mail so let's put something that looks like an email and 126 00:14:06,470 --> 00:14:12,590 here you can put the range. If you put 40, you'll see that it's a so the value 127 00:14:12,590 --> 00:14:22,130 must be greater or equal than or 250 so let's put 200 there and submit. 128 00:14:22,130 --> 00:14:24,740 Yeah, it's working. So we were sent to the success dot 129 00:14:24,740 --> 00:14:31,640 HTML page because that's what we assigned to the action attribute here of the form 130 00:14:31,640 --> 00:14:37,760 tag. Good, this is working great. And yeah, basically that's it. This is about 131 00:14:37,760 --> 00:14:44,720 building the HTML part. Now in the next lecture we'll go ahead and do this CSS 132 00:14:44,720 --> 00:14:49,070 so that the index dot HTML and the success dot HTML page will look much 133 00:14:49,070 --> 00:14:52,000 better than they look now. So see you in the next lecture.