1 00:00:05,980 --> 00:00:12,470 Welcome back everyone in this lecture room is to talk about how the flask website works but we're going 2 00:00:12,470 --> 00:00:17,670 to do is go over in general Huff Lusk Web sites operate specifically the types of sites that are going 3 00:00:17,670 --> 00:00:23,360 to be building in this course and what I want to show you is a connection to each major idea in a flask 4 00:00:23,360 --> 00:00:27,530 web application to a section or topic in this horse. 5 00:00:27,560 --> 00:00:34,160 So as we go along with the actual functions of a main flask web application I'm going to connect it 6 00:00:34,160 --> 00:00:37,490 to certain libraries that will be discussing throughout the course. 7 00:00:37,490 --> 00:00:43,310 The main idea here is as you go along through the course if you arrive at a section you already understand 8 00:00:43,310 --> 00:00:48,910 the context of why you're learning about that particular topic to create a flask web application. 9 00:00:49,010 --> 00:00:50,210 So let's get started. 10 00:00:51,260 --> 00:00:56,270 Let's imagine you're going to visit a Web site and this Web site happens to be written in flask. 11 00:00:56,540 --> 00:00:57,790 You're at your computer. 12 00:00:57,800 --> 00:01:02,510 You open up your browser and then the first thing you're going to see is the front end of the Web site 13 00:01:02,900 --> 00:01:04,550 rendered in the browser. 14 00:01:04,550 --> 00:01:07,540 Now there's a few fundamental front end technologies. 15 00:01:07,610 --> 00:01:11,930 And those are H.T. mail which is actually going to display the page elements. 16 00:01:11,930 --> 00:01:16,570 So for example that could be something like the actual text on the Web site. 17 00:01:17,010 --> 00:01:19,790 Then CSSA will style the elements. 18 00:01:19,850 --> 00:01:23,930 So maybe change the fonts that text or color the text. 19 00:01:24,140 --> 00:01:29,810 Then the site may also use Bootstrap which is going to provide automatic styling and components through 20 00:01:29,810 --> 00:01:33,610 the use of C Ss and some javascript and Jake Query calls. 21 00:01:33,620 --> 00:01:39,620 So again HTL that's actually the splaying those page elements CSSA for styling and then bootstrap to 22 00:01:39,620 --> 00:01:41,330 provide some automatic styling. 23 00:01:41,360 --> 00:01:47,270 And we have a crash course in these three main topics h TMLC SS and bootstrap for the kind of actual 24 00:01:47,270 --> 00:01:48,650 web sites we're creating here. 25 00:01:48,680 --> 00:01:52,100 We don't really need to dive in that deeply into javascript or Adjaye query. 26 00:01:52,160 --> 00:01:57,320 Instead we're going to do that in conjunction with bootstrap So we're going to have crash courses in 27 00:01:57,320 --> 00:02:00,490 these front end technologies. 28 00:02:00,530 --> 00:02:04,020 So after that you're going to want to add some sort of level of interactivity. 29 00:02:04,040 --> 00:02:06,830 Technically right now you're just going to have a static site. 30 00:02:06,850 --> 00:02:13,010 If you only have the front end technologies now interactivity What do I mean by that. 31 00:02:13,090 --> 00:02:18,490 Well every major Web site performs some sort of variation of these main operations. 32 00:02:18,580 --> 00:02:25,450 Most web sites are going to be able to one except information from a user to retrieve information from 33 00:02:25,450 --> 00:02:26,630 a database. 34 00:02:26,880 --> 00:02:33,610 Three create update or delete information in that database and then for display information back to 35 00:02:33,610 --> 00:02:39,190 the user that's relevant to them based off of step 1 what they requested or what information they provided. 36 00:02:41,200 --> 00:02:45,700 Now in order to perform that sort of level of interactivity being able to connect a request from the 37 00:02:45,700 --> 00:02:50,320 front end user to some sort of database we're going to need a web framework. 38 00:02:50,350 --> 00:02:57,340 So the idea of a web framework just in general is to accept user information from the Web site use it 39 00:02:57,420 --> 00:03:02,200 may be connected to a backend database and then report back something relevant that could be stored 40 00:03:02,200 --> 00:03:05,200 in the database back to the front and the user can see it. 41 00:03:06,430 --> 00:03:12,910 So flask is a framework of choice and that's going to allow us to use and connect Python code to the 42 00:03:12,910 --> 00:03:18,520 web and flask is a great choice for a web framework because it's super simple to use if you have a very 43 00:03:18,520 --> 00:03:19,560 simple web site. 44 00:03:19,570 --> 00:03:24,600 It just takes a few lines of code to get your website up and running a flask and then because of this 45 00:03:24,600 --> 00:03:30,010 simplicity flat's sometimes has a reputation for being too simple or not scalable but it's actually 46 00:03:30,010 --> 00:03:30,530 not true. 47 00:03:30,550 --> 00:03:35,530 There's tons of third party libraries for flasks that allow you to easily add some way more advanced 48 00:03:35,530 --> 00:03:39,220 functionality flask and be able to scale flask. 49 00:03:39,250 --> 00:03:43,190 So often people ask when should I use flask or when should I use Shingo. 50 00:03:43,420 --> 00:03:48,160 And really at a certain point it's going to be up to a personal choice because there's more than enough 51 00:03:48,340 --> 00:03:53,590 third party libraries that are open source that can make flask do everything that Django can. 52 00:03:53,650 --> 00:03:58,600 So just keep that in mind and we'll talk about the differences between flask and jingo later on in more 53 00:03:58,600 --> 00:04:03,880 detail but we have flasks as our choice for web frameworks because it's so simple to use and it's really 54 00:04:03,880 --> 00:04:11,270 awesome for beginners so we'll be using flask in Python to connect HTL templates and then retrieve it 55 00:04:11,370 --> 00:04:12,940 or return information. 56 00:04:14,740 --> 00:04:20,980 So let's talk about that first step that most major Web sites do and that's accepting user information. 57 00:04:20,980 --> 00:04:27,610 This can be as simple as just collecting a form of information for a survey or accepting something like 58 00:04:27,610 --> 00:04:29,740 an email or password combination. 59 00:04:29,800 --> 00:04:32,080 Or maybe your query into google search. 60 00:04:32,080 --> 00:04:38,440 Those are all the instance of a user filling out an information inside of a form and then the Web site 61 00:04:38,440 --> 00:04:40,120 retrieves that information. 62 00:04:40,120 --> 00:04:45,530 So in our case in order to create these forms we're going to use a library called W.T. forms. 63 00:04:45,550 --> 00:04:48,400 That works really well with flask in the crash course. 64 00:04:48,400 --> 00:04:53,890 We first learn about HMO forms and then later on the course will know how to actually create those automatically 65 00:04:54,190 --> 00:04:54,820 with flasks. 66 00:04:54,820 --> 00:04:57,300 So we're going to learn two ways of doing these forms. 67 00:04:59,070 --> 00:05:03,410 The next step is actually communicate a database and retreat information. 68 00:05:03,420 --> 00:05:07,520 So in our case we're going to be using sequel like as our database of choice. 69 00:05:07,590 --> 00:05:12,120 It's a very popular database already comes of Python meaning there's no additional installs. 70 00:05:12,120 --> 00:05:16,240 You don't have to have any headaches over getting a database ready and working. 71 00:05:16,320 --> 00:05:21,770 And again despite its name and reputation sequel I can actually scale to quite a large web site and 72 00:05:21,780 --> 00:05:26,520 if you're in this course dangerously about flask and Python then it's highly probable that it's going 73 00:05:26,520 --> 00:05:27,890 to serve all your needs. 74 00:05:28,080 --> 00:05:29,730 So it should work fine for us. 75 00:05:29,760 --> 00:05:34,170 And in addition to this we're going to learn about libraries such as sequel alchemy which allows us 76 00:05:34,170 --> 00:05:36,870 to write Python code instead of the Rex sequel statements. 77 00:05:36,870 --> 00:05:41,640 And we'll also learn about flask migrate which allows us to automatically update any changes to our 78 00:05:41,640 --> 00:05:42,200 database. 79 00:05:42,210 --> 00:05:50,450 Again all through python now a big part of working the database is called crud and that stands for create 80 00:05:50,630 --> 00:05:52,160 read update and delete. 81 00:05:52,400 --> 00:05:57,080 So if any database we're going to want the ability to create a new row read a row that already exists 82 00:05:57,440 --> 00:06:03,860 up the row that already exists or delete a row or information entirely from our database if necessary. 83 00:06:03,860 --> 00:06:09,710 And already here we can get this idea that flask is serving as sort of a middleman between the front 84 00:06:09,710 --> 00:06:14,400 and then what the user sees and the back end and the information that's stored. 85 00:06:14,420 --> 00:06:19,490 So once we actually connect these two in some sort of capacity we're probably going to want to return 86 00:06:19,520 --> 00:06:23,500 or display information back to the user. 87 00:06:23,520 --> 00:06:27,990 So in order to do that we're going to use something called Jinja templates which actually grab information 88 00:06:28,260 --> 00:06:32,240 from Python and flask and send that information back as HVM L. 89 00:06:32,430 --> 00:06:33,930 So that's the actual method. 90 00:06:33,950 --> 00:06:41,340 Syntax wise there we're going to be using as the glue between flasks and the front and so this is a 91 00:06:41,340 --> 00:06:42,870 super high level overview. 92 00:06:42,870 --> 00:06:46,290 There's lots more possibilities that we're going to talk about in this course that we haven't discussed 93 00:06:46,290 --> 00:06:46,890 here. 94 00:06:46,890 --> 00:06:52,610 Things like accepting payments rest a pis user authentication and log in and so much more. 95 00:06:52,710 --> 00:06:55,670 But this is the level I want you to be aware of. 96 00:06:55,740 --> 00:06:59,970 That way when you start learning about these different sections such as the forms or template sections 97 00:07:00,210 --> 00:07:05,160 or database sections of flask you already understand the context that we're talking about as far as 98 00:07:05,160 --> 00:07:08,190 how flask Web sites work. 99 00:07:08,240 --> 00:07:10,330 OK so a very quick overview. 100 00:07:10,360 --> 00:07:15,060 The front end that's rendered in the browser that's going to H.M.S. SS and bootstrap. 101 00:07:15,190 --> 00:07:18,120 Those are the three main crash courses for the front end that we cover. 102 00:07:18,280 --> 00:07:22,300 There's also things like javascript and Jey query and there's lot of other javascript libraries that 103 00:07:22,330 --> 00:07:24,560 also work in the front and before our use cases. 104 00:07:24,670 --> 00:07:25,810 We're not going to need any of that. 105 00:07:25,810 --> 00:07:29,920 We're still going to be able to create lots of really awesome web sites without those more advanced 106 00:07:29,920 --> 00:07:34,890 javascript functionality and a lot of the functionality that we need is already integrated into bootstrap 107 00:07:34,900 --> 00:07:41,710 for and then Python is going to be the coding language that allows us to use the flask with Framework 108 00:07:42,200 --> 00:07:42,750 flask. 109 00:07:42,760 --> 00:07:47,950 It's going to render HTL templates then we can edit them with Jinja and communicate a database through 110 00:07:47,950 --> 00:07:53,320 the use of libraries such as sequel alchemy and in particular we're going to be using flask sequel alchemy 111 00:07:53,620 --> 00:07:57,490 which is specialized for flashbulb framework. 112 00:07:57,500 --> 00:07:59,710 Now don't worry about memorizing all these terms. 113 00:07:59,720 --> 00:08:04,400 This is just a high level overview to put the course topics in context and we're going to be building 114 00:08:04,400 --> 00:08:09,620 up very slowly starting from the front end and working on all the way back and then creating larger 115 00:08:09,620 --> 00:08:12,930 applications such as a social network project. 116 00:08:12,950 --> 00:08:18,410 Then once we understand how to connect the front and the back end fully with flask will slowly introduce 117 00:08:18,410 --> 00:08:24,530 other topics such as user registration authentication API payment systems and more. 118 00:08:24,530 --> 00:08:26,770 So don't worry again about memorizing all of this. 119 00:08:26,780 --> 00:08:29,070 This is just a general high level overview. 120 00:08:29,180 --> 00:08:33,030 If you have any questions feel free to post and to the Q&A forums and we can answer them. 121 00:08:33,140 --> 00:08:37,130 But keep in mind a lot of questions are probably going to be answered as you go through the course. 122 00:08:37,190 --> 00:08:41,120 So maybe just jot them down or keep them in the back of your mind because as we learn and dive into 123 00:08:41,120 --> 00:08:45,320 a lot more detail about each of these topics we're going to clarify things a lot more. 124 00:08:45,380 --> 00:08:50,420 But first before all of this we've got to get a handle on the basics so in case you need them let's 125 00:08:50,420 --> 00:08:55,190 get started with a crash course on the front end technologies like HTL see SS and bootstrap. 126 00:08:55,250 --> 00:08:58,550 I'm super excited to finally start typing and getting the code. 127 00:08:58,550 --> 00:08:59,420 Let's get started.