All right, well, good morning, good afternoon, good evening, depending on where it is in the world that you have to be joining us from. Good and tack, and Buena Sena. And I was trying to learn hello or good evening in Italian, but I think Buena Sena, I think, is right. And Susan is speaking in tongues. Yeah. It's a great way to start. In any event, thank you for joining our little jump start here. This is an introduction to creating websites using Python and Flask. This is a web Wednesday, which, by the way, I'd be remiss if I didn't go ahead and plug the next handful of web Wednesdays that are coming up. You'll notice them on the break slide. We've got a lot of cool stuff as your website. I'm going to be in here doing Angular and MVC with any framework. So a lot of really cool stuff. You'll see all that on the break slides. But what do you say we introduce ourselves and introduce the course and get rolling? Because we got a little bit to talk about today. Yeah, absolutely. Getting out and rolling. Yeah, why don't you talk about yourself? So my name is Susan Eibach. My Twitter handle is HockeyGeekGirl. And my job is I'm a technical evangelist at Microsoft. And what that means is I help developers understand how to get started with our different tools and technologies. A lot of stuff with Visual Studio these days. I am also a Microsoft Certified Trainer. And the first program I ever wrote was on a computer with 64K of memory. So I'm not going to admit to how long I've been coding, but that might give you a hint. Yes, yes. That's a little bit of a giveaway. Absolutely. I've worked with a lot of different programming languages. And I think one of the most important things to realize is as you play with all these different programming languages is that you learn one language as a starting point, and that can take you so many different places. The principles we're going to see today in Python, someday you're going to explore another programming language for web, and you're going to see similarities to what we see here today. Yeah, absolutely. Absolutely. In any event, I guess I should introduce myself. I think so. I am Christopher Harrison. I'm a content developer here at Microsoft, focused mostly on ASP.net, although that's now expanding into an ever-broadening range of web technologies. And Office 365, I was an MCT for 15 years. I guess I still am, but not a full-time MCT like I was. And I got started with a Commodore 64. And I actually wrote a blog post on this in a couple weeks ago, where I talked about the fact that the first main program that I punched in, it was from a copy of an old magazine called Byte. And it was a clone of a popular game. And instead of being able to just type out print, you had to put in the question mark, because otherwise you would run out of memory. So yeah, so quite a little while. And beyond that, you can find me out spending time with my wonderful wife, four-legged child, and running more miles than most people would consider normal, I think. Yeah, good on you. So you do the same, though. Yeah, yeah, absolutely. All right, well, let's go ahead and hit our agenda for the day. So what we're going to start with is actually an introduction to both Flask as well as HTML. So if you haven't played around with Flask, not exactly sure why we chose Flask, what this is all about, we're going to get into that in module one. And then we'll also discuss a little bit of HTML. I am going to say right away, though, that if you're trying to use this to learn HTML, this is really not the best spot, but we'll talk about some resources where you can go get that. Right, because Flask is what's going to allow one of the ways you can take Python onto the web. Exactly. So that's where the connection between the Python and Flask comes in. Exactly, exactly. Yeah, and there's actually other alternatives that you could use as well. There's Bottle, there's Django. We went with Flask. We'll actually talk about why we went with Flask in a couple of minutes. And then from there, we'll go ahead and actually take a look at getting in and creating web pages. And that's going to be our terminology warning section, because that's really where we're going to get into how those requests are going to be mapped and how we're going to control what code is going to get executed behind the scenes. And then all of that is really kind of the appetizer to the main event, the first of two main events, which is going to be module three, where we'll actually build the structure of our little trivia app that we're going to be using for our demos. And that's going to be the front end. So that's going to be the ability to ask the questions and answer them later on, add questions and answer them later on. But what we're going to see is we're going to want somewhere to actually store those. And that will roll us right on into modules four and five, five being the second main event. Right. Where I'm going to go into the back end of things. Because one of the things we're going to see is we get into the websites, is the fact that when you're building web applications, you have to think about what is the user seeing and how do we communicate with the user, as well as when they give us information, how do we store that information, how do we retrieve information on a server side. So I'm going to be talking about the redis aspect and different ways that you can store data so that you can remember what's happening between calls. Absolutely. And then finally, last but not least, we'll have done all this work here locally. Wouldn't it be nice to share this with all of our wonderful viewers and our friends? Well, exactly. Because by default, if I sit here on my computer building a website and I'm running my website and testing my website, it's only available on my machine. You know, I noticed a common phrase throughout all of it. You kept saying website, website, website. I'm thinking we should probably get that onto the, wait, wait, it'll come to me. Oh, we should get that onto the web. Aha, yes. Yay. So exactly. So one of the, so of course we're going to finish off with saying, hey, now that we've built something cool, how do we share that and put it out there onto the great world of the internet, onto the web so others can see it? Absolutely. And that's where we'll close everything off, is actually putting that out there and you'll actually be able to see all of our work. And if you've been following along at home, you'll even actually be able to get in and deploy that out as well. Fantastic. Now that we've talked a little bit about us and what we're going to talk about, let's talk about you. And let's kind of set where it is that we're aiming this. And what we're looking for is really new Python developers that are looking to take that next step. So if you checked out our Introduction to Programming with Python, which is a two-day event, lots of great content, and you may even get a toaster. That's right. You'll have to check that out to find that out. But if you follow along with that, this is really designed to be the next step from there. And then also, burgeoning web developers. So if you're just kind of trying to check things out. But I would also mention that if you've done web forms, if you've done MVC, and you're really just trying to see how things are in other environments. Yeah, because you do hear a lot about Python these days. Yeah. Yeah, maybe you've been developing in .NET for web and you're curious to just explore Python web development. This will be a reasonable course to take you down that path as well. You may be familiar with some of the concepts, because as we mentioned earlier, concepts tend to be the same from language to language. But we will show you things like the routing and so on for Flask and Python and that sort of architecture. Absolutely. And I would say kind of going back to a point that you had made earlier about programming languages having a lot of similar concepts, is that if you've already done C Sharp or VB, a lot of what we're going to be seeing in Python is going to be relatively similar to what you've seen before. And so you'd probably be able to still follow along just fine even if you haven't necessarily done Python. So if you've done another programming language, you can definitely check that out or check this out.   I do need to update that because it's actually now 2.5 million registered users. Fantastic. Yeah, absolutely. So there's your little voucher code. And I would also mention that it's on the FAQ page as well, which is where you're also going to find our slides. Now, before we launch into module one, I do need to mention one last thing. And this is actually brand new. This is the first live MVA jumpstart that's going to have closed captioning. Right now, it's closed captioning for English. But we do have closed captioning that you should notice on the video stream. And I'm not sure which side of the stream I'm on. I'm seeing comments about the closed caption. So it looks like it's coming up. There's a button like right about there somewhere. I think it's either on this side or it's on that side. I don't know which side of the stream I actually end up on. We don't see the closed captioning. Yeah, we don't see us. But in any event, you will notice there's a little spot right down there that will say captions, and then you can turn that on or turn that off and actually see live closed captioning. But again, this is the first MVA jumpstart doing that, which I think is pretty slick. Yeah, that's awesome. Okay, let me see if we talk about Flask. Yeah, I think that's enough intro. Let's get into the, let's get into the meat of this. Yeah, absolutely. So let's go ahead and introduce Flask. He said in English. So what we want to start off with is really just kind of some level setting here. So what is a web application? You know, kind of start there. And then what is Flask? Why did we go with Flask? And how do we actually get in, get started and do that as we've learned before, that Hello World application? Yes. And then we're gonna close it all off with a primer on HTML. And the main goal with the HTML primer is just to make sure that if you follow along with course one, and maybe you haven't done HTML, that you're now gonna see enough to know what's coming with HTML and how HTML works. Cool, oh wow. Actually, I've just been updated that the closed captions are available in 12 languages. Wow. The live ones? Wow, I thought they were just English. That's what I was just talking about. Fantastic. That is extremely cool. Wow, that's awesome. Cool, all righty. So with that. Hi, now I'm here with Curious, how they translated my Hello Good Evening in Italian got translated. Yeah, yeah. Maybe they translated that back to English. Maybe they did. Okay, at any event, yes, you can expect corny jokes throughout the day. Let's go ahead and talk about what a web application is. And so I pulled this from Wikipedia because of course when you're trying to figure something out, where do you go? You go ask the internet. Yeah, and that will invariably lead you to Wikipedia. So it's a web application, or I'm sorry, a web application or a web app. Is any software that runs in a web browser? It is created in a browser supported programming language such as the combination of JavaScript, HTML, and CSS and relies on a web browser to render the application. That clarifies everything, I think. It clears everything up for me, absolutely.  But don't worry, it will all make sense.  So let's translate that into English. Yeah, exactly. So what we're gonna really wind up having with any web application is two main moving parts that we're going to have a client and we're gonna have a server. Now the server, and I always like that restaurant analogy when we're talking about client and server, that when I walk into a restaurant and I sit down at the table, I'm now a client, I'm gonna make requests of a server. The server, or waiter, waitress, whatever term it is that you wanna use there, is then going to take my order, run back into the kitchen, have somebody cook it for me, and then bring that food back out to me. And so that really is that client server. So I'm the one making the requests, I'm looking for whatever it is and the server is gonna go off and do something behind the scenes. And so in our little case with our Trivia app, it's going to be that we're looking to create a brand new trivia question or ask a trivia question. But we could go further into maybe looking up restaurant reviews, maybe posting different updates on fill in your favorite social network here, et cetera. All of those different things are web applications. And again, they have those two same moving parts, that there's a server and there's a client. Now we're gonna focus mostly in on the server side today, and you are gonna notice that there's a lot of different technologies that we can use to create the server side of a web application, that we could use NBC, we could use PHP, we could use Node, or of course we could use Python and Flask, which is what we're here to talk about. I didn't really bother putting that up on the slide. But so Python Flask falls into that server category. Exactly, yeah, if I, yeah, we'll go with, there we go, Python and Flask. That's really important because the client side is really important to realize when you're, when you go open up something like Internet Explorer, which is where we go to do our client stuff, it doesn't, Internet Explorer doesn't understand Python. Right, exactly, exactly. And so you'll notice that regardless of what that server side technology is, it's still gonna work with your browser. And the reason for that is because what you're gonna send out the door is markup and other languages that the browser can understand. So every browser is gonna understand HTML. Every browser's gonna understand JavaScript, every browser's going to understand CSS. And this is a big question that I get from a lot of people who are brand new into web development, is they'll go, oh, okay, well I'm gonna do, let's say MVC. So Microsoft MVC, I'm gonna do MVC, well wait a minute, does that mean that's only gonna work with Internet Explorer? And the answer is no, because you're going to always send down HTML, CSS, and JavaScript, which are things that every single browser is going to be able to understand. So the app that we're gonna build today with Python and Flask is gonna work in IE, it's gonna work in Chrome, it's gonna work in Firefox, it's gonna work in Opera, it's gonna work in... Whatever browser gets invented. Exactly, exactly, yeah. The key thing is whatever server technology you use, and we're gonna be coding in Python Flask as our server, the code it finally sends out to the person sitting at the browser is always going to be HTML, CSS.  So we're gonna be focusing on Python Flask, though if you're gonna get into more advanced web development you probably will want to learn some HTML, CSS, JavaScript. That's a good next step for you if you're new to web development. We're gonna get you started with minimal HTML, we're gonna do a little bit of HTML, but just with the Python that you know how to use, we're gonna be able to get some websites built. Exactly. Now the last thing to point out here is that there might be other components behind the scenes because let's think about an e-commerce site. And so I go into that e-commerce site and I say, hey, I wanna place an order. So these are websites where I go and order books and things online, yeah. Exactly, yeah, so there's gonna be a lot of other components because after all, when I go in and I say, well, I want that book, they need to send a signal out to the warehouse, they need to send a signal out to the shipper who's actually gonna get it to my house. So there might be a lot of other things that are going on behind the scenes. And I was just gonna like to point that out that it might not just be your little app that you might be incorporating services from elsewhere and bringing all of that in. Cool, well then, what's Flask? Yeah, how does Flask fit into this big picture of, okay, so there's the client, there's the server, there may be a database storing some information? Exactly, yeah. Well, as it turns out, yeah, yeah, it turns out, Flask is a micro framework for Python based on work, Zig. That's good. Forgive me if we're mispronouncing that. Ginger 2 and good intentions. I like the good intentions at the back end there. Okay, well let's try to clarify that a little bit here. So Flask defined, well, Flask is a very lightweight framework and this is one of the biggest reasons why we chose this technology over a couple of the other ones that are out there for Python as the next step because it does what it needs to do and nothing else. That one of the things that I always have a problem with when I'm trying to learn a new technology is sometimes just the entry point requires such a steep learning curve that it just turns me off to the whole thing, that there's just so many different moving parts and there's just so much that's just dropped on to you. You're just going. It's intimidating. Yeah, where do I start? So I need to learn this and this and this and this. And that's one big reason why we chose Flask is it's very straightforward that it doesn't do a whole lot. You can get it to do a whole lot, but out of the box, it doesn't do a whole lot. It's very lightweight and everything as we're going to see is going to be based on components. So out of the box, it does just a little bit and then there's going to be components. So for example, if you want to call those services, if you want to do templating and Susan's going to be very happy about this, if you want to do databases, you can add it in. Yeah, but you start off with basically, hey, I want to display web pages. I want to do a little code. Then go back to another web page. You start off with that and then you add the extra pieces as you're ready for them. Exactly, as you need. So that way you can focus in on, oh, okay, this is all I need to get started. Start building up some strength there and then go to the more advanced topics. All right. So the basic features here are the fact that it is based on Python, which is a nice entry level language, very flexible. And it is also open source. So you can use this to build whatever it is that you might want. So why did we choose Flask? Well, it was for all of those reasons. It's unobtrusive, it doesn't get in your way, that nice low entry point. And it's also a great place to learn concepts. And one thing that we want to stress here is, because it's always one of those trade-offs whenever you're teaching something is, how real world do you want to get, especially at the entry level? Because a full real world application is going to have a lot of moving parts and it's going to take quite a little while to develop. We're going to be going with a relatively simple application here, but you can absolutely 100% use Flask to create full blown real world applications. Now you very well might find after a while as your application starts to grow that maybe you start to outgrow Flask as well, absolutely. But I don't want you to leave here thinking, okay, well, the only thing that I've learned with Flask is just the ability to create a very simple little application. You can absolutely use this to create much bigger applications, create enterprise apps, 100%. All right, well, let's actually get in and get started. Let's start looking at code, I think it's time. Exactly, exactly. So what we're going to need is our different components. We're going to need to talk about environments. We're going to need to talk about the Visual Studio templates and then we'll do Hello Flask. So I promise we're going to get to code. Okay, good, awesome, looking forward to it. Okay, so a couple of things that you're going to need. As it turns out, there's a lot of tools that you could use to write Python code. That's right, you can get stuff for different machines. If you're working on a Mac, you can absolutely download software that will allow you to develop on Mac. But we're going to be using Visual Studio and what you do is you have to install Visual Studio and within it you'll need an add-on to allow you to do Python coding called Python Tools for Visual Studio. So step one, install Visual Studio. Step two, install the Python Tools for Visual Studio. You can get Visual Studio for free. You can get that Visual Studio 2013 community edition. Please do make sure you have the most recent updates applied. And then last, you're going to need to install an interpreter that's going to allow you to execute your Python code.  So that one URL is really useful if you haven't set up your environment yet. You're going to want to do that. Yeah, right up at the top of that page, you'll actually see a little link that will say installation instructions. Just click on that and it will walk you through the whole thing. The one that I do want to highlight here is that Python interpreter. That the tools themselves, just plug into Visual Studio but they don't give you the Python interpreter. Which allows you to actually run your Python code. Exactly, which you're probably going to want to do if you write all of that code. So do make sure that you install that, otherwise you're going to wind up running into a couple of problems. Okay, now we've already highlighted the fact that Flask needs extensions, needs components, needs packages, whatever word it is that you want to use there. You need to add stuff to Flask. Exactly, you need to add stuff. Yeah, we'll just go with stuff. I like it. So you need to add stuff. So that stuff must be installed. Right. So the question is where? Well, as it turns out, you can install this into one of two spots. You can install this into the entire system which is going to make this globally available. But the problem with doing that is sort of two-fold. That number one, it's now going to be globally available and maybe you don't actually want that. But also number two is a lot of the different add-ons that you're going to get are going to be parts of different open source projects. And so they're going to be updated at different times and at different speeds. And anybody who's ever done an update knows that sometimes you'll update one component over here and then all of a sudden this one breaks. Yeah. So having the ability. I know where you're coming from on this one. Absolutely. There's nothing worse than you've got two projects up and running and they're both working. And then somebody makes an update to something. And you can only handle an update in one of the two projects. So it's really wonderful to have this option of not saying let's install, because I might need version two here. I might need version three here. So when you install it globally, you're stuck with the same version for everything. Exactly. Maybe I want version two now, but for this project over here, I want version three. Yep, yeah. So I would say as a best practice, install that into your local environment then. And you'll actually notice that Visual Studio will give you that option that will ask you, okay, well where do you want to install this? Do you want to install this into System Python or do you want to install this into a local environment? And it will give you the ability to create a brand new local environment.  I worked hours on this animation. Are you ready? Okay, let's see. Oh, look at that. Wow, you've got like an expanding box. Yeah, I know.  Yes, exactly. No, nobody wants to see that. I'm going to do that. Really, install that into your local environment. And now let's actually get in and let's do a demo. All right. So let me bail out of my slides here and let me open up Visual Studio. And it is worth noting here that in the background, we've already installed the tools that we need. So we're just going to be able to fire up Visual Studio and away we go. And I also want to highlight, let's do this. Do, do, do, do, I want, well, I didn't get it in private, but that's okay. That's just what came up. HB colon, whack, whack, github.com, geek trainer, and Flask, that was what I called it. So one of the things that we did over the last couple of days here is we went in and started setting everything up for the demos that we're going to be doing. So you'll actually notice right here, the one that I'm circling down at the very bottom there, that trivia, that's the actual final, hey, we're done. We've also got this is what it's going to look like after module two, this is what it's going to look like after module three, this is what it's going to look like after module five. So if you want to go download that and use that to follow along so that way you don't have to type furiously, you can do that. I'll put the URL back up in one second. But what I want to highlight right here is this download zip. So that way if you don't want to mess around with maybe doing this inside of Visual Studio and connecting to the project and so forth, maybe you haven't done that, just download zip and then away you go from there. I would mention, however, that there is the ability, I apparently can't talk in type at the same time, usually I can. View trainer, whack, flask, there we go. This right here is the URL. I will mention that Visual Studio has the ability to pull this down for you and there is of course an MVA on Visual Studio and GitHub that's worth checking out. So it's actually just called Visual Studio in Git rather than GitHub. Yeah, cool, so we actually had just had a question in the Q&A window asking, hey, where can I get the demo code? So there you go, github.com slash geek trainer slash flask, just pick that download zip file and you've got your own copy. There we go, we'll put it up one last time there. And I put it into the Q&A window as well, so. Okay, yep, yeah, you're probably just gonna want to keep that on copy and paste. I expect this to be one of the people asking that. It's been known to come up again, yes. Okay, cool. All right, so there is that, but let me go into Visual Studio here. And what I'm gonna do is I'm gonna create a brand new project here. So I'm gonna say file, new and project. And then you're gonna notice that I of course have, because I've installed the tools, Python, web, and then there are all of the different web options that are available to me. Now, as we mentioned, you'll notice Bottle Django. We're using Flask, we've chosen Flask. Yep, so we've got Flask here. And then I'm actually gonna sort of sidestep for two seconds, only just because I always feel the need to point this out. A lot of times, you know, people hear Azure and they think Microsoft, okay, well that's good. And then they think, oh, well then I have to do that with C Sharp. As a matter of fact, you don't. So if you want to program your cloud services using Python, you absolutely can, 100%. Yep. Okay, now you're gonna notice that we've got one, two, three, three Flask projects, ah, ah, ah, ah. And you might be wondering which one should you choose?  Should you go with Flask Jade? Or should you go with the blank Flask Web Project? Here's the difference between them. So first of all, the difference between one and two is that the Flask Jade is gonna use Jade as its templating engine as opposed to JINJA. We're gonna be using the JINJA one, so we're not gonna go with that one, but that's the difference between those two. But the main thing about the one and two up there is that they're both built. That was weird. There we go. Huh, it's not letting me type on my screen. Try again. There we go. That was weird. In any event, they both use what's known as Bootstrap. Now Bootstrap is wonderful. There's an MVA on there. Just go to MVAMS. You'll notice if you just search Bootstrap, you'll find the one that John Galloway and I did. We're more than happy to walk you through all of Bootstrap. But Bootstrap is a perfect example of what we were talking about before. It's gonna throw a whole bunch at you that you now kinda need to figure out before you can start writing your code. And again, that steep learning curve we wanna avoid that. Yeah, we wanna get started. We wanna have our first website up without a massive learning curve. Exactly. And so I do love Bootstrap. And Bootstrap, once you learn it, will make your life so much easier. Yeah, it's a good next step. Exactly, yeah. We wanna keep it nice and easy. So we're just gonna go with our blank flash project here. The other big advantage of using the blank one is so many people will ask, okay, well, wait a minute. I went with this template and it threw a whole bunch of stuff in there. And you know how it works, but I don't know how it works. Yeah, I've had that happen before where I create the default project and then I run the default project and it's got like five pages I'm navigating around and then I get lost of what code is where. Exactly. And so I always find it nice when I'm trying to learn to just start with a clean slate. So is this gonna mean more work for me? Absolutely. Because I'm just trying to learn, am I probably going to in the future go with option one there, with that flash web project? Absolutely, but let me start here. Well, because when I'm getting started I'll actually understand everything that's in there. Exactly, exactly. All right, so let's go in and let's call this Trivia MVA. So this will be the one that we'll be building sort of as we go along here. And I've got my little Python flask, the solution name is just fine and let me hit okay. But wait, we're not doing Hello World? Well, we'll do Hello World. I'm just not gonna call it Hello World. All right, okay. Now, this is what I was talking about before, is you'll notice that it says, hey look, this requires external packages. We need to install them. Now here's the great part, you do have to be internet connected, but this will automatically download them for us. So we don't actually have to go out and manually download and unzip them. And we don't know how to know which ones. Exactly. I love the fact it says, you need some packages, would you like me to get them for you? Thank you, yes. Don't make me figure it out. Absolutely. So it's just gonna go off and grab them, but it just needs to know where to put them. And so you'll notice right here that it will say into a virtual environment or into Python 3.4. And remember that this is gonna be shared by all projects. So that was that system option you were talking about. That's that system global option you mentioned earlier. That's exactly it. And then that virtual environment, that's gonna be the private one just for here. That was when you were recommending. Visual Studio even recommend. Even Visual Studio recommends. We all agree on this. Exactly, exactly. Now the one thing that I do wanna highlight, if you remember back to the installation steps that we talked about a couple minutes ago. And I said, hey, look, you're also gonna need the Python interpreter. If you forget to install it, this is where it's going to fail out is right here that it won't create that virtual environment. Because in order to create that virtual environment, it needs Python. So this is where it's going to fail out if it doesn't have it. Okay. With that, I'm now gonna say, install into a virtual environment. It's now gonna say, all right, well, what do you wanna name it? ENVS convention, who am I to argue? It's gonna ask me what version we want. We only have three, four. And I'm just simply going to click create. And then with Blending Speed Amazing Accuracy, it will go off and pull down all of the different packages that we are going to need. And just kinda chug a chug a chug a. Move your mouse, makes it go faster. Or it makes me feel better. One of the other. Sorry, I was just answering a question. Oh no, carry on. I am also kind of doing a little dance in the background here. That's not your usual slide dance. I'm waiting for the slide dance here on camera. I am on camera. Yeah, but it wasn't the slide dance. It was the moving mouse dance. I've always wanted a little crank on the side of my computer just so it would make me feel better. So when I'm waiting, I could turn a little crank and then I wouldn't be able to tell myself I'm helping the computer go faster. Bring back the turbo button. You know what makes sense. Okay, so let's take a look at what we've got here. Now, first of all, it did create this little app py file and I'm gonna get to that. But I'm gonna get to it in a minute. That what I wanna start off with is you're gonna notice over here that we've got our Python environment. There's our little ENV that we just created. And then you'll notice that we've got Flask. It's dangerous. Gintu 2, markup safe, PIP, setup tools and the WorkZig down at the very bottom. So Visual Studio automatically went out and downloaded all of those forming. Nice. Now, here's the thing. I need those here on my computer when I'm doing Flask development. But these packages are global. They're universal. Everybody knows, or Visual Studio knows and that's really I guess the important part, knows that these packages are needed. So let's say that what we're eventually gonna do, like we've already done, is we're going to take this project and we're gonna push this up into GitHub, which we did. Well, we don't need these packages in GitHub because they're the exact same packages for everybody. So there's no reason to keep uploading them into GitHub. Yeah, because we just wanna share the code we wrote. Exactly, exactly. So the problem then becomes, well, let's say, like maybe some of our viewers have done, is somebody's gone out and they've pulled down the project and they're maybe seeing a little bang next to that Python environment and they're trying to figure out, okay, well, wait a minute, this isn't working. What's wrong? Well, here's what's cool. I love this feature because it's true, right?   It's not gonna have the pieces. Because the environment pieces were not uploaded. Now you're gonna show them a trick. Exactly. Now there's a little requirements text file and on this little requirements text file, it's gonna list off all of the different packages that we have grabbed. Now you'll notice the only one in here is Flask and you might be thinking, well, wait a minute, Christopher, I'm no math major but I noticed there's only one there and there's one, two, three, four, five, six, seven items over there and I'm pretty sure that seven isn't equal to one. Here's what's cool is, hey, you know. Seven, one is close, easily mixed up. I forgot to tell you there was gonna be math today. No. But in any event, what you're gonna notice is that all that we have the entry for was just Flask. Well, when you say I want Flask, Flask up on the little Python servers is built to say, all right, well, if you're gonna do Flask, you're also gonna need it's dangerous, Ginger2, MarkupSafe, PIP, SetupTools, and WorkSync. It's- So all those environments that are listed there, it, Visual Studio knows, when you ask for Flask, those are the packages you need. Exactly, yeah, because when it grabs Flask, it's gonna bust that open and Flask is gonna say, well, I also have these requirements. So I also need you to go, grab this one, this one, this one and this one. So that's exactly what we've got going on here.  Now you may notice a little bang on it and I personally find the easiest thing to do, just hit delete and delete on the environment. So this is kind of what it would have looked like if I'd taken the code from GitHub and just opened up sort of, except I'd seen environment with only one little thing. Yeah, exactly, yeah, so just delete that environment. Okay. And then what you're gonna notice is that I'm gonna right click here on Python environments and I'm gonna say, add virtual environment. So I'm putting a new environment back in. Exactly. And then right down here, so you'll notice it's the exact same screen that we saw before, but I wanna highlight that little text right there. Look at that. It found a requirements text file. So all I have to do is just simply hit create and then get a sip of coffee. So basically it says it's gonna look at the requirements.txt file, from that it's gonna add the necessary components to your virtual environment and now you're off running. Exactly, while you're sipping on coffee. Nice, yep, or water for me. Okay, I need coffee. Okay, I'm this loud and jumpy without coffee, you don't want me with coffee. True story. All right. Susan on caffeine and before people doing closed captioning would, they just lose it. They wouldn't be able to keep up. Fingers flying everywhere. Okay, so anyway, so what you're gonna notice here it's now recreated that environment for me. So that's what you're gonna wanna do. So that's kind of the basic steps there. Now, let's go ahead and focus in on our code now. And so what this automatically did was it created an app pie file, which is by convention the entry point to our application. And so what you're gonna notice is there's a triple quote comment here. And this is for those of you who took the introduction to Python course with us. We used a different convention for comments. The person who made this template chose to use a triple quote convention for comments. Yeah, and it's honestly, it's a little hacky. I'm not a fan of it. Yeah, I prefer the other one. But anyway, it is a comment. Okay. Yep, exactly. So what it's saying is saying, hey look, this is gonna be what's going to host your development server. It contains the definition of routes and views for the application. Okay, cool.  Right, import we use to access code in libraries. Exactly. So you'll notice from flask. So flask is the name of the package. What do we want? Flask. So this allows us to access the flask code. Exactly. This little part right here is gonna create our application. This underscore underscore name is just hard coded in to just grab the name of the server. Don't worry at all about that. This is one of those things where you can just treat its hat amount to magic. It's just, it's one of those things. It just, it needs to be there. Okay, so this falls into the category of, you know what? This is gonna be created for you. Don't mess with those two lines of code. Okay, exactly. Yep, leave those two alone. And while we're at it, go ahead and leave that line alone as well. And that's just simply going to create a little interface that again is just gonna help serve up our pages. So really, our code starts here. Yeah. We'll just do not touch. There we go. I like that. And our code goes down later. And do not touch. Yeah. There we go. Perfect. Our code. Yes. So now we get to the part where we're really interested in playing around. Exactly. Yep. There's an optional there. So, okay. Now, what you're gonna notice down below here is this little thing called app route, or root, route. Yep. Root. I'll probably bounce back and forth between the two pronunciations. And then you'll notice a little single quote, forward slash, single quote, which of course is a string and a forward slash. Now we're gonna get into routes in the next module. So right now, you can treat this tat amount to magic. But what this is basically going to say, and you know, one of the conventions that a lot of people like to do is they like to actually put out what the URL is that this is going to represent, which in our case would be whatever the name of the server is, forward slash. Yep. And that's it. You do see that a lot. Exactly.  And it might be maybe server and then question. Right.  A lot of times when you visit a restaurant website, it'll be a slash menu, a slash directions. Exactly. Same sort of thing, right? Exactly, yeah. And slash is sort of the main restaurant page. Exactly. And we're gonna see how to make all of that. Okay. Now, what I'm gonna do for right now is I'm just gonna get rid of that comment because we don't need it. And Susan, I'm gonna put you on the spot here. Oh, okay. And I'm just going to circle or square, I guess, that one little spot right there, just the blue section, just what's inside the blue, what is that? That is pure Python code. Okay. And that is Python code, but it's creating a function called hello and the function we're creating called hello returns a string that says hello world. So there is nothing that's special there. No, that is a standard Python function. That's just hello world. There's nothing extraordinary there. Nope.  You've actually had the power to build an awful lot with Flask by learning Python. So if you already took that first Python course, you already have a lot of the knowledge that if you know how to create Python, now it's just a matter of kind of figuring out, okay, well, what methods is this adding in? What components is this adding in? And how do I work inside this environment? But the language is the same. So you're basically expanding your vocabulary if I can just sort of beat that reality into the ground. That's the idea of it. It's expanding your vocabulary. You're expanding your tools. So, you know, think of it as a toolbox. We're adding one more tool to the toolbox. Exactly. We got the Python tool. Now we're adding the Flask tool. Yeah. And together, that allows us to bring it to the website. Exactly, yeah. You're starting to learn all of those different, you know, colloquialisms and all of those different kind of cultural references that, you know, when you're learning like a normal language, I could go off and I could learn French and all the syntax on French and how to conjugate verbs, verbs and all of that good stuff. But if you drop me into the middle of France or you drop me into the middle of Montreal and expect me to speak, there's still gonna be a lot more that I need to learn because I need to learn how to now work inside of that environment. So, you know, as people make different cultural references and, you know, say for example, things like Bob's your uncle or whatever the French equivalent. But my favorite, didali patat, one of my favorite, which means you're way out in left field, you know, middle of nowhere. It's a very Canadian French expression. Yeah, or you're way out in left field. Yeah.  And the more you understand, the more you can communicate, the more you can do. So in this case, we're expanding what we can do by expanding our coding vocabulary. Exactly, but you still have the basic structure that you still have that basic language.  So now we're just expanding the vocabulary there. Okay. So now that we've got that little part right there and again, I know I haven't spent a lot of time on that line. We'll come back to it. We're gonna come back to it. And then this line right here or that little block, again, this is all server side code. What this is actually doing is this is launching our server. Yeah. And what do you mean that's launching our server? Well, I'm so glad that you asked this. I'm gonna do this through the menuing system. This, by the way, will be the only time probably I'm gonna do this through the menuing system. I typically just go F5 or control F5, but just to kind of show, I'm just gonna start without debugging here. Okay. Now, what you're gonna notice is I get a little thing saying the project's out of date. Okay, fine. And, all right, let's do two things here. First thing that I wanna do is, since I created a new project, I have to change my color scheme here. Yeah, it's a little easier to read on the screen that way. Exactly. This right here, this is, this command line is our server. This is our server. That's the server that's running our code for us. Exactly. Then you'll notice right here, if you wanna get kind of an Uber technical, it's actually making the little request using HTTP 1.1 and we had a 200 response. So, there is our server. This is actually what's running this. And in fact, you'll notice, if I close this out, by the way, you are gonna notice there's Hello World, let me. All right, okay, we've got our Hello World code on there. I like that. But you'll notice, if I come back to here and I hit refresh, give it a second, you're gonna notice that it's going to fail because I closed that server.  And that was running our code. So, when we stopped it running, then our website stopped working. Exactly. And so, you'll also notice that we said Hello World. So, let me just go in and update this. Let's say, for example, Hello Susan, just to prove there's nothing up my sleeves, except for my arms. Thank you for laughing at that, Barry. Sorry, it took a second. Well, what you're gonna notice is that sure enough, it now says Hello Susan. So, whatever it is that we return back. Is what's displayed on the webpage. That's pretty boring text, don't you think, Susan?  I know, but I think we could be able to dress it up a little bit. So, we're not limited to just displaying text in terms of what we return. We can do something with it, right? Correct, yeah. Webpages usually look pretty fancy. Exactly. Different colors or bold and italics. Let's get a little better, yeah, exactly. And so, what we're gonna need for that, back to my slides here, with a flourish and everything, is our HTML primer. Yes, because as well as being able to return text, we can actually return HTML. Because really, when you get right down to it, HTML, just text. That's really it, you know? Yeah, and HTML is one of those languages that browsers understand. Exactly. So, that means when we return HTML to a browser, it can say, oh, I know how to display that. Exactly. So, Internet Explorer, Chrome, Firefox, they understand HTML. Firefox. Firefox, Firefox. I'll get there eventually. Maybe I should have had caffeine this morning. You want some coffee? No, I'm good, thanks. All right, so anyway, so let's talk a little bit about HTML and some basic concepts here. So, HTML stands for Hypertext Markup Language. Okay, cool. That's what it is, okay. There we go. So, what this is, is it's the standard markup for creating web pages, and it really consists of two main components, what are known as elements and attributes. Now, an element is going to consist of two tags. An open and a close, where it's going to either describe or do something to what's inside of it. So, in our little case right here, our little body, it's describing, hey look, that's the body. That's what we're trying to display out. The main part of our web page or whatever. Exactly, exactly. It's like the body of a letter, the, you know, of a body of the page, the body of the book, the main part. Exactly, exactly. And so, you'll notice that all of our tags are gonna be contained inside of angle brackets. Yep. Those tags, cause we always get asked this. Case sensitive, not case sensitive. Just treat everything like it is case sensitive. Technically, HTML is case insensitive, but convention is always use lower case letters. It's a good habit also, cause something I'll be talking about this afternoon. Yeah, exactly. Just, you know, it's one of those things, you just wanna get yourself into good habits right away, that, you know, whenever I'm teaching and entering a programming class, I spend, I swear, half the day, if it's a full day, it's not like half of it, just going over good practices, because you wanna learn those skills right away, because that's always what you're gonna lean on later on. So, you know, learn good things. Now, let's talk a little bit about those closing tags. A lot of times you don't need them, because what's gonna happen, and sort of a long story, find me on Twitter and I'll explain the whole thing, but what's gonna happen is the browser's always gonna make a best effort. Yeah, it makes an educated guess. If you leave off a close tag, it says you probably meant to close that. If it can figure it out, it'll just keep going. Exactly, and so the HTML doesn't need to be perfect. Yep, it's very forgiving, but... Try to keep it as good as possible. It's gonna aid the browser, but more importantly, it's gonna aid the developer. And that's you. It's gonna make your life easier if you get in the habit of, yeah, just make everything lower case, close your tags, it'll be easier for you to read, it'll be easier for you to update later when you wanna improve and make changes to your code. That's exactly it. Now, as a result, there are some tags, like BR, which by the way stands for line break, which just simply means go to the next line. Yeah, it just gives you, I use that a lot when I'm building webpages, just makes a blank line between... Yep, exactly, yeah. Two lines or two words. Go to the next line. So technically you don't need to close them. It is still best practice to close it, and then the cool kids, I've been told I'm not a cool kid, put a space forward slash angle bracket as the shortcut to close them. So if you've ever seen that, and we'll be seeing that a little bit later on today, that's what's happening is just the shortcut way. Yeah, because that forward slash is always how we indicate the closing tag. So sometimes it literally is open, closed, all in one string. Exactly. Now, our elements are gonna be grouped together in many types, and there are more elements here than I'm going to stop and list because we'd be here all of today and tomorrow and after that. And there is a full course on HTML, so we're not gonna try and do that.  Exactly, exactly. And so let's kind of break it down into three main categories here. We've got what are sometimes known as semantic tags, new to HTML5, and they're really just there to describe the data. So this is my header, this is my footer, this is the navigation section. Yeah, they just help the programmers sort of understand the different parts of the page. Well, they also help search engines as well, understand the parts of the page, because when Bing comes along and crawls your page, it needs to be able to quickly figure out what's on the page. And so if we just simply say, hey, look, this is bold, and actually I'm gonna sort of skip to the end here. If we just simply say something is bold, well, what do I know about it? I know it's bold, but that's all that I know. If I see it contained, however, inside a footer, now what do I know? Well, now I know that that's the footer of the page, and now I've got a little bit more of an understanding about what's going on there. So you are gonna notice that there are those format tags, and you are gonna notice that I'm gonna use them today just to try and keep things a little bit simple.  Which we're not getting into today. Exactly. So we're gonna start you off with, oh, look, you can make change the way things look. When you start building full websites, you can probably wanna use CSS to control the appearance of your web pages. Exactly. In terms of bold, font, color, and so on. That's it, that's it. Yeah, you can actually do all sorts of cool things with it. Yeah. There's an MBA for that. And last but not least is our controls. And again, we're gonna see these a little bit later. This is where we can get things like links and buttons and input tags as well. That we will play with. Yeah, and that's just sort of like a real quick synopsis of some of the different things that are available to us.  You put HTML in your HTML. I did. Susan, cause of distraction. Cause of distraction. Yes. But I'll mention another neat thing about the header, footer, and nav, those ones we sort of indicate the different sections of a web page, it's kinda cool. So those are also used by screen readers. Yes. So a lot of the tools that, for people who have low vision issues and rely on those ones that speak to them, they actually use those header, footer, nav to help tell a person, hey, this is the header of the web page and the body of the web page as well. Absolutely true. Got a long enough distraction? That was perfect. Okay. So apparently when I was typing out this slide, I moved a little too fast. You know, it's one of the nice things about having IntelliSense and it will automatically fix these things for you. I meant head there. Now, head and header are different. So this is not header, this is head. And inside of head, we can do different things like adding little things to the page, for example, metadata, or in this particular case, adding the title to the page and we'll see where that's gonna be used in a couple of minutes. And then finally, last but not least, is the body. And you'll notice inside the body that I've used a div tag. And this div tag is sort of a generic helper tag that's going to indicate that whatever's contained inside of there, by default anyway, the next div tag will be on the next line, the next div tag will be on the next line, and so forth. So it just allows you to make the code line by line? Exactly. Yeah. In a nutshell, there's other things that could go along with the div tag, but for right now, that's sort of perfect. The last little thing that I wanna mention is attributes, these are key value pairs, and they just allow us to add additional things to a particular tag. So for example, an a tag or anchor tag, which is gonna create a link. So if you clicked on this, where's it gonna go? Dub, dub, dub, dub Microsoft. We use those a lot on web pages. This is how you move from page A to page B to page C. This is hypertext. Yes. There's a little link, there we go. Cool. Let's go in and kind of take a look at a demo here. Yeah, time for some code. Yeah, let's spice up our little page here. And so what I'm gonna do is I'm actually gonna kind of build out the whole thing, is let's say HTML. Uh-huh. Let's say head. So now you're actually typing in action. So instead of just destroying your returning now, you're actually returning HTML, but that's okay because we know that the client, the browser, Internet Explorer, Chrome, or Firefox understands HTML. So it knows how to read this text and display it as per the rules of HTML. Oh, and you're using H1, which is header one. Thank you. That's a tag that HTML understands to display it as a primary header. So it has sort of default ways to display things with H1, but it basically is a header. Okay, now what I'm gonna do here. And I'm getting a high five if you manage to do this without a single typo. Well, fortunately, I kept it very easy for myself. Yeah, that's a lot of open and close angle brackets though. So. It certainly is. Okay, and I'm just gonna try and format this. And I see you're trying to keep everything lower case on your tags. And I can see your closing tags. So you've opened header and then you've closed the header. You open title, you close title. And you can see how they're nested inside each other as well. That's very common inside HTML. Yeah. Okay, and our lineup is gonna be okay. This'll work. Okay. So anyway, so what I want you to notice here is simply the fact that I built out this full HTML. And HTML at the end of the day is just text. That's really it. And so it is gonna be returned back as HTML, but you know, again, it's just simply text. Still a string. Exactly. And so now what I'm gonna do is I'm going to control F5 here. I'm gonna launch this.  I feel special all of a sudden here. All right, now hi. So you'll, yeah, hi. And you're also gonna notice, by the way, that there is Hello World there. Is that what the title tagged in? I'm so glad you asked that. As a matter of fact, that is exactly what that title tagged in. And then you're also gonna notice and you can right click and hit View Source. I always go Alt V, C, which we'll do it, but nobody ever remembers. I did a new shortcut for me. Oh, so there you can actually see the HTML code that we sent back to the browser. Exactly, yeah. Now, obviously we could keep doing this, but we probably... Then it would be an HTML course. Well, I would say two things. That A, yeah, be an HTML course. And actually, slide, slide, slide. There we go. Yeah, if you wanted to get more of an HTML, there's an MVA course on it. Bob Tabor, the HTML5 CSS3 fundamentals. Great course to go check out. You'll also notice the 20480 full five-day course taught by Microsoft certified trainers. And hey, we were both Microsoft certified. We were. We still are. We still are. We still are. So there's lots of material out there to help you get started with HTML5. That's the set. Once you've mastered the Python and Flask components, now that you're seeing how the HTML affects the output, those are some great resources for the next steps. Absolutely. Okay, so what did we learn? Well, we learned how to manage Python environments. Setting up environments, installing the different packages. We learned how to get started using Flask and Python. Yeah, even which project type to use. But it sort of begs the question, well, in the world, can we do with this? Well, for right now, we just built a foundation. So now what we can do is we can use this to begin pursuing deeper knowledge. And you know what? That's exactly what we're going to do after a 10-minute break, because I don't know about you, but I could use a break. I think maybe I need some caffeine. All right. We'll see you guys back here in 10. Okay, well, welcome back to introducing or introduction to creating websites using Python and Flask. Alongside Susan Eyeback, I am Christopher Harrison. And I actually want to go back to one big thing that we pointed out in module one, because there's been a couple of questions about this inside of the Q&A. The people have gone out to GitHub. They downloaded the project. They tried to launch it, and they're going, hey, wait a minute. I got a narrow message. Yes. So let's go in and highlight this. Now, the first thing that I need to stress right away is make sure that you have downloaded and installed the Python tools for Visual Studio. Yep. And that you've installed a Python interpreter. All available at pytools.codeplex.com. Exactly, P-Y-T-O-O, here. P-Y-T-O-O-L-S. I'll put it in the Q&A window as well. Yeah, you know, just do that, because unfortunately my typing on Zoomit seems to sort of come and go. So I'm putting that link right now in the Q&A window. So if you haven't got the Python tools installed or you're not sure where to get the code for the interpreter, it's all on the installation instructions there. Awesome, I love it. Now, this little project right here, you'll notice this is trivia for module five, and if you're just tuning in, we know. It's still module two. The reason that I went with this is because I pulled this down from GitHub this morning. So didn't it already have it on my system? Just pulled it down. And I want you to notice, that's generally speaking, when you say something that looks like this. A little warning symbol? Yeah, that's sort of universal. It means something's not right. Exactly, and so you'll notice that when I go to launch this, I get an error message. And the error message that you're gonna get is gonna vary a little bit depending on what's going on. In my case, it happens to be, system cannot find the path specified. So again, what I need to do is I need to, and let me, there we go, recreate my environment. So I'm just gonna right click on this, and I'm going to say, remove, and we'll go ahead and remove that from the project. Which is a little counterintuitive. You don't think to yourself to leave the thing with the error, but the thing is you're gonna recreate it correctly. Exactly, by just going back in, right click, add virtual environment, and then back over here, it will automatically read from that requirements text file for us. So really all that we have to do is just click create, and then if we just sort of give that a couple moments here, and I'm gonna zoom back out, and again, sip of coffee, I'm almost out of coffee. But yeah, now it's actually gonna recreate the environment correctly with all the packages that are needed for Flask. Yeah, you can actually see all that in the output window behind the scenes, that it's going out and it's pulling everything down. I know it's giving me a lot of warnings, but that's okay, warning, warning. You can also now see, now you can see in the solution explorer, all those nice packages, and we can see the little warning symbol went away. Yep, and we can also see, little control F5, hit yes. No module, oh, hang on, that's, you must have downloaded, that's a finished version. Yeah, you're right. That's, he just tried to run the code, it's gonna work after we're done module five, and we're on module two. Yeah, give me two seconds here. You can just grab that. That's funny. Here, look, it works. Oh, wait a minute. Yeah, you can't jump ahead three chapters without doing the code in between. Yeah. So, but yeah, so absolutely. But the key thing is, but you can see the little warning symbols gone away, as said, and the code will actually run, except we're missing the packages, which we'll be adding this afternoon. There we go. So, there we go. Okay, and so now, now it works. Okay. Okay, see, it does in fact work. There was just one little thing I needed to add in. And in fact, I'm curious if somebody, if that was an error message that somebody was getting. So you know what I'm gonna do real quick here, is I'm just going to check this in. You're gonna update the code on the server. So if anybody else was getting that error about the Redis, if you just download zip file again, we're just gonna update the copy that's in GitHub so that you have the correct version and we don't accidentally give you the code for the later stuff. Exactly, cool. All right, now then. Nothing like being live. Exactly, we're not cutting on this show. All right. Now, I also need to open up the correct project. There we go. And I need to open up my slide deck. And now there was another question that came up in the Q and A as well. Asking about that app.route slash thing. Yeah, we should probably talk about that, shouldn't we? I think so. That might be a nice reminder. We said we would talk about that. So I think it's time. Yeah, okay. Well, let's roll in a model tour then. Okay. Creating web pages. You know, now that we know what a web application is. Yep. How do we actually send information from the user to the server and from the server to the user? Because that is huge. I mean, that's what allows us to really make a web application. It's one, well, we already actually have the ability to just display stuff on a web page to the user. Exactly. But obviously, when I order books online and so on, I can, I go, I ask the server, what books do you have on Python? And it gives me a list and I say, well, I want to order this one. So there must be a way to have two-way communication. Exactly. So here's what we need to get into. Is we need to start talking about how this communication is going to take place. We need to talk about that writing concept. That's gonna go back to that question that you were talking about. And then we need to kind of enable a little bit of additional functionality. But let's, let's, let's start by, you know, talking about how to talk to servers. Now, caution. Caution. Yep. So, so it is a warning, but the cool thing about this is, you'll be able to speak geek so well after this that you are gonna be able to, you know, impress your friends with geek speak once you've mastered this topic. So here's the thing, is stick with me. Yes. I promise you, I'm gonna get you there. It's just gonna take a little bit and there's gonna be a lot of explaining that I'm gonna have to do to get us there. Because there's going to be a couple of very big terms that we need to understand and we need to really understand the why. So this is sort of my spiel. Let me go. I promise you, you gotta trust me on this. I'm gonna get you to the other side. So let's start by defining two big terms here and then digging into them. Okay. And the two main terms here are request and response. Okay. Now request is coming from the user. So the user has made a request to the server. Response is what the server's going to send back. So again, kind of going back to that restaurant analogy, getting hungry. Okay. Coming back to that restaurant analogy, I ask my server, hey, I would like a steak rare.  So I made my request, steak rare. My server is now going to respond by bringing me said steak. So request, this is what I want. And then response is that server sending that information back. Now let's take a look at sort of a real world application, example of this. And let's talk about creating a website. Sure. And in fact, we should probably back this all the way up and ask a question. You know, why are you creating a website in the first place? Well, the reason that you're creating a website in the first place is because you have information that you want to share and because quite likely in some way, shape or form, you want to make money. That is true. I mean, if you think about the websites you visit, they're either trying to show you advertisements so they make money or they're trying to sell us something or service or a product. Okay, so let's break that down. So let's start with number one is advertising. How do we make money with advertising? More visitors. So we wanna make it as easy as possible for people to come to our site, keep seeing the same pages, and we wanna make it very easy for other people to share those pages. So that way when they go to Facebook, they go to Twitter and they say, hey, look, I saw this, this is really cool that they have the very easy build out. So if somebody, when I want somebody to advertise it. Sure. Okay, so advertising. Let's go with number two, services. So I'm trying to sell a service. I'm a law firm. I'm a. A plumber. Plumber. I'm a spackling company. Spackling company. We'll stick with plumber. Okay. So anyway, so what I'd be looking for if I'm a service like that is I want more visitors because after all, the more people that come to my site, that's going to increase the chances that they're going to pick up the phone or fire up an email and hire me for my services. So once again, I wanna make it very easy to allow people to share my site and keep requesting those same pages over and over again. And if we bring this into the last example of, hey, look, we're selling products, which is sort of the one that everybody thinks of the more traditional. Once again, it's still the same concept. I wanna make sure that people have very easy ability to see the page that describes the super widget that I want to sell them. So basically, regardless of the type of web application that you're gonna be creating, the end goal is we want eyeballs, we want visitors. Why? Because if it's our, we want money. That's why we're creating these web pages. So let's take a look then at our little example here and let's say that we're setting up a little photo sharing it.  He says, you know, I'd like to download a picture of our koala. So he goes to adventureworks.com slash, and then in this case, sleeping koala. And that's going to send off the little picture of the koala. I, in fact, take that picture. By the way, getting a picture of a sleeping koala is the easiest thing to do. I think they sleep 23 to 23 and a half hours a day, yeah. Yeah, basically, that's their state most of the day. That's a lifestyle that I envy in any event. So they go in and they say, all right, well, this is what I wanna see and the server's gonna go, okay, sure. There's the picture and send that on down. And I wanna get a notice. Something about this URL is that it's nice, it's clean, it's simple, it's replayable.  They're gonna get that cute little koala picture right there. Just like every time I say, my favorite restaurant slash menu, it brings me up the menu for my favorite restaurant. That's exactly it. Yeah, really, I know exactly what I'm getting back when I type in that URL. And there's the next big point. You know exactly what you're gonna get back.  Because that's exactly what it says. Again, I suppose it's possible we might get Rick rolled in the middle of this, but that's a different conversation. So you'll notice that's exactly what we're gonna get. So having that nice clean URL and having this URL be replayable becomes very important. And as it turns out, when you make a request up to a server, there's two different places that information that you wanna send up could be sent. Okay. So it could be sent in the URL. Right. That's going to be either inside the query string like it is here or it could just be part of the URL itself. So I can actually pass information right there as part of the URL. And that's going to be replayable. So anybody with that URL could access that page. So anybody that sees that URL could access that page. And let's kind of spin this back to my analogy that I've been using is if I'm sitting in a restaurant and I say to my server, maybe some special code. Maybe there was a little discount code. And so whatever it happens to be. So let's just say the discount is web Wednesday.  Well, if somebody else over here is me say web Wednesday, you know what's gonna happen? They're gonna be able to say web Wednesday as well and get the exact same discount. And in a lot of cases, that's exactly what I want. That I want that information to be shared. I want that information to be public because if you're gonna offer a discount like that, typically you're doing that to attract more customers to get more people in. And we want that to be replayable. Bringing that back over into our environment here. Again, we want this to be replayable. So every single time that somebody comes in and they say, sleeping koala, we wanna make sure that they can get back that picture. So it's important to be able to send information inside of a URL. Yeah, and earlier you had that query string as well. You do see that a lot of them I find on pages where are online stores. Yes. My husband and I were shopping for lighting fixtures and it was like, hey, I like this lighting fixture and you'd send me a link and it would be a URL just like that, slash, hall lights, query, and it would have that little question mark and then it would have like the catalog number of that particular light. Exactly. And when he sent me that link inside an email, I click on that link and I saw the exact same lighting fixture my husband was talking about. And then we're like, oh yeah, I like that too. And then we can go buy it. Exactly, exactly. We want that to be replayable. We want that to be shareable. That we want more people to come in and look at that. Yeah. Cool. But you know, sometimes there's information that we wouldn't want replayable. So let's kind of go back to my restaurant analogy here and let's say that I start speaking my credit card number out loud to the server. No, I don't really want the person next to me knowing my credit card number. Well, because again, at that point it would become replayable because if that's the way they were going to exchange credit card numbers, the person next to me, here's my credit card number, they start speaking that. And again, that's not a problem. And now you're paying for their dinner. Yeah. Exactly. And we do use credit card numbers on the web. So it's a very relevant analogy. Exactly. So this isn't going to work. So we need some way that we can tuck that information away. Make sure that that's not going to be visible. Now, I'm going to tangent here for 30 seconds. See, you'll notice I slid to the side. That's your tangent? That's a visitor side. Yeah, I'm going to talk over here. One big thing that we're not going to get into today is a thing called SSL, Secure Sockets Layer, which would do encryption. And one big thing that I want to highlight about this header information is that it's not going to be replayable. It's not going to be in the URL, but it's not by default going to be encrypted. Which means if you've got someone who knows how to sneak around and sniff things. You need to move to the side because we're on the tangent mode. Okay, so there's a right? Okay, so yeah. Yeah, to your right. So yeah, so that means these people know how to go hack things and dig around and stuff. They can see the stuff in the header if they know what they're doing. Exactly, yeah. So we would need to use SSL. So this is not going to encrypt it. And so it's just going to tuck it behind the scenes. We still need to encrypt it, but we also still want it out of that URL because we don't want anybody to be able to see that. Okay, back to here. Back to our main program. Yes, we return back to our regular programming. So back over here on that header info, that's again going to be sent behind the scenes, but it's also going to give us one other big advantage here is that there's no size or type restriction. So again, let's say that I happen to be very specific about the order that I want to make. So I'm going to let's say order rib eye and I want that to be rare, but I want that to be- With mushrooms and the teriyaki sauce. Exactly, sliced vertically, you know. Exactly, so I want all of those different things. Well, if I just keep saying this to my server, chances are my server is going to forget this. There's only so much information that you could communicate that way. Sort of the same thing with a URL, depending on the browser and a couple of other things, your URL is going to be restricted on the number of characters. Header information, however, not restricted whatsoever. So we can send a lot more information and it's also going to be tucked away. So let's, you know, I'm actually going to go and tell you I have one of my slides here. Let's actually see this in action and ignore the fact that it says post. I'll come back. Okay. So, you know, here we go with somebody maybe wanting to make a comment here. So let's say they really like that picture. So they'd like to put in a comment. This is not something that I want repliable. That I want to make sure that every time somebody wants to make a comment, they have to go in, fill out the form that they can't to simply grab the URL. So this is where sending it up inside the header information comes into play. So we give them the form, they type in their little thing called cute picture. I really should have stopped that animation over there. But you'll notice they typed in cute picture. Yep. And so now that information is going to be sent up here and I want to highlight the URL. And you'll notice that it's still www.aventureworks.com, whack comment. Yeah, it's true. I'm using the exact same URL, but two different things are happening. The first time I use, I specify the URL, it's just giving me back a blank form. Correct. The second time it's, I'm sending it my filled out form. Exactly, exactly. Yeah. So we're going to get to that first part here in a second, it's that second part that right now is very important because you're going to notice cute picture is not in that URL. So it must be in that header information. There you go. And that is exactly our header information in action there that it's going to be sent behind the scenes. Now let's come back to that first part that Susan just mentioned there. And you'll notice sort of that two step process here. Hey look, I'd like to comment. Well in order for me to comment, what do I need? I need the form to fill out. Exactly. So I punch in, whack comment and it gives me that form back. Right. Okay.  So how does it know when to just give me the blank form and when am I sending it a filled out form? Fantastic question. And that's going to be based on two are known as verms, which are get and post. Now, a lot of times when people here get in post they automatically assume, and this is fair, and I got to be honest, I did this as well because it sort of makes sense that when you hear get what you're thinking is I'm getting information, when you hear post you're sending information. And it's not entirely true because I can still send information with a get. When I do get because after all kind of winding all of this back to my little cute koala picture here you're going to notice we sent information. We said we wanted a sleeping koala. And that was a get. Exactly, that was a get. So we can still send information. But the main difference is that we only have the ability to send data inside the URL with post we can do it in the URL as well as in the header. And so remember or it can be URL as well as header. So it could be both. Now the question becomes, well how does the server know? When the browser makes the request it will actually say hey I'm making a get request or it will say hey I'm making a post request and we're going to see in the next module how we can actually control that. How we can actually do either a get or a post. The main thing that I want to mention here is that the default is get. So it's only going to be post if you explicitly do something to send up a post request which is typically going to be done with a form. And again come back to me in the next module and I'll show you how that's going to be done. So as a coder when I'm writing my Python code does that mean I'm going to need to be able to say well hang on if this was a get I just want to send them a blank form and if this was a post then I know I'm getting my information back. 100% correct. That's exactly it. That inside your code you're going to need to be able to detect and that is going to be sort of the typical pattern. Excuse me, typical pattern here is you're going to first detect the fact that they did a get and then what's going to happen is you'll send down the form. Yeah. And then you're going to detect the fact that hey look, they set a post and then you're going to read that data. So that's going to be the typical pattern. And so when we go in and we create for example a create question that's exactly what we're going to have that we're going to have one little block that's just going to send the form down. Uh-huh. There we go. And we're going to create another block that's going to accept that brand new question, save that back into our data store and then send back to the user, hey look, that was successful. So you're going to notice that that's going to be very common programming inside of Flask and inside of your little application. Cool. Yeah. Like I said, bit of terminology. But hopefully what we did there is kind of brought all that together and saw that and I know that chances are after kind of going through all that we need to see it in action and we will, I promise you. But this is one of those things where we needed to find this right up front because when we start getting into things like routing we need to kind of understand that little get post and all of that good stuff. So that's always why I like to cover that. And just to close it all off, the response information, there's an awful lot that could be sent back down with response, could be things like status codes, the type of file that we're going to send that one of the things that we've been highlighting is things like HTML, CSS, JavaScript but we could send down images, we could send down videos. There's a lot that we could actually send down. And so if you are going to send down an image you need to tell the browser, hey, we're about to send down an image otherwise it's not going to be expecting that. You do that inside the header information but typically the content that you're going to be sending down, HTML, CSS, JavaScript. Cool. Now you asked me a question many minutes ago now. Yep, yep. And that question was. We had a question in the Q&A window that asked. A little more, we're trying to remember what that app.route slash was doing inside the code. That's a great question and that is a route. So let's get in and start digging into what routing is all about. Now what I always like to say when it comes to Flask is that at the end of the day, what a user is doing is they're calling a function. Here, let me back out of my slides real quick here. I'm just going to add in an ad hoc demo. There we go. There's my little music for an ad hoc demo. Okay, so you remember this from before. So let's again ignore this right here. What's this again, Susan? That is a purely Python function. That's it, that's all that that is. So what's going to happen here is this function is going to be called. And in fact, here, we can see it. I'm going to put a break point right there. I'm going to hit F5 to go into my bugger. Whoops, and apparently I'm going to hit the number five as well. I'm not sure Python knows what to do with that, so all right. That's okay, neither do I. There we go. Take two here, trigger, trigger, trigger. And you'll notice it decided not to break for me. That was awful nice of you. Did you delete the break point by any chance? No, we'll try again. Yeah, take two. Your code's still running. The number of times we all do that when we're doing demonstrations. It's like, wait, my project is still running. Not enough code inside your function, my friend, to get break points. There's rules about break points, about what types of lines of code they're allowed to be on. So if you declare a variable or something, yes. That'll force it to stop longing us for us to show you that it's running. So this is something, it's just, there's only certain lines of code it'll break on. And now they're going to think we do have some magic code up your sleeve. Stop. There we go. Hooray! All right. Congratulations. Now we can actually get it to break. And you know what's sad is that we spent all of that time for what's going to be a very simplistic demo. I know. But here's the point that I want to make is that we typed in this little forward slash. And if I go back to my browser here and let's just kind of zoom on in here, you'll notice right there at the very end that there's a forward slash. So that is actually what's being sent into Flask, what's being sent into the server. And then behind the scenes, it's now going to run that function. So at the end of the day, all that we're doing here is we're just running Python functions. So what we need is we need a way for our users to communicate to us which function it is that they want to call. Now of course, they're not going to know that they're calling a function. No, they're just typing in some sort of URL. But at the end of the day, they're making a request. They're looking for some behavior. So that when you go to restaurant.com or whatever you're interested in. When I go to my favorite restaurant slash menu, I'm asking for the menu. Exactly. When I say go to restaurant slash directions, I want to see the directions. And when you go sleep in Kuala, you're looking for the sleep in Kuala. So again, in two-part harmony, what you're going to notice is that at the end of the day, we're just making those method calls. That's really, in our users, our requesting functionality. And that is what routing is all about. That routing is all about taking the URL that a user punches in and doing something with it. Now traditionally, in a lot of other technologies, the user, again, not necessarily knowing it, is making a request of a specific page. So they're specifically looking for about us.html, and they're specifically looking for register.aspx. But the problem with that is what happens if later on, we decide that we want to change, that maybe we don't want to use HTML anymore, that maybe we want to use PHP or we want to use MVC. Now that starts to become a real problem. So we want something that's going to get away from calling specific pages and instead request that functionality. And so you'll notice that we've got register, and you'll notice that we've got a bound. Because if I back up here, what you're going to notice is that we've got this little extension here of that .html and that .aspx, I have no idea what that is. Yeah, for the user, that's very confusing. Exactly. And I remember in the old days, it was .htm, and somewhere .html, and somewhere .htm, and it was .asp, and then it was .aspx. It got really confusing for the poor users. Yeah, exactly. But if I say whack about or register, I know exactly what's about to happen on the other side. I'm going to bring up the about page. And do I care what's happening behind the scenes on the server? I certainly don't care if you did an ASP versus ASP.net versus HTML, I just want to get to my web page. I just want that functionality. That's exactly it. So it's going to create more readable URLs. It's going to give us increased functionality or flexibility. And then most importantly, it's going to give us search engine optimization. And we could spend the entire day talking about SEO or search engine optimization and probably barely scratch the surface. Yeah, which is all about trying to show up on the first page when they do a search. Exactly. And here's the thing, is if you just follow a couple of very simple little steps, you're going to be just fine. That you're going to be able to show the search engine what your site is all about. And one of the simplest to highlight is the fact that your URLs are very simplistic. That when I go to WAC register, I know what's going to happen. When I go to WAC about, I know what's going to happen. And not only do I know, you know. The search engine knows. And the search engine knows. And that means more people find you.  Show me the money. Yes. By the way, last little thing to mention here is that there is an MVA on search engine optimization. Why am I not surprised? I couldn't save the coverage at this point on MVA. It's pretty amazing. Hey, yeah? Yeah. All right. But back to our routing. Back to our routing. So what I want you to notice is, routing is taking that URL and translating it into something. So the server needs to understand what in the world the user is requesting. So the server doesn't know what WAC register is. You're going to tell what it is by adding in those routes. And that's going to be where you specify the URL for that particular desired item or function. So let's go in and take a look at kind of routing 101 here. That if I go into Visual Studio, and let's just come down over to here, is I'm going to say app route. OK. So you're adding another route now. So right now we had the slash did our hello world. So you're now adding a new route. That's exactly what I'm doing. OK. So I'm going to start with the forward slash. OK. Start from the root of our server. And then I could type in really whatever word it is that I want here. So could I use Wibble? Yeah, well, a user wouldn't really know what the heck Wibble's doing, but OK.   Keep saying Wibble over and over and over again. And it helps you get out of the army. If you say so. True story. So in any event, could I say Wibble? Absolutely. Wibble, Wibble, Wibble. But it doesn't actually mean anything to the outside world. So I want this to be nice, clear, and clean. So instead, what I'm going to do is I'm going to say create. Because what this is going to do is this is now going to create a question. Right. Because this is the first step towards a trivia app that you are not planning to build. It is. Yeah, I'm going to build like a little bit of it now just so that way we can use these demos later. Don't worry we are going to get into the specifics of it. But right now, yeah, create. Yeah, this is going to be the starting point. Now, so we just added that in.  That's all that happened right here. You'll notice that that was the method that was called line position, location, location, location. It was right under that app route. So I now come back over here. And I'm just going to define. A new Python function. A new Python. And I'm going to call it create. And that is really a good practice. Just call it the same thing as the route. And that way it'll be easier for you to remember. It doesn't matter. You could have called it Wibble. But it's just easier for you to follow your own code if you use the same names for your functions as you do for your routes. Exactly. Now, I am going to cheat a little bit here in that I'm just going to send down an H2 tag. I'm not going to build out the full text that we saw up above. And the reason that I'm not going to do that is just because we're going to go back and throw that out. We just want to show that this route calls this function, right? Exactly. That's it. That's all that we want to do. And so, sure enough, you're going to notice that if I go in and I now say create, there is our create page. So you'll notice right up at the very top, I said create. And it's now on the create page. Perfect. So a different route, different functions call, different output displayed to the user. That's exactly it. Now, let's, let me close that out. And I'm just going to close all of that out. There we go. Now, one of the things that can happen here is that your application can get very big. Oh, yeah. And so it's very possible that you're going to have dozens, maybe even hundreds of different routes out there. And so, you know, it's going to get a little bit tedious to try and keep everything inside of one file. To get very cluttered. Yeah. So fortunately, we can create additional files. So let's actually just add in, add, new item, empty Python file. And I'm going to call this routes, which is where our routes will be stored. I like that. Nice and easy.  So you're taking the code out of the app.py file, of a routing code, and moving it to the routes.py file. Exactly. So I just simply move that into my routes. And I'm also going to serverwack create. Let's, you know, add some comments. Good idea. And so this demo is not going to work. You're going to notice that I've moved that code over. So it's the same code that we saw before. And I run my app, and you're going to notice that I'm going to get a 404. File not found. And you're probably wondering, well, wait a minute. Why was that not found? That's a good question. The reason that it wasn't found is because my application doesn't know to actually go call that routes file. So what I need to do is I need to go import. Well, that kind of makes sense. It's not just going to magically just go searching for, are there any files out there somewhere that have the routes defined. You have to tell it. It'd be nice if it was magic. There is no magic in Python. So what I need to do is import that. So I'm just simply going to say from routes, import, and then asterisk, which means import everything. Now, by the way, there is no magic to the name routes that it's just simply routes. Well, it is convention. Again, could I have called it WebL? Sure, but nobody's going to know what that means. I mean, if I opened up somebody's project and I saw a file called routes, I might guess, but that's where they're doing the routing. And that's why you're doing it. And you might also decide, as your project gets bigger, that you're going to create additional routes files as well. So you would just simply import all of your additional ones. So maybe for our cart, we would say import asterisk. And maybe from our products, we would say import asterisk if we were creating an e-commerce site. So we've got all those different files. So we just simply import all of them in and away we go. So now, let's go ahead and launch this again. It's going to fail again. Yep. And now you're going to notice I'm getting a slightly different error message here. Yeah, it's actually coming back saying app is not fine. That's true. And you did have code and there's this app.route. So it looks like it can't figure out what app is. You're absolutely right. It can't figure out what app is. So what I need to do is I need inside my routes pie is I need to pull in two things. First of all, we're going to be doing flask in here, right? Yeah, well, yeah, absolutely. We're doing flask. Guess what we need? Maybe need to import flask. Hey. So we need that. And then we also need app. So I'm going to say from app import app, which I know sort of a little bit of a funny line from app import app. Here's what's happening is let me do this this way. App here, this is the file. So that's pointing to our app pie file over there. OK. App is the name of the variable that we declared. So if I come back over here, there is the variable that I had declared. Right. So that's the app variable it was saying it couldn't find. Exactly. So now we've got flask. Now we've got app. And now we run this one last time. Chugga, chugga, chugga. And there is our hello world, Susan. Let's go in and say create, and there's our create page. So now we have a nice, tidy way of sort of not cluttering up one file with everything, because that can get unmanageable very fast when you start building bigger sets. Yeah, exactly, exactly. So yeah, absolutely. So just cut and paste for routing information into a route.py file. You can call it something else if you want. But routes is nice, easy to guess name, intuitive name. But you do have to add a couple of import statements to the top of the file. There you go. All right. Cool. Now, let's keep on keeping on, shall we? Yeah. Because up until now, all that we've done is just showing off the ability to do this part of the URL. Right. Now, it'd be nice to be able to take a variable right over there instead of that question mark ID equals blah, blah, blah. No of those query strings. They call the query strings. Yeah. Exactly. And we want to make sure that this is going to be nice and clean and easy, so that if I go to www.example.com, waxspeakers, wax, Susan Eibach, guess what I'm going to see there? Christopher Harrison. Close. I figured you'd hack my website, gone in there. Not quite. Now, what I'm going to see there is I'm going to see information about a speaker named Susan Eibach. And it's all right there in the URL. And sometimes this is what's known as a vanity URL, because the name of whatever it is we're going to see on the other side is inside of that URL. And why is this important? Well, once again, it's important for search engine optimization for SEO, because that's Susan Eibach. So the search engine is going to know that that's Susan Eibach. On top of that, it's once again going to give us predictable URLs. So if somebody hands me that, www.example.com, waxspeakers, wax, Susan Eibach, and I know that, for example, maybe Christopher didn't speak there, that I could go in and I could say, wax Christopher Harrison. And hopefully it just, I guessed. Exactly. And I bring up the speaker information on Christopher. That's it. And so now what we need to do is talk about how we're going to add in those vanity URLs. So once again, let's come back over here and let's just go in and say server, wax, question. OK. We're on that later. And then I'm going to use an angle bracket title angle bracket. OK. Now, angle bracket, something angle bracket is traditionally. It's traditionally used to be a placeholder, right? Yep. OK. How about that? Route, question, title. OK. It's traditionally used to placeholder. OK. Guess what? It's a placeholder. So here's what's cool is that it's automatically going to be looking for some bit of string afterwards that's going to be title. And I would also mention real quickly here that if you wanted to constrain that, that maybe you just wanted that to be an integer or you wanted to force that to be a string or something like that, that you could go in and do that. So yeah, if you're expecting an ID number, an account number, you can specify. Yeah, I think you could say int colon. Yeah. So in my case, I'm just going to say title. And then I'm going to say def question. And I'm going to say title. Oh, so you're just accepting as a parameter to function, just like we would with any Python function. We want to accept parameters. That's it. And I'm going to say return. And let's go in and say h2. And I'm going to say plus. And I'm going to say title. And I'm going to close out my h2 there. By the way, something I just picked up on here. And this is, it's one of those things. Sometimes Python is a little bit too flexible. And so you wind up easing into bad habits. And I've sort of eased into that. That you might notice here, and I apologize if I've confused anybody, you might notice that I've been using single quotes on the route. And I've been using double quotes here. And that unfortunately, it's just been sort of the way it's been flowing off my fingers. I could absolutely use single quotes across the board. And I could absolutely use double quotes across the board. So I'm just sort of a bad flow I got myself into. Now, in any event, let's go in and highlight something here. You are going to notice that once again, Susan, I'm going to put you on the spot. OK. The spot highlighted in blue, that's a. That is just a Python function. There you go. The difference between this one and the others is this one's accepting a parameter title, which means the function's expecting me to pass in a title when I call it. Cool. So it's expecting title. So it's expecting a parameter, still just a normal Python function, but expecting a parameter. Guess where it's going to get it from? I'm hoping it's going to get it from that URL. Do I have to do anything to magically connect that, save it that title placeholder? I want to put it into that title parameter? Just make sure that the names are the same. That's all you have to do. So if you say title, say title. If you say Wibble, say Wibble. So you just have to make sure that those two are the same. That's it. Cool. And so now, if I, once again, launch my little page here and I go question Wibble, it's going to print out Wibble. And if I say question Christopher, it's going to print out Christopher. So it's just taking that title, passing that in, and then giving me access to that. That's pretty cool, right? Yeah. That is neat. So I actually, yeah, can actually read a string or something that they typed into the URL. And then in my code, I can use that string. That's going to be pretty powerful. That's exactly it. Yeah, it's very powerful. We'll actually see later on how we're going to be able to use this to go load our questions for our little trivia app. OK.  Too many things open at the same time. There we go. My taskbar just didn't want to behave. One of the little problems that we can run into here is that we need to be able to create links. And so in order to create a link, we need to have the URL. And unfortunately, the URL might change. That's true. And it might change for restructuring purposes or otherwise. So if it changes, and I've hard coded that URL in 12 different places, I don't have to run around all of those 12 places and change that. Yeah, and that is true of coding a lot of times. What drives you nuts is it's that old rule of as soon as you find yourself copying and pasting the same line of code to 10 places, you're thinking, oh, it's easy. Just cut and paste. Yeah, it's easy until one day that thing you cut and pasted changes, and now you have to remember change it in 12 places. Exactly. So there's an old phrase that's sort of streamlined as Einstein once said, don't memorize anything. You can look up. And the full story behind that is he was doing an interview and some constant had come up. And Einstein didn't know what it was. And the reporter was flabbergasted at this. How could you not know what this is? And I said, why would I memorize something that I could look up in a book in under two minutes? My corollary to that in programming is don't hard code anything that you can look up. So if I can ask for that value, I'm going to ask for that value rather than hard coding that in because once again, that could change. So let's take this and take a look at how we can add in a link here. So once again, back over here to our little page. And on the home, instead of saying, hello, Susan, sorry, Susan, I want to now create a link into the create page. Oh, awesome. Because we see web pages doing that all the time.  And, you know, on the main home page, there's if you don't know, you can type restaurant slash menu to get to the menu. Then usually there's a little link on the page where you can click and say, take me to the menu, take me to directions, let me make reservations. Exactly. OK. So that was like a perfect level of distraction here. I try. And I need as we have the code here, my quotes. But yeah, there we go. OK. So what I'm going to do here is I'm going to set up my little create link. And I'm just going to add that in. So create link is just a variable that contains a string. That's it. And that a href, that's the syntax of HTML for providing a link to another page. Exactly. But what I need inside of there is said link. Which would be some sort of URL, www.something or ATPP something. Yep. So I want to point that at create. OK. So as long as the function name doesn't change. OK. So you've got to keep that. Because something's got to be consistent here. So as long as the function name doesn't change, you can go ahead and keep doing it. And so all that you need is this little thing called URL4. And then in my case, it's going to be create, right? No. Well, you're going to notice that if I fire this up, it would not work. The reason is that it's not going to know what URL4 is, well, 4. It doesn't know what URL4 is. OK. So I need to go import that in. And you're going to notice that that's inside a flash. So I go in and I say, aha, URL4, let's bring that in. And that's now going to bring that to life. And so now you'll actually notice that if I go in and I say URL4, open parent, now it's actually giving me the IntelliSense. So now I could go in and say create just like that. OK. There we go. And now let's go back in. Let's say yes. Let's check it, check it, check it. And now you're going to notice it says create a question. And I put my mouse over this. And down at the very bottom, you're going to notice that it now says create. And just to sort of prove a point here, there we go. If I updated that route to say Wibble, Wibble's always just my throwaway word. And it's also a reference to a BBC show that nobody knows. What I want you to notice is this. Is the function that I had created. I don't know why my typing keeps disappearing. The function that I had created, I had said define create. So you just renamed the route. You didn't change the function name. Exactly. Just renamed the route, didn't change the function name. So as long as that stays the same, that's just going to make a mess of things. It's still going to make a mess of things. There we go. As long as that stays the same, it will always pick up what the route is. So you'll notice that it automatically updated itself to now be Wibble. Awesome. So that means I can change the URL that a user wants. If I want to rename or I'm making a French version of the website or something. So I want to change it to, well, I guess, menu, still menu in French. But create instead of create, then I have that ability. And now that route points to that same, points to that function. And I don't have to change my code. Just because I changed the URL, people type in to get there. And that's exactly it. That's exactly it. By the way, Barry, our camera guy in the back, asked a question, is Wibble from Blackadder? And the answer to that question is yes, it is. Thank you for getting my reference. Cool. All right. You're not alone. Fantastic show, by the way. In any event, let's close all this off. Because we covered a fair amount of ground there. And so the question then becomes, well, what do we learn? Well, we learned about, get them post. We learned how to create custom URLs. We learned how to send information to the user. We are going to see in the next module how we can pull that information in. Well, what can we do with all of this? Because that seemed sort of esoteric. That seemed kind of academic. Well, the biggest thing is, isn't we now learn how to best share information with the world? That you want to keep your URLs predictable, nice, clean. Make sure that the user understands exactly what they're going to get when they click on your link. And in turn, the search engine is going to get. We also saw how to create our custom URLs. And we also saw how to go in and begin building our own web applications. But of course, we need to keep going. Absolutely. There's more to do here. But I need a break. I bet you're not the only one. Let's go ahead, take 10 minutes. And we'll come on back. We'll see you in 10. All right, well, welcome back to our Jumpstart on Introduction to Creating Websites, using Python and Flask alongside Susan Iback. I am Christopher Harrison. Now, we have been taking a look at really kind of the basics of everything about how to handle our routing, about HTML, how to send information down. And I think now it's time to kind of bring all together. And let's start building a bigger app. Now, before I get into that, I do want to mention real quickly for everybody that is watching this live about the couple of little streaming issues. Yeah, there was a couple of things that's morning. Yeah. So one big thing to keep in mind is that this MBA will be available about two weeks from today. Today is Wednesday, the 17th. So yeah, so you can check that out in a couple of weeks if you did wind up missing some really bad jokes from the first module. And there is incentive right here. You'll wash on them. All right. So our big purple slide here or my big purple slide, we could keep building all of our little files to just send text down to our users. We could. Yeah, because at this point, we have the ability to have multiple webpages to move between those different webpages. So we have that ability. That's a start. By the way, that is the oddest sentence I think I've ever written. Who did the editing on this in the event? By the way, that would be me. Happy you, yeah. I really need a better editor. In that event, we could keep doing that, but that isn't going to make it very easy to create a rich UI. I mean, here, let me actually bail out of the slides for a second, and let's fire back up Visual Studio here. I mean, look at this. That's a pretty clunky line of code if you're going to have to do that every time you want to display something nicely on the screen. And when I was having that out, one of the things that you had mentioned was that you were going to get a high five if I did that without typos, which by the way, you would be high five. Oh, high five. This is true. Yeah, oh, you can go high five. You managed it. Oh, here we go. See, there we go. Captured. Well done. Thank you. So yeah, so we could do that, but that's going to get really old really fast. And on top of that, there's a very good chance that you're going to have a division of labor between your web designers and your web programmers, that if you're anything like me and I know I am, I'm good at the, I pull out that line every MVA. If you're anything like me and I know I am, I'm very much a back of the house kind of guy. I can do all the programming on the back end. But if you're looking for something that's going to look very pretty, I need a lot of help. It's really not my skill, but there are people that have that skill. And I want to make it easy for them to do their thing, make it easy for me to do my thing, and then we'll bring it all together and we'll have a very good looking app at the end. Yep, makes sense. Yeah. So let me go ahead and bring all this up. So in order to do this, in order to build the application that we're going to want, we're going to need forms. So we need to talk about how to allow our little user, there's my little user dude, and my user to send information up to the server. That's going to be with a form. So we need to figure that out. We also need to figure out how we're going to build better HTML. That's going to be our Jinja templates. And then finally, last but not least, we're going to build the structure of our app, that front end, and then you're going to come along and you're going to take care of the app. I can do a little more back and a little more logic to the back end. Perfect. OK, so let's talk about forms. What is a form? Well, a form is all about collecting information, sending it up, and then eventually we're going to need to read that. So let's start by talking about how we're going to collect information from the user. And the way that we're going to do this is by setting up input controls. And this is an HTML, one of the HTML controls we can use on our web pages. Exactly. And it's worth highlighting that there's dozens of these. That there's options for dropdown lists, there's checkboxes, there's radio buttons. And you could also, with a bit of JavaScript magic, create your own. But we're trying to keep this a little bit simpler that our main focus is on Python and on Flask and not on HTML. So we're just going to keep it real simple with our basic input controls. But I do want to highlight once again, there's MVAs where you could learn all of this if you wanted to dig deeper. Now the first main attribute to highlight is name. And this name is important because that's the name that's going to get sent up to the server. So you need to make sure that the name in your HTML form is going to match what you're going to be reading on the server. So name becomes important. And then you're going to notice right here the different options for type. And so we've got text, which is going to give us a text box. We've got password, which would give us asterisks or little dots for the letters that we type in so that way we don't see what the password is. Again, I'm going to go back to my tangent. Let's go back to tangent mode again. There we go. One big thing to keep in mind is that even though we say type equals password, it does not encrypt the text. So it just hides it on the display, on the browser. But it doesn't encrypt it when it's sent from the client to the server. You're going to need SSL again to do that. So it just protects you from somebody looking over your shoulder watching you type in your password. Exactly. Exactly. You need to get in tangent mode. Sorry. Other way. Other way. I can't get a. It's like forward slash, it's a backslash. I can't keep it straight. OK. So anyway, it's only going to put the little dots on there. The last one to mention is email. And this is one that I always get asked when I'm doing different web classes, is how do I get on a touch keyboard the at and the dot com to automatically appear on a text box when I'm asking somebody for their email address? And the answer is type equals email. And it's worth highlighting that that is a new HTML5. Yes. Right. So if you're running a really old browser, it might not work, but most browsers these days support that. Well, yeah, it wouldn't work on the touch keyboard. It's not going to bring that up. But one very cool thing is, once again, you could actually do input type equals wibble. And what it's going to display is a text box that, again, remember, we talked about the sort of the best attempt that the browser is going to do. If it sees type equals and it doesn't see something that it recognizes, it's going to go, well, it's probably a text box. I'm just going to give you a text box and just go with that. So it's just not going to put in the rest. So it'll still function, but it's not going to give you the cool little ad and the .com on that. Now, the next part is we've given you the UI to type in information. How do we get that information up to the server? We're actually going to need two things. We're going to need a submit button. And I don't have a slide on the submit button because it's going to be button type equals submit. I'll show you in a minute. But we also need to determine how we're going to send that up. And if you remember, it was get by default. So it's always going to be get by default. So when we typed in our URL, forward slash, or forward slash create, or forward slash question, it was just simply get by default. If we wanted to be post, so we want to be able to send information in the header, then what we need to do on our form, so you'll notice form and all of our input controls go inside of there, then what we need is method equals post. Now we could say method equals get and send that up. And you'll notice, for example, if you fire up bing, and you type something in that will appear inside the URL, the reason is that they said method equals get because once again, they want to make it repliable. So you could actually take a bing search result page, copy the URL, paste that in, and it will work because it uses method equals get, puts all that into the URL. Again, post is going to send that into the header. The other thing is the action parameter, and you'll notice that I don't have an action parameter in here. Nope. And the reason for that is because by default, it's going to go back to the same page. And I put that in quotes, just kind of use that kind of loosely, that if you remember, we want the ability to do create, for example. And we talked in module two about that two-step process that step one is going to be sending the user the form. The blank form to fill out. Exactly. And then step two is going to be sending that up. And we just wanted to go right back to that exact same spot because remember, again, we're going to have those two blocks of code. This is going to be get. This is going to be post. So we're just going to put all of that right inside of that one spot. OK, so let's. I'm going to clear my screen because I've got a lot of phone. So if I had a website, one of these ones where I'm ordering books or something, a lot of times on those, when you finish typing in your order and you sort of hit submit, it then takes you to enter your billing information. And then when you submit that, it takes you to shipping information. That's when those actions become important? Sort of. So the action, well, yes, actually, because if it was going to go to a different page, one of the ways to handle that would be to have different actions. So you might have one action that's going to say enter address. So I'm going to have something called address. And then I've got another one here that's maybe going to be a credit card. And then I've got another one that's going to be confirmed, or whatever it is that it happens to be. One of the ways that you can handle that is by using different actions. So if you wanted to send to somewhere else. So after you submit, give me this page, then I'm going to send you to the next page, action is one of the ways you can do that. Exactly. Yep. OK. But in this case, we're going to be a little trivia app. We're going to stay on the same page. Exactly. Exactly. Then the last step, so we figured out how we're going to collect the info. Figured out how we're going to send it up. The last step then becomes how we're going to read that information. And what you're going to notice is that there's a request form collection where it's going to look for the names on the input controls, match them up, and give me the ability to pull those in. So that's how in my Python code I can say, tell me what they typed into that form. Exactly. Exactly. And that's what we're going to be doing. So you'll notice here, input type equals text, name equals answer. Inside of my Python, it's going to be name equals. So we just declare a variable here, and then request form, answer. And you'll notice answer. And those have to match. Because I'll tell you the number of times I've made typing mistakes between those two, and said, why am I not getting a value in my Python code?  I have a typing mistake between the two variable names. I have a great memory. It's just really short. And so the number of times where I'll put in something over here, and then I go into the Python code, and I just completely forget what it is that I've done, I really do recommend either one of two things that either, A, you just do them both in tangent. So I go in, create my little bit of code, and then immediately create the form, or, B, that I go in and I simply fire up two browser windows so that way I can see them both side by side. Yeah, have the code editor windows side by side. That's why you want two monitors. By the way, if you haven't done it yet, as you get into coding one day, you're going to want dual monitors. Oh, every developer, when I take over the world, which will happen, every developer is going to have dual monitors, if not three. I have three at my desk, and I cannot imagine living without it. Every developer needs dual monitors. OK, let's go in and create a form here. And this is going to be sort of a little bit of, trust me, we're going to get you there. But I am going to sort of do this in steps. So I'm just going to create a new folder here that I'm going to call templates. We'll talk about why in a minute. And I'm going to create a brand new form here. So I'm going to say add, and I'm going to say new item. And this is going to be create a question. There we go. And whoops, I did that as a pie file. I didn't think you wanted a Python file, sorry. Yeah, yeah, yeah. You know the number of mistakes you make is always directly proportional to the number of people watching you. Yeah, you notice the moment I had a blank file, I'm like, wait a minute, it's supposed to be HTML. I don't want to type this in. Create a question. All right, so you're basically creating an HTML file, which is something that you could. OK. Yeah. So just create a new question. And then I'm going to go ahead and say, let's say H2. Please create a new question.  And I'm going to say method equals post. And you are going to notice, by the way, the IntelliSense does show me other verbs, delete, put. There's also a couple of others. The only two that we're interested in today are getting post, so post, which again, is going to send it in the header info. And then I'm going to go ahead and say div. And I'm going to, I'm actually going to get a little fancy here, because I'm just feeling like it. So I'm just going to say for equals title. And I'm going to say title. And what that little label is going to do is it's going to look for an input control with a name that matches, so you'll notice name equals title. And so if you click on title, the text title, it will automatically put the focus or put your cursor into that text box. And that's one of those little things that you should get into the habit of, because it makes it more usable with touch. Because then I can touch not only the text box, but the text as well. And these days with mobile devices and tablets, you're going to have a lot of people using your website on touch devices. So it's something, yeah, build up good touch habits early. Exactly. Yep. Yeah, really just designed for touch first.  And so this is going to be for the question and question and question. So basically what you're creating is a text box, which Yeah, you talk, I'll type. Yeah, exactly. So we've got a text box to display where somebody can enter a title to sort of and specify a category for the type of question they're going to do for a trivia app. We're creating a text box where they can type in a question that they can quiz somebody with and somewhere where they can type the correct answer. Because our goal, the final app we're going to actually be building today, it's a little trivia application where you can submit trivia questions and then people can try to answer the different trivia questions. That's exactly it. And each trivia question has a title, it has a question, and it has an answer. There it is. And so that's exactly the form that I have just created right here. Now let's create one other one real quick here. So I'm just going to go in and I'm going to say add new item. And we're going to go to the other side here. And let's go ahead and call this answer question. OK, so this is going to be the form which someone's going to use to answer a question or to be, is this going to be the one where they will be prompted with a question and they type in an answer? That's correct. OK, right. So on this page basically we're going to need to display the question that they have to answer. And we're going to need some sort of text box where they can type in the actual answer to the question that they're prompted with. That's exactly it. Keep talking. Keep talking. All right. And you can see that once again we need a form because when we want to send the results back to the server we're going to need to have a form to do that. And of course we post the completed form back to the server. And that's going to allow our Python code when it receives the form back to actually find out what they typed in as an answer. Because we're going to have to write Python code to see if they typed in the right answer or the wrong answer. And then react to that. There it is. OK, so just like Susan said, so we're creating two different forms here. This is where you're going to be able to upload questions. Now I know we haven't seen the form yet. And we'll go in and see that in a second. Actually, you know what I'm going to do. I'm going to do it this way. Watch this. I just created a basic HTML. So let me actually just go into here in trivia MVA, trivia MVA templates. So there's my basic HTML file. So let me just right click open with internet explorer. And sure enough, there is that little form that we just created. And if I hit submit answer, that would then upload it. And then the exact same thing would hold true here is if I say open with and internet explorer, you'll notice again that there is the one for creating the new question. Right, because as we said, HTML is a language that the browsers understand. So you don't once you've got it. So all we've literally done here is that here's an HTML page. You could just ask a browser display that HTML page. But then when they press submit button, there's no it doesn't know what Python code to call. That's where all this flask stuff comes in. And that's why the HTML is part of our bigger application. Exactly. Yeah, so that's what we need now. Susan mentioned a big point here, that this is going to eventually display, hey, enter the correct text for the question. You know what I need right here? I need the question. Yes, this is true. Somehow we have to, because you're right, somehow Python has to have a way of saying, here's the question to display to the user, and then we can check if they have the right answer. Yep, cool. Well, guess what? We got a technology for that. I'm glad to hear it. Otherwise we'd be in trouble. We've got Jinja. So what is Jinja? Well, I'm glad you asked. It's like a ninja template. Yes. I just love the names in this flask Python. I'm just having too much fun with the names. Oh, absolutely. Yeah, you're going to have fun with the names. So Jinja is a template language. And it, in a nutshell, gives you the ability to inject code into HTML. And that's actually why I just jumped right ahead and I just created the template folder, created a couple of HTML files, because those are basic HTML. And I am going to be able to inject my own code into there just by using Jinja. So for example, if I wanted a bit of code to detect whether or not the person was right and display congratulations, you're right, or maybe I want to go in and display, sorry, you didn't get the question right, then I can go in and do that. But here's the thing, of course. If I say sorry, you didn't get the question right, sorry. Then we're going to need to be able to display what they answered, and what the correct answer is. So I need a way, placeholders, yeah. So I need a way so that my Python code needs a way of saying, hey, when you display that HTML back to the user, can we pass some values back to display on that page? That's exactly it. That is exactly it. And so that's what Jinja allows me to do. So these templates are just HTML, nothing fancy, and they're going to be inside of a folder, wait for it, called templates. So you're putting the routes into a file called routes.py, and now you're storing templates in a folder called templates. I try to keep things as confusing as possible. Yeah, yeah. Yeah, that's it. Now, one of the interesting things is that Jinja does have a code syntax. So if you want to inject if statements and for loops and so forth into Jinja, you can, and you are going to notice that it's similar to Python, but it's not Python. Justin, just close enough to confuse you. Yeah, something like that. That if all I want is placeholders, then I can do that very easily just by using double curly. So double curly placeholder will automatically display those variables in that spot. The question is, well, how are those variables going to be set? Well, as it turns out, there's a brand new method that we're going to have called vendor template. So we call this, this is Python code, this method up here. This is Python code up top. This is the name of the template, so it's automatically going to look inside of that little templates folder for something in my case called template HTML. OK. Server abbreviating there. There we go. And it's also, in my case, going to pass in two parameters called name and called. So now when I'm saying display that page, I have a way of saying, hey, I want this name to go here. I want this value to go here. That's exactly it. That's exactly it. And you can also get in and add logic as well. So if you did want to do an if statement, you could do an if statement. If you wanted to do a for statement, which is the first demo that I had on this slide, you can do that as well. Now here's the catch is the way that control blocks work. So for loops and if statements, the way that they work is based on tabs, based on positioning. Doesn't really work in HTML because my positioning is going to change really depending on my HTML that I want to be able to format my HTML and just have a little bit of code there. So the tabbing isn't always going to come out quite the way that I'm going to want it when I'm dealing with both HTML as well as code. So as a result, we need to get a little bit more explicit here that you're going to notice that we've got end4 to end our for block. And you'll notice that we've got endif to end our if block. Now I also want to highlight the little correct there and my little names here. And those, in my case, are simulating parameters that would be passed in again by using that little render template. So if you gave me a collection of names to display, then I could display all of those. And if you give me a Boolean value, then I can react to that. Now earlier on this morning, one of the big things that we talked about was the concept of Python Flask and it being a stepping stone for other technologies.  There's an MVA for that. If you want to go off and learn those technologies, a lot of what you're learning today is going to be applicable to there. So let's take MVC, for example. MVC has what are known as views. Views in Flask terms are templates. That what they're designed to do is to display our data. So these ginger templates we're creating are kind of like views in MVC. That's exactly it. That's exactly it. And so as a result, since, again, we're just learning this, we should really start to get into some best practices here. Yes, good to pick up good habits right off the top. Absolutely, absolutely. And so as a result, what we want to do is when we're talking about a view, is keep it a view. That there's this littl