NOTE This file was generated by Descript 1 00:00:00,096 --> 00:00:01,687 Hi guys, and welcome back. 2 00:00:01,747 --> 00:00:06,187 Now that we've got the form data in our Flask app, we're going to learn how to 3 00:00:06,187 --> 00:00:08,617 display the past entries on our website. 4 00:00:08,887 --> 00:00:12,457 In order to do that, we'll need to store the entries somewhere and then put 5 00:00:12,457 --> 00:00:14,737 them back out on the Jinja2 template. 6 00:00:14,857 --> 00:00:15,997 So let's get started. 7 00:00:16,801 --> 00:00:20,401 We'll begin by creating the entries list. 8 00:00:20,520 --> 00:00:24,301 And this is going to be a temporary place for us to save our entries. 9 00:00:24,570 --> 00:00:28,440 Whenever entry data comes in through our form, we're going to append 10 00:00:28,561 --> 00:00:30,180 something to the entries list. 11 00:00:30,570 --> 00:00:33,601 Later on in this section, we'll learn how to replace the entries 12 00:00:33,601 --> 00:00:35,851 list with a MongoDB database. 13 00:00:36,301 --> 00:00:38,791 The reason we're using a list is just because it's a little bit easier to 14 00:00:38,791 --> 00:00:41,911 get started with and make sure our app works and does what we want. 15 00:00:42,271 --> 00:00:45,391 Before we transition over to the more powerful and slightly 16 00:00:45,391 --> 00:00:47,641 more complicated full database. 17 00:00:48,139 --> 00:00:50,389 So, how do we add something to the entries list? 18 00:00:50,419 --> 00:00:55,009 The first thing we have to decide is what data storage or structure we're 19 00:00:55,009 --> 00:00:57,109 going to put into the entries list. 20 00:00:57,529 --> 00:01:02,089 And I think that because we've got a rather simple piece of data, entry content 21 00:01:02,239 --> 00:01:04,672 and date, we can just store tuples. 22 00:01:04,881 --> 00:01:09,442 What we'll do is for every form that we receive, we're going to add a 23 00:01:09,442 --> 00:01:13,161 new tuple to the entries list that contains the content and the date. 24 00:01:13,461 --> 00:01:17,921 So we'll do entries.append, and we'll put in a tuple. 25 00:01:18,191 --> 00:01:18,791 Just like that. 26 00:01:18,791 --> 00:01:20,741 So this tuple here that we're creating. 27 00:01:20,981 --> 00:01:23,111 We're going to put into the entries list. 28 00:01:23,633 --> 00:01:25,913 Remember that because this is a Python list. 29 00:01:25,913 --> 00:01:29,693 Every time that we restart the app, we're going to lose everything in the list. 30 00:01:29,933 --> 00:01:32,573 Later on when we use MongoDB that won't be a problem. 31 00:01:33,082 --> 00:01:35,482 How do we use the entries in our template? 32 00:01:35,572 --> 00:01:37,672 Well, we know that we have to pass them in. 33 00:01:37,942 --> 00:01:41,632 So it will say entries equal entries, for example, and that's going to create 34 00:01:41,632 --> 00:01:46,922 an entries variable in the template that will contain the list of tuples. 35 00:01:47,445 --> 00:01:51,345 Now we have to go into our template and make use of that list. 36 00:01:51,849 --> 00:01:53,769 Let's go over to home.html. 37 00:01:54,149 --> 00:01:58,139 And here in recent posts, we've got this sample entry. 38 00:01:58,549 --> 00:02:04,489 What we can do is we can put a for loop for entry in entries around the article. 39 00:02:05,714 --> 00:02:10,004 And that is going to create one of these articles for every entry. 40 00:02:10,514 --> 00:02:15,254 Of course, we do want the article contents to match what is in the entry. 41 00:02:15,254 --> 00:02:20,300 So for this paragraph here, the entry content, I'm just going to put entry zero. 42 00:02:20,780 --> 00:02:25,490 Remember that entry is a tuple where the first element is the entry content 43 00:02:25,700 --> 00:02:27,410 and the second element is the date. 44 00:02:27,560 --> 00:02:30,140 So entry zero is going to give us the entry content. 45 00:02:30,637 --> 00:02:35,827 Here, I'm going to instead of October 24th for now, I'm just going to do entry one. 46 00:02:35,987 --> 00:02:39,757 Notice that the title is no longer something that is going to make a 47 00:02:39,757 --> 00:02:44,077 lot of sense for our application because we're not getting a title. 48 00:02:44,517 --> 00:02:48,177 Instead what we can do is we can just put in here the first few 49 00:02:48,177 --> 00:02:49,797 characters of the entry content. 50 00:02:50,302 --> 00:02:53,242 So what we do is we will put entry zero. 51 00:02:53,812 --> 00:02:57,202 And then we're gonna use something that I'll talk at length more about later on. 52 00:02:57,262 --> 00:02:59,242 But it's called a Jinja filter. 53 00:02:59,752 --> 00:03:04,852 Basically we use this pipe and then we can write a function that will apply to 54 00:03:04,852 --> 00:03:07,432 this value before it is interpolated. 55 00:03:07,702 --> 00:03:10,462 And what we're going to do is we're going to truncate and we're going 56 00:03:10,462 --> 00:03:12,892 to truncate after 30 characters. 57 00:03:13,088 --> 00:03:16,688 So this is going to run the truncate filter on the entry contents. 58 00:03:16,688 --> 00:03:20,228 And what that does is it shows up to 30 characters. 59 00:03:20,408 --> 00:03:23,888 And the true here means that it will show an ellipsis, three 60 00:03:23,888 --> 00:03:28,628 dot, after the text that remains if the original text is longer. 61 00:03:29,162 --> 00:03:31,112 Now let's run this and see what happens. 62 00:03:31,112 --> 00:03:32,552 So I'll run the app. 63 00:03:32,642 --> 00:03:33,932 I'm going to refresh the page. 64 00:03:35,112 --> 00:03:35,322 Nope. 65 00:03:35,382 --> 00:03:36,852 I'm going to actually type it here. 66 00:03:36,942 --> 00:03:40,902 You can see that we now get no recent posts because we don't have anything in 67 00:03:40,902 --> 00:03:43,992 our list, but let's add Hello, world! 68 00:03:43,992 --> 00:03:44,622 In here. 69 00:03:45,145 --> 00:03:48,715 Now you can see that as soon as we submit the form, the data is sent 70 00:03:48,715 --> 00:03:50,515 to the same page as we are in. 71 00:03:50,815 --> 00:03:57,655 But then this adds things to the entries list and then we re-render the template. 72 00:03:58,645 --> 00:04:01,765 So, what we end up with is this shown here. 73 00:04:01,915 --> 00:04:05,305 This is not in the right format that we agreed earlier on as per the design, 74 00:04:05,605 --> 00:04:08,665 but you can see that at least we've got a title and the content in there. 75 00:04:09,177 --> 00:04:10,587 We can actually use this already. 76 00:04:10,647 --> 00:04:14,748 But the only problem is of course, that we are going to lose any entry contents 77 00:04:14,748 --> 00:04:16,728 that we add as soon as we stop the app. 78 00:04:16,938 --> 00:04:17,748 So I'll do that now. 79 00:04:17,778 --> 00:04:20,388 I stop the app and press enter in here again. 80 00:04:20,671 --> 00:04:22,531 So you can see after restarting the app. 81 00:04:22,741 --> 00:04:24,361 We do lose everything. 82 00:04:24,660 --> 00:04:28,290 For this, we need a more permanent database such as MongoDB, that we're 83 00:04:28,290 --> 00:04:30,000 going to work on in just a moment. 84 00:04:30,581 --> 00:04:31,991 Thank you guys for joining me in this video. 85 00:04:32,021 --> 00:04:33,221 I hope you've enjoyed it. 86 00:04:33,491 --> 00:04:34,811 See you in the next one.