Python Website Full Tutorial – Flask, Authentication, Databases & More
- January 5, 2024
- Posted by: MainInstructor
- Category: .Net BASIC Go Java JavaScript Python SQL VSCode Web Development
Video Title: Python Website Full Tutorial – Flask, Authentication, Databases & More
Hello everybody. And welcome to another YouTube video. So in this video, I’m going to be showing you how to make a website with Python. Now, the goal of this video is going to be to give you a finished product that you can tweak and turn into whatever website you’d like. So I want
To show you all of the fundamental and important things you need to know about web development with the module that we’re going to use. So that way you can kind of take this starter or template website and turn it into whatever you want. So specifically, we’re going to cover how you
Sign up users. So how you create new users account, how you store those in a database, how you log into those user accounts, how you log out of them, and then how you associate information with a specific user. So the example application that we’re going to build here is just a
Very simple notes app. So we’re going to have it. So you create an account and then once you’re signed in, you’re able to add notes or make new notes. You can then delete those notes, and obviously you can sign out, you can log back in on whatever computer you want and you can
Have access to those notes. Now, this is really simple. This isn’t super exciting, but the point is to give you the knowledge, to be able to make something that is more exciting, right? So this is just very fundamental. Most apps that you make are going to use like 90% of the
Code that we’re going to write here. So it’s a really great starter project. It’s going to teach you a lot about web development. And again, that’s kind of the goal here. Now, keep in mind that we’re not really going to be focusing on front end too much. I have styled this slightly using
Something called bootstrap, just so that it does look somewhat decent. Uh, but this is not a front end tutorial at all. You don’t need to know Java script for this. You don’t even really need to know HTML. Although I will go over a little bit of HTML and kind of the only prerequisite
Is you have some fundamental knowledge of Python because that’s what we’re going to be using for the backend of the website. So anyways, let me give you a quick demo of what we’re going to be building here, and then we’ll actually jump into the code. So at my website running a, you
Can see that we can sign up for a new account or we can log in. So let’s, I should just make a new account. I’m going to say tim3@gmail.com is my email. My name is Tim. Let me set up a password and a password. Awesome. So I’m going to submit
That I’ve created an account. It says my account was created successfully. I’m brought to this page that says notes, and I can add a new note. So I’m going to say, Hey, there you go. That’s my note. I’m going to say, you know, second note, exclamation point. Add my note. Now I can
Delete a note and notice that it gets deleted. The other one is still there. So now I can log out. If I try to go back to the slash homepage, it’s not going to let me, because I’m not signed in, but now if I sign in, so tim3@gmail.com and I type in my
Password, we come back and we can see our notes. Now, of course, if we create another account or in fact, I think I have another account, let’s say tim@gmail.com. Oops. Oh, you should see, do we have different notes showing up here? Uh, okay. I don’t have any notes for this account.
You can see that there is no notes here, so it it’s showing differently. Um, that’s an amazing idea and that’s what I’m going to be showing you how to do. So again, nothing super exciting or super crazy, but really important stuff. And once you know this again, you can go and
Make whatever you want. So hopefully you guys are excited. Let’s go ahead and get started after a quick word from our sponsor, before we get started, I need to thank typing DNA for sponsoring this video, typing DNA as a developer’s first typing biometrics company that provides a low code authentication API that can
Authenticate users based on the way that they type their authentication API is available for free from their developer plan, which provides you with unlimited authentications and end users. Typing DNA works by recording typing biometrics data, which consists of timings and durations of various key press events. All new users will provide
Some baseline typing data when creating their account, and then that data can be used to verify their identity in the future. This allows users to authenticate their accounts without having to whip out their phone or mobile devices. Typing DNA is built for developers, provide seamless identity verification and can help catch fraudsters
Instantly. It works great as two factor or multifactor authentication. Now to illustrate this better, let’s try typing DNA’s demo. I’m first asked to create a dummy account by typing my email in a made up password. As I type typing DNA records, my typing biometrics. The next time I go to
Login, it uses this data to authenticate my login as well as typing DNA’s great API. They also have a Chrome extension that you can use as an extra security layer. Get started with typing DNA today by signing up for a free developer account from the link in the description. All
Right, so let’s dive in here. The first thing that we need to do is we need to make a folder. That’s going to store our application. So I’ve just made one on my desktop. I’ve called it flask web app tutorial, and I’ve opened it up here in vs code. Now, feel free to
Use whatever editor you want. I am using visual studio code, just my preferred one right now for this type of project. But you can use sub-line. You can use Adam, you can use pie charm, whatever you want, doesn’t matter. Um, just, you know, follow along with the steps that I’m doing
Here. So create a folder. And then the first thing we’re going to do is just kind of set up a little bit of a project, a directory, or cause kind of some structure here, just so that we have all the files to find already. So the first thing I’m
Going to do is I’m going to make a folder inside of this folder. I’m going to call it website. This folder is going to store all of the code for our website, right? And then I’m going to make a new file. I’m going to call this file main
Dot PI. And this is the file that we’re going to run. When we want to start our web server or start our website. Now inside of website, I’m just going to make a few folders. We’ll talk about these. As we get to them, the first one is going to be called
Static. And then the next folder inside of website is going to be called templates. And then we make a few Python files. Uh, and again, we will jump into what all these mean in the second. So we’re going to say underscore underscore a knit on your squander score dot PI. Now this
File right here has two underscores before the unit and two underscores after make sure you don’t only have one. And what this is going to do is it’s going to make this a website folder here, a Python. You’ll see what that means. As soon as we use the package parts of it, but
Essentially means that we can import this folder here and whatever’s inside of this. And nit.py file will run automatically. Once we import this folder and he was going to make a few more files and then we’ll be done with kind of the basic setup. The first one we’re going to do
Here is we’re going to say, auth God pie. We’re going to make another file here. We’re going to call this one model, stop PI. We’re going to use this disordered database models. And then lastly, we’re going to have a file called views dot PI. And this is going to
Store all of the main views or the URL end points for the actual functioning kind of front end aspect of our website. Anyways, that’s the basic kind of structure set up here. So make sure that yours looks something like this. And then what we’re going to do is install some
Packages. So what we’re going to do here is we’re going to use a module called flask. This module called flask. He’s just a super lightweight Python framework essentially, uh, that allows you to make websites really quickly and really easily. If you’re comparing it to something like Django, um, it’s not necessarily as powerful
And it’s not used as much in production applications, but it’s really good to know. It teaches you the fundamentals of web development and for working on something like that. We’re doing here, building an MVP or even just building kind of a small website. Philosophy is great. And while that’s
Why I’m going to show it to you, cause it’s just way more simple than Django. And you can do things a lot faster with it anyways, to use flask, we need to install the Python packages related to it. So the first thing we’re going to do is we’re gonna use PIP.
I’m just in a command line here in vs code. But if you opened up CMD on windows or terminal and Mac, you could follow along with this and we’re going to install flask. You’re going to say PIP, install flask. Now run this command. I already have this installed. So you’ll see that all
These requirements already satisfied. But what PIP will do is just install a Python package for us. Now, if PIP doesn’t work for you, for some reason, you’re getting PIP is not recognized as a command. Then what you need to do is go to the description. I have two videos, one for Mac and
One for windows that will show you how to fix PIP. Now they’re not exactly called how to fix PIP, but they will go through the steps in each video. So watch either of those depending on your operating system. And it should show you how to fix this command. Anyways, once we’ve
Done that and your pips working now, we’re going to install another module. This is called flask login. So flask, hyphen login going to install that. And there we go. Now we need one more module as well. The last one is called flask and then hyphen SQL alchemy. I think I spelled that
Correctly now. Yeah, there we go. So PIP install, flask SQL alchemy hit enter, and we’re going to install that. Now the modules we just installed or are for logging users in, as it said, and then SQL alchemy is actually a database thing that we can use. So it’s kind of a
Wrapper for SQL. That just makes it much easier for us to create database models, delete models, um, add models, whatever it may be. You’ll see, as we go through the video, but install those three things. And in case you guys get lost through this video, anything’s not working there is
Going to be all of the code linked in the description down below. Uh, so you can check that out on, get hub and you can copy all that code and everything. All right. So the first thing we’re going do is we’re going to head into our nyt.py file. And we’re going to set
Up our flask application. You’re going to see how easy it is to do this. So we’re going to start by saying, from flask import flask with a capital F like that, then we’re going to define a function. We’re going to call this function, create apps. We’re going to define, create app like
That. Now inside of here, uh, we’re going to initialize our app. So we’re going to say app is equal to, and then flask. And then inside of the brackets here underscores just your name, underscore underscore underscore underscore name. It just represents the name of the file or I believe it was actually
The name of the file that was ran. Um, so you you’ll see, but regardless, this is just how you initialize flask doesn’t really matter what this means. Just type it in the brackets. Okay. So app equals flask underground is her name underscore on her square. Then what we’re going to do after this
Is we’re going to set up one thing that we need for our app. So for all of our flask applications, uh, we have this config variable called secret underscore key. And what this is going to do is this is going to kind of encrypt or secure the cookies and session data related to
Our website. Now, if you don’t know what those mean, don’t worry about it. You don’t have to. Uh, but the idea here is that we just need to type some random string. It can be whatever we want. It could be a sentence. It could be one character, uh, that
Is going to be the secret key for our app. Now in production, you would never want to share this secret key with anybody, but since we’re just working on kind of the developer side here, it doesn’t matter. Make the secret key, whatever you want. Obviously I’m showing you mine. It’s not that
Important. All right. So now that we have that, what we’re going to do is we’re going to return this apps are going to say return app. So we have now created a flask application. We’ve initialized its secret key, and then we’ve returned it from this function. All right. So
Now that we have that, what we’re going to do is we’re going to do our main.py file, which is outside of this website folder. And we’re going to import this website package, grab that create app function that we just defined and then use that to actually well, create an application
And run it. So we’re going to start by saying, uh, from website imports and then create underscore app. The reason we can do this is because website is a Python package. So whenever you put this in nyt.py file, inside of a folder, it becomes a Python package, which means
When you input the name of the folder, it will by default run all of the stuff in the nyt.py file, which means we can import anything that’s defined in this nit dot Python, like our create app. So from main dot PI, we can use create app. So we’re going to say app equals
Create app. And then we’re going to say if underscore underscore name underscore, underscore equals underscore and main undescribed score, and then we’re going to say, app run debug equals true. Now this is as easy as it is to run a flask application. This will work. We will now have a running web server
And I’ll show you in one second. But what this line says is that only if we run this file, not if we import this file. So main dot PI, are we going to execute this line? The reason you want this is because if for some reason you were to mean
Dot PI from another file and you didn’t have this line right here, it would run the web server and you don’t want that to happen. You only want it to run the web server if you actually run this file directly. So that’s what this line means. Now, what outdoor run is going to
Do is it’s going to run our flask application. It’s going to start off a web server and it’s going to say debugging true, which means every time we make a change to any of our Python code, it’s going to automatically rerun the web server. That’s all the debug equals true means. Obviously
You’re going to turn that off when you’re running in production. Uh, but for our cases, we want that on. Cause that means we don’t have to keep manually rerunning the, uh, flask web server. Awesome. So this is like the entry point for our app. So what we can actually do is I
Need to fix my Python interpreter first. And in fact, I’ll show you how to do this in case you’re in vs code. And you’re having some issues with flask. Uh, if for some reason, you know, it’s saying flask module is not found or you, you see you can’t use flask. In fact,
I’ll show you if I run this file a notice, I get this error, no module named flask. Your Python interpreter is probably just wrong. Now it shows you the interpreter in the bottom left hand corner. If you want to change this interpreter, which is probably what you want to do, you’re going to
Hit control, shift and P on your keyboard. That’s going to open up the vs code command pallet. And then inside of here, you’re going to type Python and then select interpreter. And you can select your Python interpreter. So the one that I want to use is 3.8 0.3. Again, this is gonna be
Specific to your local machine in the Python interpreters you have. But now that I select the correct interpreter, notice a change down there and I can run this file. So now that I run this file, we get some output down here, which is saying, this is a development server. Do
Not use this in production, blah, blah, blah. And yeah, Ms. Pretty much says, Hey, your website is running. So now if we want to access our website, we need to go to this URL right here. So one, two, seven dot Oh one port 5,000. So what I’m going to do is
I’m going to control and click on that. That’s specific to vs code, and it’s going to open up this. So it says the requested URL was not found on the server. If you enter the URL manually, please check your spelling. That’s fine. That’s actually good. That means our web server is working. It
Just means that we don’t have any roots or a homepage or anything for our website. So that’s what we need to next. So what we’re going to do now is we’re going to create our first website routes are yeah, I guess our first website route. So we’re going to go to this views.py
File. And inside of this file we’re going to do is we’re going to store the kind of standard routes for our websites. So where users can actually go to. So say the login page, say the homepage, all of that kind of stuff. Actually the login page story is going to go in
Off because that’s related to authentication, but anything that’s not related to authentication of the user can navigate to, we’re going to put it in this spot. So what I’m going to do is I’m going to start, uh, by importing flasks. So I’m going to say from flask import and then blueprint like that,
And then I’m going to import, uh, one more thing as well, actually. Uh, we’ll import it later. I don’t need it right now. So we’re going to say from floss in port blueprint, now what we’re going to do in here is we’re going to define that this file is blueprint of our
Application, which simply means it’s has a bunch of roots inside of it. It has a bunch of URLs defined in here. That’s literally all that a blueprint means it’s just a way to kind of separate our app out. So we don’t have to have all of our views defined in one
File. We can have them defined multiple files, split up and nicely organized. That’s what blueprints allow us to do. So inside of this file, we’re going to start by defining the name of our blueprint. So I’m going to say views is equal to blueprint. Now you don’t need to name this
The same thing as your file, but it’s usually easier. It just keeps it really simple. So I would recommend you do that. So I’m saying my views blueprint. Well, it’s called views now inside of blueprint, I’m going to just define the name of my blueprint, which I’m going to call the
Same thing as my variable. Again, you don’t have to call it this, but it’s much easier just to call it the same thing. So I’d recommend that. And then after that, you’re going to say, I’m just going to screen name under scrunched square. That’s all you need to
Do. We’ve now set up a blueprint for our flask application. So you can ignore the name thing here, if you don’t understand what that means. Uh, but that is how you define the blueprint. So now what we’ll do is I’m actually going to copy all of this. I’m going
To go inside of my author PI file. I’m going to do the exact same thing, except instead of views, I’m going to call this off. So now I’ve defined a views, blimp blueprint, and an auth blueprint. And both of these will have different views or different URL story defined inside of them.
So let’s go back to views and let’s define our first view. So to define a view or a routes or whatever you want to call it in flask, what you’re going to do is you’re going to say AFT, and then the name of your blueprint. So in this case, it’s called
Views. If we were an auth, we would say at auth, and then we’re going to say dot routes in inside of the function here inside of the, uh, the brackets. We’re going to put the URL to get to this, uh, this end point or I guess yeah. Like whatever the root is
Going to be. So in this case, we want to define for the homepage, uh, this is the route so slash, and then we’re going to define a function under here. So we’re gonna say define home. Now, I should’ve done this before, but the point of this function is that this function will run
Whenever we go to the slash route. So whenever we go in our URL and we just type in slash, so we go to the main page of our website, whatever’s inside of home is what’s going to run. So that’s the way that you can make this work. You define a function, you
Put what’s called a decorator above it. You define the roots, and then whenever you hit this root, it will call this function. So inside of here, we’re going to do something really basic and we’re just going to return some HTML. So we’re going to return the H one tag, we’re going to
Say test, and then slash H one. What this will do is just return test as an H one tag, uh, it will render this on the website when we go to the slash route. So that’s as simple as it is. Of course it will get more complicated. This is how you make your
First re so now we have these blueprints to find, but what we need to do is register these blueprints in our NYT dot pot. So from our app, now we need to tell floss that, Hey, we have some blueprints that are containing some different views for our application or some different URLs for
Application. Here’s where they are. So we’re going to start by importing these files. So we’re going to from dot views imports, and then we’re going to import the name of the blueprint, which is views. So if I go to views, uh, you can see, this is what we’re importing this variable
Right here. Okay. So let’s go back now. We’ll do the same thing from auth. So we’ll say from.off, import off. All right. So we’ve got our blueprints imported. Now we’re going to do is register them with our flask application. So we’re going to say app dot, registered blueprint, and then we’re going to
Put the blueprints like that. And we’re going to say, you are L prefix is equal to, or we’re just going to leave this at slash so let me copy this and I’ll do the same thing with auth. And there we go. We’ve registered our blueprints. Now the URL prefix is saying
All of the URLs that are stored inside of these blueprints file. How do I access them? Do I have to go to a prefix specifically? So I’ll just show you with an example, because this is the easiest to explain it. If I’d put slash off and then say, slash here or off slash
Doesn’t really matter. And then what would happen is I would have to go to auth and then slash, and then whatever the name of my views inside of here were. So if I defined off dots, a view like that, and, or, sorry, not view dots, routes like that. And then I
Put inside of here, let’s say, hello. If I wanted to access this route, since I define the URL, prefix as auth, I would have to go to slash author slash hello. So anything inside of here will be prefixed now by whatever I define as the URL prefix. So I don’t want anything for
The prefix. So I just leave it as slash which means no prefix anyways. Uh, hopefully we got that. So those, that is how you registered the blueprints. Uh, obviously if you had more, you would register all of them and you can change the prefix according to what you have. But now
I’m going to rerun the web server. So you can do that by just running this made up PI file. Uh, I just did it NBS code with a shortcut, but non-important, and now if I run this notice that I get tests, so I’m getting tests because I went to the slash route. So
I just went to the homepage of my website. And then what happened was we hit this function right here, and we returned to this HTML, which was test. And we showed that on the webpage. So that is the most basic way to make a route. Now I will show you how to
Make a few other routes and we’ll do it inside of auth dot PI. So inside of author PI, we’re going to define our login, uh, log out and our, uh, what was the other one we need sign up. So we’re going to say off dot route, we’re going to say
Slash login like that. And then we’re going to define a function, call it whatever you want. But I usually just call it the same thing as the route. So login, and then here, we’ll just return some let’s go P tag. And this is going to say login like that. Now we’ll define
Another route. So say off God routes, we’re going to call this one slash a log out. I’m going to say, define log out. And then what are we going to return? Well, whatever we want, but I’ll just return a P tag that says login. Okay. And then lastly, we’ll define our
Signup. So auth dot route and then slash sign hyphen up and then define sign underscore up and inside of here, we will return P tag that says sign up. All right. So there we go. We have now defined our three routes. So now if I rerun the server, just you’ll notice that
The server will crash. If you have syntax errors in here. So sometimes you do need to rerun it, even though you have debug equals true. And in fact, to show you if I, if I saved this, notice how the server automatically reruns, that’s what debug equals true does. Uh, but yeah, it’s
Sometimes you have syntax errors. You just have to re restart the server manually. So now that we have this, if I refresh test is working, I can now go to slash sign. Did I do sign hyphen up? Uh, yep. Sign hyphen up. So that brings me there. I
Can go to login. We see we’re at the login page and I can go to log out and we see we’re at the log out page. So clearly our routes are working. That’s the most basic part of floss, how you set up your routes and your URLs. All right. So now
That we have our URL set up, what we want to do is want to start making our pages look a little bit nicer, right? So I don’t really want to just show, log in, log out, sign up. I want to show an actual page. So how do I render some real
HTML from an HTML file? Because it doesn’t really make sense for me to be, you know, putting all the HTML and the string in Python. We’re not going to do that. That’s not scalable for our app. So now what we’re going to do is we’re going to go inside of this
Templates folder. And this is where we’re going to put what we call our HTML templates. So in flask, a you could call them HTML documents. Doesn’t really matter. Uh, when you rent your HTML, you call it a template. And the reason you called a template is because there’s a special templating language
That you can use with flask, which is called Jinga. So J I N J a, I believe that’s how you spell it. This templating language allows you to write a little bit of Python inside of your HTML documents. Now, this is really useful because this means that you don’t need to know
JavaScript. And you can say render all of a user’s notes without using JavaScript. You can display user information without using JavaScript. You can do a bunch of stuff without using JavaScript based on this templating language. Now you will see how this works as we really get into this. Uh, but let me
Start by defining a new file. I’m going to call this base dot HTML. So typically when you make templates, what you do is you define a base template. They can think of the base template as like the theme of your website. So whatever you have in this base template is what your entire
Website is going to look like. So usually a NAF bar, maybe a footer or a header or something like that. And then what you will do is you will override parts of the base template with more specific templates. Now, I know this is confusing because I haven’t shown anything yet, but the
Idea is that we have one section of the base template, which is usually the main content on the page. And what we’ll do is we’ll let our other HTML documents override that main content. So everything else stays the exact same, except the main content of the page will change based
On what page we’re on. So when it was, let’s just start typing out our HTML document. And this is a lot of, um, stuff that you’re going to probably have to copy, especially the style sheet and the JavaScript and all of that. So do go to the description and open up
The get hub. Uh, you can type along with me if you want, of course, but it might be a little bit easier just to, uh, what do you call it? Just to copy some of this stuff, because I can’t really type all of it out. And he was, we’re going to
Set up our HTML tags here after our doc type HTML, I’m going to start by setting up a head tag, and then we’ll set up a body tag. So let’s say body and body, if you’re unfamiliar with HTML, this is just standard practice. You need a head tag, which has like metadata related
To the website. And then you have a body tag, which actually has the HTML for the body of the website. So the first thing we’re going to do inside of our head tag is we’re going to find a meta. So we’re going to say meta, and then Shar set equals UTF eight. So
Just defining the character set that’s used for this document, then what we’re going to do is have another meta. I’m going to say meta, and then name equals viewport. And we’re going to say that the content is equal to, and then with equals device hyphen. So pretty much just saying, take up the
Entire width of the screen. And then after this, we’re going to have a comma. We’re going to say initial hyphen scale equals one. Now I’m not going to explain this because this is not a tutorial on HTML. You’re welcome to look that up if you want, but these are just standard things
That you almost always have in your head tag. Then what I’m going to do is I’m going to import, what’s known as bootstrap. Now, bootstrap is a CSS framework that has some built in classes that just make it a lot nicer to style your website. Again, this is not a tutorial on front
End or bootstrap, so I don’t want to get into it too much, but what this is right here is a link to what’s called a CDN. Now a CDN is a content delivery network. Uh, and what that will do is it will allow you to actually load without downloading the file, a
Bunch of custom CSS and JavaScript. Now, in this case, we’re just loading CSS. And we can tell that because this is defined as a style sheet and this style sheet will contain a bunch of classes that we can use for our HTML elements, just to make them look a lot nicer.
So what you need to do is just copy this again. You can get that from the code link in the description. You’re also welcome to not use this. Everything will still work. If you don’t have the CSS, it’s just not going to look as nice. So we have the two CSS things
Defined now. So we’ve loaded our style sheet and we’ve loaded bootstrapped. Now what we’re going to do is we’re going to have a title tag and inside of this title tag, I’m going to show you the first thing that you can do with Jinga, which is the templating engine. So I’m going to
Define two brackets like this, and then 2% sense. Now, whenever you’re using Jenga, you have a few different kind of syntax options. So when you’re writing a block where you’re writing some Python, syntax, like a for-loop or an if statement, you usually put them inside of this. So you
Have a open squiggly or whatever you want to call it, squiggly bracket, brace, then percent sign, and then present sign, and then close squiggly brace. Now, inside of here, you can define a bunch of different things. So you can actually write an if statement in here, uh, you could write what else a
For-loop, uh, you can write an expression that you want to evaluate, or you can write what’s called a block. So I’m going to say block title. And what this means is I’m defining a block in this base template that can be overridden in a child template. So what’s kind of going to
Happen is our children template are going to inherit this base template and any blocks that we’ve defined inside of this base template, they’ll be able to change. So for example, the title of our website, we obviously want them to be able to change this. So we’ll say block title, and then we’ll
Say N block inside of this title tag. And what this means is now we might child template. I can define this same block. And when I define this block, anything that I write inside of it say like home right there, um, will override whatever is inside of here. So if in my child
Template, I wrote, say, sign up or log in as a, as the block title, it would override what is inside of here. So it would remove home and then it would put whatever I typed, um, will make sense as we actually get into the template. But this is kind of how you
Define blocks and what I mean by having templates that you can reuse in and defining a base template. All right. So now that we have finished the head, let’s go to the body. We’re going to define a navbar and then what we’re going to do after that is load a bunch of
Scripts. And in fact, I’m going to load all of the scripts first. Uh, so let’s load all of these. You’re going to have to copy these cause I can’t type them all out. And what this is going to load is the JavaScript related to what do you call it here? Bootstrap, the
CSS framework. So bootstrap has some like fancy animations and some just like cool button presses and stuff, uh, that use JavaScript. Uh, so what you need to do is load in these scripts. Again, just take that from the description, from the code. So this, we load at the bottom
Of our body tags to make sure it’s at the very bottom, all other HTML, you’re going to put above it. Now let’s say you’re somebody who wanted to write your own JavaScript. First of all, what you would do if you want to integrate your own JavaScript into this, and I’ll just cover
This quickly, cause I know some of you will want to do this is you will put a JavaScript file inside of the static folder. So any assets like images or JavaScript files or CSS, things that are static that do not change you put inside of the static folder. So again, images,
JavaScript or CSS files you have to put inside of the static folder. Now, once you put them inside of the static folder, you can load them in your HTML by doing something like this. So this is the script that you would write to load in a file called index dot JS
From this static folder. So what you do is you write these two squiggly brackets, which is another thing in Jinga and I’m going to cover this in one second, you write URL four, then you put the name of the folder, which in this case is static. And then the
File name that you want to load, which is index dot JS. Now what this URL for function does, this is actually a Python function. Okay? It we’ll see it in a minute. Is it loads the URL for the static folder? So it just finds that on our website. That’s what it
Does. Now. These two squigglies are squiggly brackets. I keep calling them squigglies. What this means is that we are going to write a Python expression. So whenever I have two squigglies like this or this pretty much means we can write a variable, we can write a function, we can write some kind of
Python expression that will be evaluated. Now there’s some rules for the type of Python expression you can write in here, but that’s the idea behind these two squiggly brackets, whenever you have them. So you can write some Python expression that will be evaluated. So when I put that inside of
Here, it will evaluate this and there will be some string that is actually source and that’s a string will represent the file name, index dot JS. So if I made index dot JS here, it would load this file. So I put any JS that I want inside of here. And it was
Enough on that. I apologize about talking about for a long time. Okay? So now that we’ve done that what we’re going to do is go inside of the body. I’m going to decide we’re going to define a navbar. So we’re going to create a navbar. So we’re going to say, now
We’re going to say last is equal to, and then navbar and then navbar hyphen expand hyphen LG. Now these are all bootstrap classes. If you want to see how exactly these work and why I’ve picked them, you can go to the bootstrap website and you can look up now
Bar, you can look up a bunch of different things and it shows you a bunch of really detailed examples of how to create this stuff. So I haven’t come up with this. I’ve just taken this from the bootstrap website and this will create a nice kind of gray. Now, as far as
You saw, so now we’ll say it now, bar hyphened, dark, so changed the color of the nav bar and then BG, hyphen dark to make it dark. Alright, so now we have a navbar defined, uh, that’s as easy as it is to make one. And now we have to
Put some buttons on our NAF bar. So the first thing that I want to put is actually a button that will allow us to expand the nav bar if we’re on a mobile device. So let’s say that our screen is really small and we can’t fit all of the
Navbar items on the nav bar. Then what we need to do is have a button that can expand the navbar. So we actually see all of the different buttons. So that’s what this is going to do. Then I’m going to define here. So I’m going to say button, and then I’m
Going to say the class is equal to toggle, uh, sorry. Nav bar hyphen toggle. So pretty sure forward is going to toggle the nav bar. We’re going to say the type is equal to a button room to save that the data hyphen toggle is equal to, and then in a string, we’re
Going to say collapse. We’re going to say that the data hyphen target is equal to, and then we’re going to put a pound sign, which stands for the ID of something. And then we’re going to say Navara, because the idea of our navbar, uh, which we will define in
One second is going to be called NAF bar. Anyways, we have Navara like that’s then, uh, there’s some other things that we could add, but actually I think this is fine for now. Okay. So data toggled data target. Okay, now that we have that, what we’re going do is we’re going to
Close the button tag, so slash button and inside of here, we’re actually going to put the icon that we want to use for this budget. So we’re going to say span class equals and then navbar hyphen Toggler hyphen icon. And then we’ll just end the span. Uh, I guess
We can just do like that and this FinTech. So what this will do is this is just going to load an icon for us. And then since it’s inside of the button tag, that’s what will show up when we press on this icon, it will toggle the button. So
When you save a, you should see that it auto formats for you. If you’re not getting auto formatting and vs code, uh, go to the vs code marketplace, which is just this thing, bill cubes here, and install an extension called prettier. Uh, if you install this, you won’t even, I think you just
Need to reload vs code after you install it. And then when you save, it should automatically format the document for you so that you don’t have to deal with all the indentation and all that stuff. Okay. So now that we have that, let’s define the navigation items in our
NAF bar, we’re going to make a div and we’re going to say, div class is equal to, and then collapse. And then navbar hyphen collapse. Then we’re going to say the ID is equal to NAF bar. So what this is saying is that we’re going to have a collapsible navbar,
Which I will show you once we actually build it. And then we’ll define the items that we want in this collapsible nav. Never. So let’s define a, another div inside of here. So I’m going to say div class equals and then nav bar hyphen nav. So this is the actual navigation items
We’ll end the div. And then inside of here, we’ll define the items that we want. So I’m going to say eight, which is just a link I’m going to say, class is equal to, and then nav hyphen item, and then nav hyphen link, meaning that this actually links to something. I’m going to
Say the idea of this is login. And then you can guess the H ref. So where this is actually going to redirect us to is slash login. So that’s eight, four eight, and then we will say login and we will close the ATEC. All right. So now let’s copy this. Uh,
And let’s put this a few times. So we have a login. The next one we want is sign up. So we’ll just say the ID of this is sign up or maybe we’ll just do camel case there. And then the page would want to redirect to his sign hyphen up. This is
Going to be called son. Okay. After that we want home and we want log out. So let’s put, log out here. Let’s just change this to log out and log out. And then lastly, we will do home. So home, home, and then we can simply just put slash because that is our homepage.
All right. So now we should have a navbar. So our server is still running. So make sure yours is running. You may have to rerun it. And if we go and we refresh the page while we don’t see anything for log-out and we don’t see anything for slash right that’s because while we’ve
Defined this HTML document, but we haven’t actually used it. So now that we’ve defined this, we want to use this document. So this is a template. Remember we defined this as a template. And what we need to do now is actually defined some HTML documents that can use this template because yes,
We can actually render this template, which I will show you in a second, but I want to show you how we use this template, because the whole idea was this is going to be the base template of our entire website. So I’m going to define another template here or another HTML document.
I’m going to call this home dot HTML. Now, inside of here, what I’m going to do is show you how we extend this template. So remember we have this block here, this, this title block, and inside of home, what I need to do is I need to extend this base template. So
I’m going to write the two squiggly brackets and then percent percent inside of here. I’m going to say extends and then base dot HTML as a string. What this means is that this template right here is going to be the exact same as based on HTML. And I can override any blocks
That were defined inside of base dot HTML. So I can take this block title and I can put this right here. And now if I define set of home, we’ll actually sorry, this, this should be home, but let’s just make it a change that we can see that this
Did actually work. If I make this change. Now, this is simply going to override the title block from based on HTML, but everything else will stay the exact same. So now let’s go into views dot PI and let’s actually render this template so that we can see it on the screen. So whenever
We want to render a template, what we do is we need to import the render underscore template function. And from our views function, we’re going to return render template. And then just the name of our template. So we don’t need to do templates slash or anything like that. We just do home
Dot HTML, which is the name of our HTML template. And now when we go to this page, it’s going to render the HTML inside of home dot HTML. Uh, now knows a few more things that you can do with templates, which we will get to in a minute, but that’s the
Basics. So let’s run this and let’s refresh and notice we get some navbar, uh, that is collapsible. Now this icon does not look exactly how I wanted it to look, but notice that when I press this icon, all of the, uh, the roots are popping up. So I’m going to
Have a look and see what I’ve messed up here, because this should not be looking like this right now. So there’s definitely a change or something that we made a mistake with. So I’ll be back after I look at that. All right, so I was able to fix it. It was
Just a few typos. Um, you guys probably saw them when I did them, but first online, 23 here in the, in the HTML I had navbar toggle. This should be navbar Toggler that’s the class. That’s why this was looking all weird. And then inside of here online 30, I had spelled collapsed
Wrong. So just make sure you spell everything correctly. I had collapsed in the nav bar and then I had the a and the P mixed up. So they were like that. So obviously it wasn’t working because well, everything was spelled incorrectly. So I spelled clubs correctly. Now, spelled Toggler correct. And
Now we should be good to go. So now let’s load the website here, uh, and you can see that as soon as my page gets really small, it shows me this button, and then I can expand the navbar to see everything. And then if I make it large enough,
I can see all the items on the nav bar. Now also look at the title of our website. Up here. It says changed. The reason it says change is because we loaded not the base dot HTML template, but the home dot HTML template. And we override, uh, overrode this block
Here, and we called it changed instead of a home. So that’s it. That’s how you render the template. Now let’s add a block into our based on HTML template. I want to add it right under the NAF bar that we can override to actually put content on the screen. So what I’m
Going to do here is I’m going to make a div, I’m going to say div, and I’m going to say, class equals I’m going to make this a container. And the container will just make it such that the content is kind of floating off of the border of the
Screen. It just, it, it doesn’t center it, but it just makes it so there’s a little bit of padding between it and the navbar and the, the edge of the screen. And then inside of this container class, what I’m going to do is I’m going to find a block
And I’m going to say, block content, you can call these blocks, whatever you want. So name them, whatever you want. Doesn’t have to be content. And then here, I’m going to end the block. So now anything that I put inside of here would show up on the screen if I rendered based on
HTML, but it also allows me to override anything in here. So now if I take this block and I go to, and I just saved, and you can see that, where did that put that? Oh, it’s just all in line here. I, if I go to H uh, based study what am I
Saying inside of here? Now I can add an H one tag and I can just say, this is the home page. So now that I do this, you’ll see, as soon as I refresh here that we get, this is the homepage showing up on the home page. So now
If I go to log out, notice that the template is not here, because we still are just rendering the HTML for log-out. Uh, but that’s how this works. So that’s how you deal with templates. And hopefully that was somewhat informative. All right. So now let’s show how we can actually render the
Template for all of our views. So we have our homepage, but if we go to author PI, we don’t want to show all this boring HTML. We want to show the template for login for log-out enforce sign up. So let’s create two more templates. Let’s make one called login dot
HTML, and let’s make one called signup dot HTML, and assign under scrub dot HTML. Now we’re not going to make one for log out because when you actually press that button, it’s just going to redirect you somewhere else. There’s not going to be like a page that it shows. Uh,
I was just doing that for example, but you get the idea. So let’s go to our home dot HTML. And once it literally just copy all of this, first of all, let’s make the title, correct. And home dot HTML, and now for sign up and for login, I’m going to paste these
In. So we’ll start in login. We’ll just change the name to say login. And we’ll say, this is the login page. Very good. Now we go to sign up. We can change this to sign up and change this to this is the sign up page. Great. So now that we
Have that, let’s render these templates. So let’s go to author PI let’s import render template, and let’s use it. So now let’s say render underscore template, and what template are we going to render the log-in dot HTML? We can copy this and do the same thing for sign up. And
Now we will render sign, underscore up dot HTML. All right. So now that we’ve done that let’s load, so let’s refresh, let’s go to sign up. This is the sign up page. Let’s go to login. This is the login page, and there you go. And that is the basics. So now that
We’ve talked about that, we understand how to use templates. Let’s now discuss how we can actually pass it values to templates. So one of the great things about this Jenga templating language is that we can pass a variables or values, right? To all of these templates. And then what that will do
Is we can actually use those values inside of the templates. So let’s say I want to pass. Um, like it’s hard to give a good example right now, because we don’t have anything meaningful to pass, but I’m just going to show you how we can pass a variable to say log-in
Dot HTML from our backend right here and how we can display it on the page. So on log-in dot HTML, what you can do here is you can quite simply write any variable name that you want. So it doesn’t matter. Hello could be ARG, could be string, whatever, as
Long as it’s a valid variable name type, whatever you want. Uh, so let’s just go with texts and then I’m going to say, that’s equal to set it equal to whatever you want. So I’m going to set the SQL to testing. And now that I’ve done this inside of my login dot
HTML template, I can access the variable text. So if I go too long and dot HTML, what I can do is I can use my fancy squiggly brackets that denote I’m having a Python expression inside of here, and I can type the name of the variable that I’m expecting to be past,
Which is text. So if I do this, what’s going to happen now is whatever is passed to this template with the value text. So again, text equals testing will show up here, uh, oops, uh, in the squiggly brackets are where they’re located. So if I run this now and we use a refresh,
We see testing shows up. So this is how you pass a values to your templates. You simply define them as some variable and, and literally just type it out like this. So text equals testing. There was a few other ways to do this. I’m not really going to go through all
Of them, at least right now, but we can also pass multiple variables so I can pass text and I could pass. Um, you know, user is equal to, and then I’ll pass Tim. So now that I’ve passed this, I can go to my login template. And after this, I can just say,
Use it now that I have user there. If I run this, we get testing and then we get Tim, right? So I can just show the user. Now I also could do something like user plus, and then S now what this will do is it will interpret whatever the user variable is, plus
The string ass. And it will display that. So now we get Tim’s right? So there is a limitation to what you can do inside of here. You can’t do everything you would do in regular Python. Uh, but for the most part, you can do like some basic expressions display variables, and that’s
What makes this templating language really useful. So that is the basic, um, for that. Now let’s show one more thing with templates while we’re at it. Uh, I want to pass a variable here and we’ll just call this bullion and we’ll make this equal to trick. Now I’ll show
You how we can actually write an if statement inside of our template. So if we want to write an if statement, uh, which we’ll do here, let me just move the block down, uh, to write an if statement, we do the percent type of block. And then we say, if, and then
Whatever variable we want to check, or whatever expression we want to check. So in this case, I want to see if the Boolean variable is equal to true. So if bullion is equal to true, then what I can do is underneath this block, I can write out what I
Want to do. I’ll just say, yes, it is true. And then to end my block, I can say an block like that, or, sorry, not and block, but NDA. So this is how you write an if statement a you do the percent kind of thing you say, if whatever the expression is you
Want to check then, and the percent thing, and then you write whatever inside of here, you want to display. If this is true or whatever you want to do, if this is true, and then you have the end if to signify, Hey, I’m ending this if statement, because obviously we can’t use
Indentation to do that. So now if I refresh, we’ll see that, yes, it is true. But if I change is bullying equal to false. So let’s do that. You’ll notice that when I run this, nothing shows up because that condition was not true. So that is how you write an if
Statement, if you want to do an, if else, then you can do this. You can say else, and then you can say, no, it is not true. And you don’t need to write like end Ellis or anything like that. You just have an end if at the very end of all of the
Statements, and now let’s run this, we have, yes, it is true. And if we change this to false, just to get into the L statement here, we see, no, it is not true, right? So that is how that works. That’s how the if and else works. Now, I hate the formatting by
Default for, uh Jinga and here it is kind of difficult to read, but hopefully you get the idea and that’s how you write if an Ellis I’ll show you four loops later, uh, and then you can do an ELs if as well, I may be incorrect on this. I should probably look
This up, but it’s percent percent. And I think it’s either LF or else, if all right. So it looks like it actually is just LF. So if you say L F and then wherever the other condition is, you want to check, uh, then this works and then if you didn’t have analysis,
You would just have the end if at the end, but the end, it just goes to the very end of all of the statements. And this works just like regular pythons yet, if Elif else, or as many LFS as you want, again, you don’t need the Elif. You don’t need
The Ellison. And if it goes to the very end, anyways, let’s get rid of these because I don’t actually want these. And I that’s just what I wanted to show you how you pass values to the template. All right. So now we’ve learned about templates. We know how to pass values to
Templates. We know how to do template inheritance. We know how to use expressions and all of that inside of the templates, let’s now create our actual sign up templates. So I want to actually make the form here, because if we design this, then we can start working on the backend and we can
Actually, you know, create the user account and work with databases and all that interesting stuff. So we need to build this form out. So, first of all, we have our blocks defined. Now, inside of our block content, we’re just going to build an HTML form. So we’re going to say
Form, we’re going to say method equals post, which means when we submit this form, send a post request to the backend. Uh, you don’t have to know what that means yet, but I will discuss post gets and all of that. And anyways, inside of here, let’s start by having an H three text.
Let’s say H three, let’s say a line equals center. We want this to be in the middle of the screen and let’s end our H three tag, and then let’s say, sign up. So now we have a header for our form that says, sign up. Now I want to have a div.
So I’m going to say div, the class of this is going to be equal to form hyphen group. This is just a bootstrap class that we can use. I’m going to end the div and inside of this div, I’m going to start putting my fields. So I want an email address,
A first name, a password, and a password too. So like your password confirmation. And that’s what I want for my signup forms. So email first name two passwords. So let’s start by defining a label. Let’s say, label. This is gonna be for our email. Uh, you just would set this
Equal to the class that you’re going to use for the input field, which you’ll see in a second, let’s end our label and let’s call this one email address. All right, now, inside of here, I’m going to find input fields. So I’m going to say inputs. I’m going to say type
Equals email. I’m going to say class equals and then form hyphen control. Again, this is another bootstrap class. You can look up all these classes from the bootstrap website. I’m going to say the ID equals email. I’m going to say the name equals email notice. There’s a lot of stuff to type
Here. And the place holder is equal to enter email, uh, like that. Okay. And actually, let’s go lowercase B answer email. How many times did I spell it incorrectly. All right. So now we have our input field. Now what you need to make sure you do here is you need to define a
Name. The reason you need to define a name as well as an ID. And in fact, the ID is optional, but you should add it because then you have your label linking with your input field, which is what you want. But what the name will do for us is this is actually
What the attribute is going to be called. When we pass the information in this field to our backend, now there might be confusing. But when we submit this form, it’s going to bundle up all of the information in here. It’s going to use all of the names of these fields to
Represent them when it actually sends this information to the backend. So we will be able to access the email address by whatever its name is defined as. So make sure you define these names, uh, and then that, you know what these names are. So now that we have our first form group defined,
We’re going to copy this and let’s do the next one. So we have the same diff called forum group, except now we don’t have an email. We have a first name. So we’ll just say first name like that. Change the type to not be email, but just to be text. And then the
Class will stay the same. The ID will go to first name. The name should always be the same as the ID for our purposes. We’re going to say first name, and then we’ll just say, enter your first name. All right. Awesome. Let’s copy this one and now let’s do the
Passwords. Okay. So I just copied it twice, cause they’re going to do two, two passwords. So we’ll say for password one, the label is going to be password. The type is going to be password. The ID is going to be password one and then the name is going to be
Password one. Okay. And then for here, we’ll just say enter password. And then actually we should probably just copy this one because all we’ll have to do is change password one to password two. So now a password, I’ll just say confirm as the label will say, instead of password one, this will
Just all be password two. And we’ll just say, and so maybe instead of enter password, maybe we should say confirm password. Awesome. So now we have our sign up form created. So now the last thing we need to add is a button. So after this day, I’m going to add a brake
Line just to separate the button. And then what I’m going to do is I’m going to say button type equals submit class equals, and then VTN, BTN, hyphen primary. This is going to make kind of a nice blue button. Uh, and again, these are bootstrapped classes that I’m using and I’m
Going to say, submit and then slash button. So there we go. Now we have that defined if we go to our website and I was just looking up the Jinga syntax before you can see that, and I go to sign up, notice this is the form that we get. So it looks pretty
Nice. And if I press submit, uh, you’ll see, we get something popping up. Don’t worry about that right now, but this does indeed work. And we have our form now just to be really clear here. Uh, the reason why I can use all these bootstrap classes is because my base template, which
I’m inheriting from has all these links, right? So I’m linking to bootstrap. That’s what we did in this first step. So when we added all these links and we added all these scripts, that’s why I’m able to use all this nice fancy stuff. So I just want to make sure
That’s clear. I, in case I skimmed over that and you guys are wondering, you know, how it looks this nice. It’s because we’re using a CSS framework called bootstrap. Again, this is not focused on front end. Um, I just wanted to show you or to just talk about what bootstrap is for a
Second. Okay. Now we have sign up. So you know what, while we’re in our HTML and, and we’re going through and doing all this, let’s just do the login because it’s gonna be very similar to sign up. In fact, let’s actually copy this entire sign up form. Uh, and we’ll just modify it
Slightly in login. So for login, let’s replace all of our content here with this form. And now let’s remove one of these passwords, cause we don’t need two passwords obviously, and let’s remove first name and we should be good. So now we have email, uh, and we have password. We’ll change
The name instead of password one to just be password. And there we go. And then we will change the, uh, the signup field here to be a login. There we go. And email, that should be all good. So I think that’s actually all we need for the log in field and trying to
Think of there’s anything else we should change, maybe we’ll change, submit to login. And that should be our login page. So now that we have that let’s load the login pinch and we can see this is what our login page looks like. So looking nice. Awesome. That is great. Okay. So
Now that we have that we’ve done most of the HTML that we need to write. I hate writing HTML, but we just, we do have to do it. Uh, now we can actually go to Python and we can start handling this form. So notice actually, let me go back to the website
Here. When I press login or I go to sign up and I press submit, we get method, not allowed. This method is not allowed for the requested URL. So this is a great point in time to talk about HTTP requests. So when we’re talking about websites, uh, we use something called HDDP,
Right? Which I believe is hypertext transfer protocol. I think that’s what stands for something like that. And anyways, HTTP, there’s a bunch of different methods that you have with them. So you have a get request or a get method, a post request, or a post method, a put request
Or a put method, and then delete. And then there’s a few other ones as well. There’s an update method. And some more now all of these methods can be used for whatever you want. But the point of these methods is so that you can clearly distinguish between what type of requests
Are being sent to your website. Because what really happens here, right, is when we go to something in our URL address bar, we hit some end point or some function or some route on our server, right? And in this case, our roots, our log in log in, log out, sign up,
Uh, you know, home, all of that. Now these routes need to know whether we sent them a get request or whether we sent them a post request or whatever it was because based on the type of request they’re going to do something differently. Now, typically a get request is when you’re
Just loading a website. So when you’re loading a webpage or you’re retrieving information now, in our case, when we go to this webpage, we’re retrieving the HTML that represents this page. Now a post request usually means that you’re making some kind of change to a database or some kind
Of change to the state of your web state of the state of the system or whatever it may be. So we would post the fact that we are signing in, or that we are signing up. And when we post, that means we are sending a post request with all of the information in
Our form. So if I go here and let’s go to sign up, the reason why we were getting that error message is because when we hit this button, we are actually by default because we defined a method equals post. Let me find this inside of our form, we’re going
To be sending a request to the URL that we’re currently on. So to sign up, that is a post request that has all of the information here. So the email address, the first name and the two passwords that we typed in, it’s going to send that to our server. So our server
Needs to interpret that and then respond to us or do something based on that post request. So hopefully that’s clear, but those are some of the main HTTP methods. And that’s kind of how they work. A get request is retrieving information, a post request is updating or creating something. And then you have
Update, delete, put a bunch of other HDP requests, which we’re not going to use in this video, but you’re welcome to look up and are pretty straightforward in how they work. So let’s go now and let’s make sure that we can actually accept this post request. So if I go to,
Uh, views dot PI or sorry off dub PI my bad, now, what we want to do is we want to make sure that log-in and sign up, are able to accept post requests. So to do that, we need to define something inside of our route. It says methods
And is equal to a list. And inside of here, we’re going to write the strings for the type of requests that this route can accept. No, by default, we can only accept get requests. But now when we add get, and we add post here, we are able to accept, get, and
Post requests. So let’s copy this, let’s put this to sign up. And now what this means is we are able to, uh, get and post requests from both of these routes. So if I go and I refresh and I press submit, now notice that it just reloads the page, right? Because we
Sent a post request and it’s simply returned to us, the rendered template again, right? That’s all that happened. When we sent the poster, we sent the get request. So to be clear, when I go to this URL from the URL bar, this is a get request. When I press the submit button, this
Is a post request cause I’m sending the information to the server. All right. So now let me show you how we get the information from this form on the server. Now, what we do is we need to start by importing something called request, uh, at the top of our floss
Application. So if we want to get the information that was sent in this form, we can do the following. We can say that data is equal to request stop form. So this request variable, uh, is whenever you access it inside of a route, it will have information about the request that
Was sent to access this route. So it will say the URL, it will say the method. It will say all of the information that was sent. And in this case, we can access the form attribute of our request, which has all of the data that was sent as a part of a
Form. So here I’d say data equals request, and then I can print data. Now you’re going to notice that we made get an issue here, uh, because I’m doing this, regardless of the fact, if I’m sending a get request, I’m sending a post request. If a get request or post request
Comes in, we’re not differentiating between them. We just do the same thing. All right. So now that I have this line, sorry, I got a little confused there. I’m going to go to login. Uh, and what I’m going to do is I am going to send some information. I’m going
To say Tim at Gmail, I’m just going to say one, two, three, four, and I’m going to press now, notice it should print the data here. So if I log in, then notice here we get printing out an immutable dicked object or mutable multi-digit that has the email, which is Tim at Gmail
One, or Tim at Gmail, and then password one, two, three, four. So that is how we access information from the server. Here. We can look at the request up format tribute, and if we sent any data or there was a format tribute, then we print it out. Now the one
Thing to keep in mind here is that this is only going to work. It’s only going to give us data if we actually send a form, right? So if I, if I go here and I just refresh this and I look at my immutable dictionary, we don’t have any data inside of
It. The reason we don’t have any data inside of it is because we sent a get request. And while there was no form attribute in fact get requests, we didn’t, we didn’t have any data we sent with the get requests. But when I send the post request and I press login, we
Get our email and we get our password. So hopefully that’s clear, but now let’s look at how we can do this on the signup page, how we can get users information and store that in a database and create their user account. So the first thing we want to do, and I’m gonna
Delete this from login. I’m going to go to sign up. Now, I want to differentiate between my, uh, get requested my post requests. So to do that, I’m going to say, if request dot method is equal to an all capitals post, then I want to do something specific. So if it’s a
Post request, do something, if it’s a get request and do something else, that’s what I’m checking. So inside of here, the first thing I want to do is get all of the information from my form. So I want the email first name and the two passwords. I’m going to say email
Equals and then request dot form. And then you use this method called doc gets to get a specific, uh, attribute or specific value. So we’re going to get email we’re then going to say, first name equals request, stop, form dot get. And we’re going to get first name, then I want
Password. So I’m going to say password is equal to request a form dot get, and I want password one. So let’s call this password one, and then we want password two. So we’ll do the same thing. Password two equals request up form doc yet, and then password two. Awesome. So now
We’re going to get all this information, so we will get the email, uh, first name, password one, and password two from our sign in form. Then what I want to do is I want to start by making sure that this information is valid. So if this information is not valid, then I
Don’t want to create a new user account, but if it is valid, then I do. So let’s just do a few very basic Python checks here. Let’s say if the Len of email is greater than let’s say four characters, then we’re all good to go. All right, will say, if
It’s less than four characters, then we will kind of tell the, uh, the user that there’s an issue. I’m not going to do that this second, but I’ll show you how we do that. And we’ll say L if the, uh, the Len of first name is less than two. So if it’s only
One character or it’s zero characters, that’s no good, but we’ll do something else. If that’s the case. And then we’ll say Elif password one does not equal password two. Then we want to tell the a user there’s an issue. And then maybe we want to have like a length on the password.
We’ll say L if the lens of password one is less than seven characters, then there’s an issue. Otherwise we’ll say, add user to database. So if all is good, we can add the user to the database. So what I want to show you now, before we actually go ahead and
Do this is how we can kind of alert the user if something went wrong. So they’re sending us this request and saying, Hey, I want to make a new account. And we want to check to make sure all this information is valid. And if this information is not valid, well, we
Should pop something up on the screen and tell them, Hey, no, that’s no good. You can’t do that. Now. This is where we get into something called message flashing, which is a really cool part of flask. I think you can do it in Django too, although I’m not sure. So what you’re
Allowed to do, or I guess what you can do is you can flash a message on the screen, uh, using flask. It has like some built in functionality for it. So to flash a message, what you do is you import something called flash, and then you use this function whenever
You want to flash a message. So on 25, if I want to flash a message that says, Hey, you know, your email is too short. Then all I do is I say flash. And I say, uh, email must be greater than four characters. Okay? And then I can define a category for this
Flash. So if this is like a successful message, then what I would do is the category equal to success. And if this is a failure message or a message where there’s an error, then I would use the category error. Now you can name these categories, whatever you want. Um, like
They’re up to you. You can name them. IE, you can name them one. You can name them too, as long as you know what they mean. Uh, cause we’re going to use these categories to display these messages in a different color. Anyways, let’s flash a bunch of messages here.
So we’ll flash here and now we’ll say first name must be greater than two characters, uh, or must be greater than one character story. And this one really should be three. That’s correct. Then after this for password we’ll flash, Hey, your passwords don’t match. So we’ll say, uh, passwords don’t match
And I need to escape this. So I’ll just use an escape character like that. Then we’ll do another flash. And we will say that password is too short. Password must be at least seven characters. And all of these are error messages, right? And then otherwise let’s flash a successful message. Now
We will actually have to do something else here. We’ll say I’ve count created exclamation point category equals and then success. Alright, so there we go. We flash a bunch of messages. Now, if this does work, I’m just gonna remove this pass. And this is only if there’s a post request, right?
And then regardless at the end, we returned the signup dot HTML template. So now let me show you how we actually see these flash messages, because if I just run this right now, these aren’t going to do anything nothing’s going to happen because we haven’t displayed these messages. So I’m just
Going to rerun the server. I’m going to go into my, uh, based on HTML templates. So let’s find that here and I’m going to write a kind of block of code, uh, whereas based I, I meant to load this up here, uh, that is going to actually let me show these flashed
Messages. So underneath the ninth bar, but above my main content is where I want to show these messages. So I’m going to write a four loop, uh, and I’m going to do the following or sorry, I’m going to write, you’ll kind of see, I just have to write it out and then I
Can discuss, I’m going to say with messages equal to get underscore flashed, underscore messages. And then we’re going to say with underscore categories is equal to, and then a lowercase true notice. This is lowercase, not capital. This is a, a difference in Jenga use lowercase capitals, right? Are lowercase capitals use lowercase,
Uh, for the first letter for true and false. So we’re going to say, get flash messages with categories equals troop. And then we’re going to end the width statements. We’re going to say like that. And with now, what this is going to do is just going to define a variable called
Messages, which is equal to get flashed messages. This is a function that we can just write out because it’s built into flask and this is going to get all of the messages that we have flashed. Sometimes there may be multiple, uh, and then we will display our, we will get those messages
With their categories. Sorry. Now what we will do is we will loop through all of the messages because we could again have multiple messages and, uh, we will display them on the screen. So I’m going to start by saying, first of all, we need to make sure we actually have some
Messages, right? So if messages, and then I’m going to end this F so if we do actually have messages, if it’s not just empty, the one we’re going to do is we’re going to loop through them. So we’re going to save four message in messages, just like in regular Python, except we don’t
Need the, uh, the colon at the end. And then we’re gonna end the four statement. You’re going to say N four like that. Now what we’ll do inside of here is we will write some HTML that will just display whatever the message is. So I’m going to write a div.
I’m going to say div, and then class is equal to, this is an alert. So in bootstrap we have something called alerts. I’m going to say alert and then alerts hyphen danger. So this is an error message. And then this is going to be a dismissible alert. So alert hyphen, this MIS
Of bowl like that. And then we’re going to say fade, and then show. Now what this will do is it will fade in the alert. It will allow us to, uh, dismiss the alert and then it will be shown by default. Then we will say slash div. And one more
Thing, we need to have the role of this equal to an alert. Okay? So that’s our div for the alert. Now, inside of here, we need to actually show the message. So we’re going to use two braces. We’re going to say message. The reason we’re doing that is because we’re accessing
This message variable right here. Then we’re going to add a button that will allow us to dismiss this alert. So we’re going to say a button we’re going to say type is equal to buddy. And we’re going to say, class equals close. We’re going to say data, hyphen dismiss is equal to,
And then you guessed it alert. Then we’re going to end the button. And inside of here, we’re going to put a little icon that will allow us to actually like, show something nice for this button. So we’re going to say sub-urban area, hyphen hidden equals true. And then we’re going to say this
Thing. So the ampersand sign, uh, which is right here and then times semi-colon and then slash span. Now this is just a special character that is going to be like kind of a fancy X. And it’s just going to show it in this button. Uh, I can’t really talk about
It much more than that. That’s, that’s just what it’s going to do now. This however, though, is what we want to show. If we have B category that is equal to air, so we have two types of alerts, right? We have an error alert and a successful alert.
So if we want to show that we had an error, then we probably want to show it in rec, right? Which is what alert danger means. And then if we had one that was successful while we want to show it successfully, we want to show it in green. So
I’m going to copy this exact thing. I’m going to paste it again, but I’m going to change alert, danger to alert success. Now, what this means is literally change the background color degree. That’s the only difference between this and the other one. But now what I will do is I’m going
To have some, if statements inside of here that say, okay, well, if the category of this message was, um, what do you call it? Error then what do we want to do? Well, we want to show the error. If it is success, we want to show this successful message. So
I actually need to change this to say for cat to gory comma message in messages. So we will loop through both of the things that we need. And then we’ll do an if statement right here. So we’ll say if category is equal to, and then the string, which is, uh,
Not danger, but error, then we will show this. So now we need to put our L statement right here. So percent El. So pretty much, if you don’t have error, we’ll just show the success one, and then we need to end our four. So we can do that right here.
And four. So I know this is a lot of code, but this is how you show the flash messages. So we start with the width messages equals flashed with categories equals true. We say, if we have any messages, so if this is not equal to none, then let’s loop through all
Of them. Let’s check. If the category of our message is error. If it is then let’s display an error message box. So alert, danger, otherwise let’s display the success message box and we’ll throw whatever the message actually is in that message box. And then what do I have to enforce? Sorry, one of
This should be, and if my bad on that, and there we go, that’s all we need to actually show the flash messages. Now, since I put this in the base template, this will not work on any of our pages. So if we flash flash messages, it doesn’t matter where we flash them. They
Will always show up because this is on the base template. So if I save this, it does this, you know, crazy formatting, which I hate, um, that makes it way harder to read, but you get the idea. That is how you do this. And if you missed any of
This, you can just go to the code in the description. All right. So now let’s try this. Let’s refresh and let’s submit now notice that when we submit the first thing it tells us is email must be greater than three characters. So let’s go back to the code. All right. So we’re here
And we can see in sign up. The first thing we check is if the email is greater than three characters or not, no, it obviously wasn’t a, so that’s why we got that message. So now let’s enter an email. Let’s say Tim at Gmail and let’s press submit and then says, first
Name must be greater than one characters. Or I guess I should just say one character. Let’s actually change that. But you get the idea. Now it’s showing us these flashed messages. Now let’s, uh, input some valid stuff. So tim@gmail.com, uh, Tim one, two, three, four, five, six, seven, just
So that we get past that limit. And now it says account created. Now, obviously we didn’t actually create the account, but that’s the message that’s flashed. And if you press the X button, it closes the message. So there you go. That is how you flash messages. Now at any point in
Time in your program, now that we’ve implemented that code in base study CML, if you ever want to notify the user of something, just flash a message and then choose whatever category you want to show. So error, success, and you’re welcome to implement more categories as well. If you want to
Just show like a gray message or stuff like that, you just have to write some more HTML for that. Okay? So now that we have that, let’s talk about the database aspects. So we know what a flash messages we know to get information from the form. Let’s do something with this,
This info. So this is where it gets a little bit more complicated, but still nothing crazy by any means. We’re going to go into our init.py file. Actually, we’re going to start setting up our database. So the first thing that we need to do is need to import SQL alchemy. So you’re
Gonna say from flask, underscore SQL alchemy import, and that all capitals SQL or SQL, and then alchemy. Now this is what we’re using for the database. And the first thing we need to do is define a new database. We’re going to say DB equals SQL alchemy and just initialize it like that
Underneath. We’re now going to pick our database name. It’s going to say database, our DB name is equal to a database dot DB. All right. So now we have the name and we have the database object. This is the object we’re going to use. Whenever we want to add somebody to the
Database, uh, create a new user, whatever we’re going to use this object, you’ll see how this works. So once we’ve done this, we now need to tell flask that we are in fact using this database and where the database is going to be located because we actually need a file
To store all of this in. We’re going to be using sq Lite three to do this. So we need to say app dot config. And then we’re going to say, this is SQL alchemy. I always spell this incorrectly underscore database underscore URI is equal to, and then we’re going to do an F
String. This is only going to work in Python 3.6 above, by the way, if this F string, uh, if you don’t understand the F string, I’ll explain it in one second, but we’re going to say sq Lite and then three slashes, and then inside of brackets, DB underscored name. So
What I’ve just done here, as I’ve said, okay, my sq Lite or my SQL alchemy database is stored. We’re located at this location. So sq Lite three, our sq Lite colon slash slash slash, and then wherever the database name is, which in this case, we’re calling it database dot DB. You
Can call it whatever you want. But what this will do is it will store this database in the website folder. So inside of the directory that this nyt.py file is in. So we’re just telling flask where this is located. Now, what we’re going to do after this is we’re going to initialize our
Database by giving it our flask apps. We’re going to say DV dot a knit underscore app like that. Now again, what this is going to do is we’re just going to take this database that we defined here and pretty much tell it, Hey, this is the app we’re going to use
With this database, this flask app that we just created. So now that we’ve done that, what we need to do is define some database models or tables, right? If you’ve worked with a database before, then this is probably familiar to you. Uh, but if we want to store something in our
Database, we need to kind of define the schema of what that object is going to look like. So, anyways, hopefully this is clear, uh, yeah, the F string, if I didn’t explain, when you put the F beforehand, you can use these squiggly brackets. Whenever you write inside of the squiggly brackets can
Be like Python code and it will be evaluated as a string. So this is just going to evaluate to sq light colon slash slash slash database DB. Cause that’s our DB name. All right. So now let’s actually go into our models.py file. And this is where we’re going to create our
Database models. I’m going to do them both right now just to make things simple, but we want to have a database model for our users. And we want to have a database model for our notes, because we’re going to be storing notes for this app, right? So I’m going to
Say import dot, not important dot from dot important DB. Now what I’m doing is I’m importing from the current package, which is this website folder B DB object. Now not TB name, just DB. Notice that when I go to a knitter PI, I have DB defined. This is what I’m importing, because
This is in a knit top PI if I say import from dot, uh, where we’re even was I from dot import DB. That means from this package and I can access anything in the knit top PI import DB. So that’s what we’re doing. When I say from dot, that would be
Equivalent. If we were outside of this directly directory from saying, from website input DB. Okay, now that we have that, what we’re going to do is we’re going to say from flask underscore login module, you’ve yet to use yet import like that user mix. Now this is just a custom class that we
Can inherit that will give our user object. Um, some things specific for our flask login. Now you don’t really need to worry about what this is, but flask log-in is just a module that kind of helps us log users in. And well, our user object needs to inherit from user Mixon, which
Is what I’m importing right here. And he was we’re going to do is we’re going to find a class and whenever you want to make a new database model, so you want to store a different type of object. You’re going to define the name of the object. Usually this is
Not plural. You’re just going to make it a singular. And then you’re going to have it inherit from DB dot model. So DB again, was that SQL alchemy object that we created now for our user object in particular, this is not for any other objects, just for the user object. What we’re
Going to do is also inherit from user mixing. So now inside of here, what we will do is we will define all of the columns that we want to have stored in this table. So we’re essentially defining a schema where a layout for some object that can be stored in our
Database. And we’re saying, okay, this object is going to have what, well, it’s going to have an ID. It’s going to have an email. It’s going to have a password. What else do we want to store on it? Now it’s just easier for me to do this all at once,
But let’s jump in. So I’m going to say ID is equal to DB dot column, and then I’m going to define the type of column. So for all of our objects, we need to have, what’s known as a primary key. Whenever you create an object in the database, we need
Some way to uniquely identify this object. So for all of my users, you know, they could potentially have the same email. Now we’re going to make it so you can’t have that, but let’s say they have the same first name. We need some way to differentiate them. So we have something
Called a primary key, which is a unique identifier, typically an integer that represents our object. And it’s complete unique, no other object in this database table, in this database table, sorry, we’ll have the same ID. So I’m going to say DB dot integer. This is the type of column. And then I’m
Going to say primary key equals true. So our ID is our primary key, which again is the unique identifier. Now for all of our objects, we will have an ID. Sometimes you call it something else, but ID is what we’re gonna use next. What else do we want our user to store?
Well, we want to have an email for our user, want to have a password for our user, and then we want to store their first name. So I’m going to say email is equal to DB dot column. You’re almost always going to have DB dot column except for some specific cases. And
Then you’re going to define the type of the column. So for our email, well, this is going to be a strength. The maximum length of this string, uh, we’re going to say is 150. So whenever you define the string, you need to pick a maximum length for it. We’re just
Going to go with 150. You can make it larger if you want it doesn’t matter. Then we’re going to say unique equals true. When we define this, this means no user can have the same email as another user. So it is invalid to create a user that has an email that
Already exists. Then we’re going to save. Password is equal to DB dot column. And inside of here, we’re going to say DB dot strength. And we’re going to again, define how long we want this to be honed. I’ll make max one 50. Then we’ll say our first name like that. And honestly,
This should be camel. Case is equal to, and then DB dot column. And then we’ll say DB, guff strength and make this 150 characters. Okay. So now that we’ve done that, we’ve set up our user model. So we’re going to store all of our users in a schema that looks like
This. So we can have multiple users obviously, and all of them are going to have an ID, an email, a password, and a first name. That’s what this defines right here. Next, what we’re going to do is we’re going to set up a, uh, an object called notes. So I’m
Going to say class note or sir at class called non object. This is going to inherit from DB dot model. And this is going to be a much more general, um, schema or much more general database model. Now, in case you’re confused, a database model is just like a layout or a blueprint
For an object. That’s going to be stored in your database. So when I say user, that means all my users have to conform to this right here. When I say note, this means all of my notes need to conform to what I have right here. You’re just telling the database
Software that like, all notes need to look like this. All users need to look like this. So, you know, all your information is always going to be consistent. Anyways, this user one was a bit different, right? Because we inherited from user mixing. I’m not going to really, I don’t want
To go into much depth on what this means, but it just to do with the fact that we’re using this flask login module. If we weren’t using flask log in, we were doing this completely from scratch by herself. We wouldn’t inherit from this class. Anyways. Now we have class note and
Harrison DB dot model. This is a much more general class. And what we’re going to do is defined very similar things to what we defined in user. So first we’re going to say ID all our notes need to have unique ID is DVR column DB dot integer, and then primary key equals
True. Now it’s worth noting that by default, when you add a new object, you do not need to define its ID. It will automatically be set for you. So the database software is smart enough to just increment the IDs so that they’re always unique. And the next ID inserted will simply be
ID plus one of the last ID that was inserted in the database. All right now, for our note, what do we want to store? Well, we want to store the data associated with the note. Now you could call this text to doesn’t matter. Uh, and I’m going to say, this
Is db.com DB dot string. And our notes will be at most, uh, let’s go 10,000 characters long. Now, you know, someone could make a note longer than that, but let’s just go with 10,000 characters. And then we want the date that this note was created out. So DB dot column, DB dot, and
Then date time. And instead of daytime, I’m going to say time zone equals true. So it’s going to store time zone information as well. And then lastly, we’re going to say the default value of this field is going to be equal to, and then to import something. Now I’m going to say from
SQL alchemy dot SQL, you will already have this. If you imported our, sorry, if you installed the flask SQL alchemy, and I’m going to import funk. Now, this is very strange, but essentially what I’m doing here is I’m making it so that we don’t need to specify the date field ourself.
We just let SQL alchemy take care of this. Whenever we create a new note, it will automatically add the, uh, the date for us. Now we do that by saying the default is equal to funk dot. Now what funk does is it just gets the current date and time, and it
Will just make it a store that is the default value for our date. So whenever we create a new note object, it will just call funk. It will get whatever time it is. And then it will use that to store in the date time field. And it will store the timezone
Information of this daytime object as well. All right, great. So we have that next. We are going to actually allow us to associate this a note with our user. So all of our notes must belong to a user right now. This is the point where I’m showing you how you associate different information
With, with different users. If we have notes and we want to have notes that are being stored for each user, each user has multiple notes. We need to set up a relationship between this note object right here and our user object. Now we do this in the form of
A foreign key. So a foreign key essentially is a key on one of your database tails tables that references an ID to another database column. So a foreign key is essentially a column in your database that always references a column of another database. So in this instance, for every
Single note, we want to store the ID of the user who created this note. So I’m going to say, user underscore ID is equal to DB dot column. And then inside of here, I’m going to say, well, what is the ID field for my user? Well, it’s an integer,
So I need to match this because this user ID column here, our field is always going to store an ID of one of the users. So I’m going to say DB dot integer. And I’m going to say DV got foreign key. Uh, did I spell foreign incorrectly? Yeah, I did foreign key. And
Then here, we’re going to say user.id. Now this is where I need to kind of go into some more depth here. We’re saying that the type of column is integer and by specifying foreign key, what this means is we must pass a valid ID of an existing user to
This, uh, field or to this column. When we create a note, note, object, this is what we call a one to many relationship where we have one user that has many notes. Now I don’t really want to get too much into databases. This is something that you kind of need to
Look up on your own and learn about. That’s not the purpose of this tutorial here, but when you have a one to many relationship, you have one object that has many children. Now, in this case, we have one user that has many notes. So what we do is we store a foreign key
On the child objects that referenced the parent object. So now every time we have a note, we can figure out which user created it by looking at the user ID. And again, this dot foreign key and forces that we must give a valid user ID to this object. Otherwise we
Can not create it because we have a relationship between the user and the note now, user.id, where am I getting this from? Well, the name of our tables by default are underscore. So in Python, we use capitals for the classes because that’s the convention, but in SQL, this user class here will
Actually be referenced, then represented by user. So that’s why I’m putting user here with a lowercase. You now ID that’s the field of this user object. So I’m referencing the ID field. If the primary key was represented by say, like name or email, then I would do email, but you just put
The, uh, the primary key of the other object that you’re referencing where other table that you’re referencing in this case user.id. Great. So now we have that, uh, and now what this means is that from each note we can reference who created it, but we don’t just want that. We want from
All users to be able to find all of their notes. So what we need to do now is we need to set up a field on our user that says notes and is equal to a DV dot relationship with what well with the notes table. Now, what this will do is it will
Pretty much tell flask and tell SQL alchemy and do your magic. And every time we create a note add into this user’s notes relationship, uh, that note ID. So this relationship field will really be a list and it will store all of the different notes. Now that’s not exactly how
It’s going to be represented, but we will be able to access all of the notes that a user owns or has created from this notes field, by denoting, this DB dot relationship, and then putting the name of the, uh, the other table that we’re referencing. Now notice the here it’s capital.
So, you know, it’s not very consistent, but you do need capital for this one. Don’t ask me why. It’s just the way that SQL can be works. When you do the foreign key, you have lowercase. And when you do the relationship, you’re referencing the name of the class, which is obviously
Capital. So hopefully that’s clear. I know I just went through a lot there. Um, there’s just so much to talk about when it comes to making websites. So, uh, you know, it is difficult to go through everything in absolute depth, but this is the two database models that we’re going to
Have. Now, if we wanted to have another one, we would just do the same thing. So we wanted to have say, you know, maybe you could store videos on the platform, or maybe you store reminders or whatever. We would just set up another class. So it would say class reminder, it would
Inherit from DB dot model. We would define all of the fields that we want to store for this reminder class. And you can look these up on flask, SQL alchemy, and then we would add the foreign key to our user. Now this foreign key that I showed you is only when
You have a one to many relationship. So one user having many notes. Now, if you had a many to one, that means you can have like one note belonging to many users, right? So there’s different, um, relationships that you have between objects. I just showed you a one to many, which is the
Most common. You can also have one-to-one and many to one. So you will have to look up how those work, but there’s lots of documentation online. Anyways, we finished that. Now we did the database. Now what we need to do is we need to actually create this database. So we’ve set
It up. We’ve defined what it will look like, but we need to create it. So we’re going to go inside of a knit top pie, and we’re going to write a little script. That’s going to check before we run this server every time if we have created the database yet. So the
First thing we’re going to do is after we, uh, register our blueprints here, we’re going to say from dot models, and we’re going to import our user, and we’re going to import our notes. Now you could just import models. Like you could just just say, import models like that. Like either works doesn’t
Matter. Um, and sorry, it’s not going to be models are going to be dot models, just like dot views and.off. Cause we’re doing the relative import. The reason we import this is not because we’re actually going to use anything. It is because we need to make sure that we load this file
And that this file runs this models.py file runs and defines these classes before we initialize or create our database. So we import the models file so that it defines these classes for us. And then we can go ahead and create our database. So I’m going to write a function. Let me say, define
Create database. And this is going to take app. Now, what this is going to do is it’s going to check if the database already exists and if it does not, it is going to create it because if it does exist, we don’t want to override it because it has data in it already.
So we’re going to go to the top of our program. And we’re going to say from O S stands for operating system, uh, import path. And then what we will do is we’ll use this path module to determine whether or not the path to our database exists. We’ll say, if not path,
And then inside of here, we’re going to say website, assuming you called your folder here. Website. If you change the name, you’d have to change that. And then plus DB underscore name, uh, and sorry, this is path dot exists. So if path that exists website plus DB underscore name, then DB does
Create underscore all app equals app. And then we will just print created the database exclamation point, and then we’ll run this function. So we’ll just do it here, create, create, create database, and then pass it up. So the way this works, we use the path module check. If the database exists, if it
Doesn’t exist, we create it. That’s what DB dot create all does. The reason we need to pass app is cause we need to tell flask SQL alchemy, which app we’re creating the database for, because obviously if it’s a different app, then things are gonna change. And this, uh, app also has the SQL
Alchemy database URI on it, which tells us where to create the database. So I’m going to save that and now we will have actually set up this flask SQL alchemy, all right? Yeah. Whatever database, wherever you want to call it. So now let’s run this, uh, and from an import dot
Models, what’s wrong with import dot models I might have to do from dot models imports, uh, sorry. And then user actually, it’s not that it’s import dot models as models. Okay. So the reason I got this error, it was saying I couldn’t import dot models is because we
Need to, if we have a relative import rename, what we’ve imported this as is something that doesn’t start with a period because I can’t reference, like I can’t do dot models dot user. I can’t reference the user class like that because I can’t start a variable with a
Dot. So we just need to change the name that we import this as to something that doesn’t start with a dot, so models, and now this should work. So import dot models as models, because it’s a relative import. So let’s try this and still an error, right? We might need to actually just
Do this from dot models, import user and import. What do you call it? What was the other one we had to note? So I guess I can’t even do what I just did. I thought that was going to fix the issue. I don’t often run into this, but I believe if we’re,
Uh, having a relative import, I guess we just have to use from, and then import all of the classes or whatever we want from that. We also, I could just get guests, could import star, which just means import everything. Let’s in fact, let’s do that. So let’s run this and now define, create
App. Uh, there’s an issue with this. What’s it saying? Line nine star only allowed at module level. Great. Okay. So let’s not import star. I can’t get past the dam import statement. Let’s import user and let’s eat ports. What else was it? Note. Okay. I apologize about that guys, but issues do
Happen. Uh, yeah. Anyways, let’s run this down. Okay. So all is working. Looks like this is the way we’re going to have to import it. If any Python experts are there in the, uh, in the comments, please let me know why that wasn’t working and now let’s go and refresh. Okay.
Uh, okay. Well that was the post request. The refresh anyways, all is working on the websites. Log in, log out, uh, sign up home. And now look, we have a database dot DB created in our directory. Awesome. So we now created these tables. Now that we’ve done this, we can actually
Do some more interesting coding. We can get out of this and knit top high file and we can start using our, uh, our signup method right here, a signup function to actually create an account. So, you know, our L statement. So assuming all of this stuff is correct. What we’re
Going to do is create a new user. So this is actually super simple. What we’re going to do is we’re simply going to say user or new underscore user is equal to user like that. We’re going to say that email for this user is equal to email. We’re going to say that
The first name of this user is equal to the first name. And then we’re going to say that the password is equal to, and then we’re going to hold off for a sec, cause I need to import few things. So what I’m doing is I’m creating a new user.
This user is the user that I defined in my model. Stop Haifa. Right? So user right here. So what I need to do now instead of author pipe does need to import that. So say from dot models, imports user. So now I have the user imported. So now I can actually,
You know, use this right here. But what I also need to do is I need to import a few things from flask login that are going to allow me to hash a password. So I’m going to say from, and then this is work I don’t know how you say this.security import generate
Password hash and check password hash. So if you’re unfamiliar with the hash, essentially it is a way to secure a password such that you were never storing a password in plain text. So you never want to store a password as what the actual password is. You want to somehow kind of
Change that password or convert that password into something that, uh, is just much more secure. Now we call that a hash. Now I need to discuss what a hashing function is to explain a hash, but a hashing function is a one-way function, such that it does not have an inverse. Now, what
Does that mean? Well, if we have a function X maps to Y let’s say we have function F of X equals X plus one, okay. Uh, this is a function that does have an inverse. Now the inverse of this function, or what is an inverse one inverse means given Y which is
X plus one like X plus one would be why you are able to get back to X. So the inverse of F of X is F of Y is equal to Y minus one. Now what this function does is it takes Y and it maps it to X. The way this works is
That if I know X plus one is what gave me Y then I know I can find what the original X was by just subtracting one, from whatever this function gives me. Right? So if F of X, if I call F of two, and that gives me three,
Then I can say F of three. And that gives me to, uh, the misfunction here. Uh, let’s do it. Let’s just call this G sorry, or F prime then F prime at three, giving me two is the inverse of F of X. Now is a lot of math going on here. Um, but
Hopefully you get the idea, essentially, if you’re given the output, you can find the input. That’s when inverses now a hashing function is a function that has no inverse. That means that you can generate a hash with it. So given some X, it will always generate the same value. Y but
Given a Y you can not find what the X was. Now. The reason this is important is because when you generate a hash, what you do is you pass the password to this hashing function as X, and it spits out some wine. But with that, Y you can never find what the
Original password was. You can only check if the password you type in is the correct password by running it through the same hashing function. So if I run my password that I’m typing in to try to sign into account through a hashing function, and it equals the hash. That means the password
Was correct, but if I’m just given the hash, there’s no way for me to check what the password is. So hopefully that’s clear. It’s hard to explain without like writing anything out. I’m just typing in this editor. But the idea is that you’re never storing the password in plain
Text. And if you hash the password, you can never return to the original password. You can only check if the password you type in equals the hash that’s stored. That’s how it works. So when we store our password, the whole point of this was to say, we’re going to
Store it with a hash. We’re going to generate password hash, and we’re going to pass the password one here. We know that password one and password two will be the same. So it doesn’t matter what we pass. And then we’ll say the method is equal to, and then shot two
56, which is just the hashing algorithm. Uh, you can pick a different hashing algorithm if you want, but just go with shot two 56. If you don’t know which one to choose, there’s all kinds of videos online. If you’re more interested in hashing, it’s actually a pretty interesting thing. So
Anyways, now that we have that password defined, what we need to do is we need to add this, uh, this account to our database. So we’ve defined the user, but if we want to actually add this to the database, what we need to type is the following DB dot session dot add new
User. What this means is add the new user to the database. Then what we need to do is we need to make a commit to the database. So we need to pretty much say, Hey, we’ve made some changes in the database, update it. We do that by saying DB dot session dot commit.
So now that we’ve done that, we’re all good. And this will actually create a new user for us. So after we create the new user, we will flash the message saying, Hey, account was created, awesome success. And then we’re going to redirect the user to the homepage of the website, because
After they create their account, we should sign them in and then they should be redirected to the homepage. So what I’m going to do now is I’m going to import from flask, something called redirect and something called URL for, so I think these are pretty intuitive to understand what I’m
Going to do with them, but what we’re going to do after we flashed this message in the, uh, the L statement here is we’re going to return a redirect to the URL for the homepage. That’s what we’re going to read. So we’re going to say return, redirect, which means a redirect us to
Another page. And then we’re gonna, okay, where do we want to redirect? Well, we want to redirect to the URL, four views dot home. Now, the reason I’m doing this is because views is the name of my blueprint. So we go here and we have views. Home is the name of my
Function. So I’m finding what URL maps to this function. Now I could just put in a slash like I could redirect, uh, to just a slash here, and this would work the same, but that means if I ever changed the URL, uh, and oops, uh, this, sorry, this should not
Be in a string. This URL for, sorry. That means if I ever were to change the URL for that home function, I would need to come in here and change it. So it’s better to use URL for, and just do the blueprint name and the function name that you
Want to go to that way. If the route for that ever changes, this will pick it up. So that’s what this do. This is doing. It’s just finding the URL associated with this function. All right. So now that we have this what’s going to happen is we’re going to actually create the
Account. Uh, and then it’s gonna redirect us to the homepage after we send the post request, um, from signing up. So let’s create an account. Let’s actually, I need to rerun the web server here. So let’s do that. And now, if I go here, I will refresh. I will
Go to sign up and let’s make an account. Let’s say Tim, at gmail.com, let’s go to Tim, make our password pretty basic, does need to be at least seven characters and it’ll press submit. And it says, first name is an invalid keyword argument for user. Okay. Interesting. So that means that we must
Have mess something up in our models file. So let’s go to mozza pie. And what does it say here? Uh, first underscore name. That’s why. Okay, so now let’s go to view, stop pie or author pie. And I realized that I’ve just, I’ve just named this argument wrong. So
I need to say first underscore name equals first underscore name. Uh, and did I, ah, so let’s go to here. Okay. So I just changed this to be first underscore name instead of the camel case first name, which I should have done anyways. That was just a habit, I guess,
To do it the other way. Uh, but yeah, we have first underscore name equals first underscore name. And in case I wasn’t clear here, you just define all of the fields that you have in model stock PI, and then you set them equal to whatever they’re equal to. Right. Which
Is what we did anyways. Let’s run this now. Uh, let’s just refresh, cause this should just resubmit the post request. Uh, and then first name is not defined, whereas this, uh, Oh, Elif Lenna first name. Of course we, we need to change this. So let’s go first underscore name. Okay. And let’s refresh
Continue. And now it’s issue. DB is not defined. Of course, DB is not defined. We didn’t import DB. So these are the kinds of issues you run into. All right. So now we have to import DB. They’re going to say from dot import DB. Great. And that’s again from the nyt.py file.
We already showed that previously. Okay. So now we have everything imported that we needed. Uh, hopefully this should work. Let’s refresh and send again. And there we go account created. That means we actually did create this account and it redirected us to the home page. So now what
We need to do is we need to actually kind of signify the fact that a user is signed in and has created an account. We need to let a user log in, right. Or sign in now that they have the account. So let’s do that. Let’s handle the sign in form
Now, or the login form. So inside of here, I’m just going to start kind of coding some stuff out. I’m going to say if request dot method equals equals post. So if we are actually signing in and we’re not just getting the page, we want to get the email and the
Password from the forms, we’re going to say email equals request, stop form doc yet. And then we want the email and then we’re going to say password equals and then request, stop form doc yet. And then of course we want the password. All right. Now what I’m going to
Do is I’m going to check if the user email that we’ve typed in here that was sent to us in this form is valid. If we actually have a user that has that email in the database, now this is going to show you how you actually kind of query the database and
Look for specific entries. So I’m going to say, user is equal to user, which is the database name, right? And then doc query dot filter by, this is what you do when you are looking for a specific entry in your database or a specific user, whatever it is. And you
Want to look by a specific column or by specific fields. So I’m going to say email equals email. Now this means filter all of the users that have this email right here. That’s what I’m saying. If I was looking by ID, I can say ID equals and then whatever the ID
Was. Okay. So email equals email, and I’m going to say, dot first, what this will do is return the first result. Now there should only be one result if there is any results, because we might not have a user that has this email, but if we do, we should only have one
Because each user must have a unique email. So what we’ll do now is we’ll say if user, so if we did actually find a user, then we need to check. If the password they typed in is equal to the hash that we have stored on the server. So we’re going
To say, if check underscore password hash, we’re going to pass the user dot password, uh, which is whatever user we found here, whatever their password is. We access with dot password. If I wanted to access their email, I would say.email. If I wanted to access their name, I would say first
Underscore name. So we say, use it on password and then password, which is the password that we got from the form. So if this is the case, if these hashes are the same, which is what this function will do is just compare, it will, it will hash this password and then check
It against this password. Essentially, if that’s the case we logged in successfully. So let’s say flash, and then we will say logged in and then successfully like that. Okay. And I’ll just do an exclamation point category equals success. Okay. Now, if that’s not the case, then we need to make
Sure that we tell the user, Hey, no, you didn’t log in. That was incorrect, wrong password, whatever. So if the password is wrong, then let’s flash a message and let’s say incorrect, a password like that. Maybe try again. Okay. And then category is going to be equal to error. And then if the
User doesn’t exist, then we need to tell them that, Hey, there was no user with that email. So we’re going to say flash, and then email does not exist. And then category equals error. Okay. And that’s all we need for this. But before I do this, it just reminds
Me of one thing. When I was writing this, we need to make sure that when we sign up a user, that that user does not already exist. Right? We need to make sure that the email they’re using doesn’t already exist or a user doesn’t already have that email. So the first
Thing we’re going to do inside of here is the exact same thing we just did here. We’re going to say user equals user dot query dot filter by email equals email dot first. I’m gonna copy that. And it’s gonna be our first line. And now we’ll change this to an
Ally. Uh, and we’ll go, uh, actually we’ll just go user. And then we’ll say if user, so if there actually is a user, then we’ll just tell them, Hey, no, this email already exists. Okay. So now we will say the category equals and then err, great. So that’s going to make sure we’re
Clear the user and sure that we’re not, uh, signing up users with the same meal. Okay, sweet. So now we have that. So the log in and sign up forms are pretty much done. Let’s go back to the website after I rerun this year, I guess it crashed for some reason. Uh, and
Let’s give this a refresh. So now let’s, let’s just log out. It doesn’t do anything, but we have, we can go to login and let’s see if we can create a new account with another email and then sign it. So let’s try with tim@gmail.com, which I think is an email that
Already exists. In fact, let me just submit this and notice it tells me already email already exists. So great. That’s working all is good. So actually let’s sign in as that user. So Tim, uh, g-mail dot com. I’m going to type an incorrect password and incorrect password. Try again. Awesome. So now
Let’s try again to my gmail.com one two, three, four, five six, seven, which is the password and logged in successfully. So that did actually work. Now again, I know this isn’t really bringing us anywhere, but that’s the next step. So now that log-in in signup is working, first of
All, from login. If we log in successfully, we need to redirect the user to the homepage. We’re going to say return, redirect URL for the used on them, just like we did in the signup page. All right. Awesome. So we’re getting very close to being done here. Um, I mean we have to
Add the notes and stuff, but like we’ve done most of the hard stuff already now that we can log in and we can sign up, we need to be able to log out. We also need to make it so that you can’t access the homepage unless you’re signed in. Right. We want to
Prompt you to log in or to sign up for an account. Uh, if you haven’t done so already, so now we need to make it. So that first of all, you don’t see this home button. If you’re not logged in, you can’t access this homepage. If you’re not logged in
And if you’re logged in it probably shouldn’t say log in or sign up at the top. It should probably only show you home and log out. So how are we going to do that? Well, this is where we’re going to use flask log-in. So this is makes life super easy. I love the
Fact that this module exists. We’re going to start by just importing floss login. So we’re going to say from flask underscore login import log in user import, uh, actually logging required yet import logging required and import log out user. Awesome. So these are the functions we’re going to use to log in
Our user, where else is going to import something called current user, which is going to represent or hold the current user. Now, this is the reason why we needed to in our models file, have this user mixing so that we can use this current user object here to access all of the information
About the currently logged in user. So anyways, what we’re going to do now is inside of log-in after we log in, we are going to say it log in user and we’re just going to pass our user like that. So the user that we found here that we have the correct
Password for this is the user we’re logging in. That’s all we need to do. This is going to log in the user. Last thing we’ll say, remember equals true. Now what this does is this remembers the fact that this user is logged in, uh, until the user, I guess, clears their browsing
History or their session. Uh, this is going to store in the flask session. So after you restart the flask web server, this will no longer be true. But if the web server is running, uh, it’s hard to describe when this is, is not going to remember the user, but essentially just think
Of it as, unless some circumstance occurs where the user like clears their browsing history or the web server restarts philosophy, going to remember that this user was already logged in. So they don’t need to log in every single time they go on the website. Anyways, login user user remember equals strip. Now we’re
Going to do the same thing. So just copy this line in, sign up. So after we successfully sign up user, we’re going to log them in as well, because while they should be logged in, after they create their account, and then we’ll now do the log out function or the log-out
Route here. So in log out, what we want to do, first of all, is we want to return the redirect for the URL for, and then we’re going to just redirect, uh, to off dot login, which is just going to be this right here. We’re doing that because after they log
Out, usually just bring them back to the sign in page, right? And then all we’re going to do inside of here is we’re going to say log out user and we don’t need to pass a user. We just say, log out user. And it will log out the current user. Now,
Lastly, we’re going to add a decorator to this, uh, this function here that says log in under score required. Now all this does is this, make sure that we cannot access this page or this route, unless the user is locked in. And this makes sense, right? We don’t want to
Be able to log out if we’re not logged in now, that’s not going to cause an issue, but it just makes sense to add this decorator. So we will. So we have that for log out now, and now I’m going to copy this line. I’m going to go to views
Dot pie. I’m going to show you how we can do this in here. So now all we need, we don’t need log in or log out user. We’ll get rid of those. We’re going to keep logging required in current user though. And we’re going to add a log in required decorator to our
Homepage. So now you can not get to the homepage unless you log in. And there you go. Now, the last thing we need to do here, when we’re using flask login is we need to tell our a flask in general, how we actually log in a user, how we find a
User. So we need to go to our, our knit top PI file. And inside of here, we’re going to say at the very top from flask underscore login import login manager in manager is what it says. It’s going to help us manage all of the logging in related things. so@thetophereunderdb.net
App, we are going to say the following, we’re going to say, log in underscore manager equals login manager, just like that. We’re then going to say, login, underscore manager dot log in view. So where do we need to go if we’re not logged in? So essentially where should flask redirect
Us if the user’s not logged in and there’s a login required? Well, we want to redirect to auth login, name of our template, name of our function, right? And then we’re going to say log in under square manager dot knit underscore app, and then pass it the app. So telling log-in
Manager, which app we are using, then lastly, we’re going to define a function here. We’re going to say at log-in manager under square manager dot user loader, and we’re going to say define load underscored user is going to take an ID and inside of here, we’re going to return the
User dot query dot gets into ID. Now I’m going to describe this in a second, but sorry, take all this code and we need to put it below, uh, when we import this model here. So actually below the database, after we create the database, then we’re going to do this. Now
I’ll go through this. But I think these three lines are straightforward. What this is doing is this is telling flask how we load a user. Now user dot query dog gets this works very similar to filter by, except by default, it’s going to look for the primary key. So when you use
Get, you don’t have to specify like ID equals ID. It just knows that it’s going to look for the primary key and check if it’s equal to whatever we pass, which is the introversion of whatever ideas passed to this load user. Now, you don’t really need to know much more about
This, but we’re just pretty much telling, telling flask here, what user we’re looking for. It, we’re looking for the user model and we’re going to reference some by their ID. And that’s what this decorator here is doing. Uh, it’s saying, you know, use this function to load user. If you had more
Advanced loading of users and obviously you would have to change this function, but hopefully that’s clear. Again, it doesn’t matter too much if you understand that or not just what you have to use for login manager and for, uh, for flask login. Okay? So now that we have that, I think that’s pretty
Much all we need. So let’s rerun this here and let’s check it. This is working. So let’s refresh, uh, please log in to access this page. Notice we’re getting that popping up. So to access this page, that’s I don’t know why it’s showing me this message because I don’t think we, um,
We implemented this anywhere, but if I go to home, it keeps saying that log out. I mean, it’s not doing anything because login is required, right? I go to sign up. I can sign up, go to login. I can log in. So let’s log in tim@gmail.com and let’s go with my
Password and boom logged in. Now we can access the homepage. Awesome. So now if I go to login, I mean brings me there. I can go back to the homepage cause I’m currently logged in. And if I log out, it redirects me to the login page and I can no longer access the
Homepage. So that is how that works. That’s what flask log-in does for us. It kind of manages what pages we can access and what ones we can’t in stores. The fact that users logged in or not. So now I want to show you how we can change this navbar so it only
Displays the correct icons. So this current user thing, uh, that I had imported in views dot PI, this is what we’re going to use to detect whether a user is logged in or not. So this current user has a bunch of attributes. If the user is logged in,
It will give us all the information about the user. So their name, their notes, their email, anything on the user model, we can access from current user. If the user’s not logged in, then it will tell us that this user is, I believe what’s known as an anonymous user and it is not
Currently authenticated because we’ve not seen signed it. So what we’re going to do is we’re going to pass to our home, a template user equals and then current user. Now what this means is that we will be able to in our template, reference this current user and check if it’s authenticated. So let’s
Go to our home dot HTML template and inside of here, uh, S actually not home, sorry, let’s go to base dot HTML and inside of base dot HTML. What I’m going to do is I’m going to go to my nav bar and I’m going to do some if statements and only
Show some of these links, if the user signed in. So I’m going to do, uh, if like this. So if, and then user.is underscore authenticated like that, I spell authenticated correctly. I think I did. So if they’re authenticated, then all we’re going to show is log out in home, right?
So let’s do that here. We will show, um, home first probably, and then log out after. So we’ll put home above then otherwise. So inside of here ago, percent percent ELLs, and then percent percent. And if, okay, so otherwise, so if they’re not logged in, then we’ll show the login and sign up
Buttons. Um, if they are, then we only show those. So now that we have that, that’s all we need to do to handle the bar. We just need to make sure that whenever we render this base template, which is in all the templates, we pass the current user, I’m going to save
That. I’m going to go to auth. Now I’m going to do the same thing for my render templates. So I’m going to get rid of Boolean here and for login, I’m now going to pass user equals current user. Same thing for my log out. Although actually, no, I don’t need to do
For log out, sorry, just for sign up. Now, I’m going to pass user equals current user. So now if we have access to the current user, uh, we can use it on a template and then we’ll display the correct thing for the NAF box. Let’s rerun this and let’s go to our website
And let’s refresh. So now notice that those two things went away. We’re not logged in, so we only have login and sign up. But if we log in, so tim@gmail.com and, uh, what was the password? Okay. Then we get home and we get logged out and now I can go to the homepage
Obviously, or I can log out and it redirects me here. So that is how you do that. Awesome. So now that we have that, what I want to do is I want to talk about adding notes. Uh, and yeah, and then at that point, we’re going to be pretty much done. So
Let’s go to our homepage and we’re just going to add kind of that little form or the little UI aspect to allow a user, to add notes, and then also have to display all of the notes as well. So let’s start by allowing user to create a note. So we’re going to make
A form. So we’re going to say form, and then method equals post like that. And then here, we’ll say slash form. Now we need to make a text area for the notes. We’re going to say text area. Uh, we’ll say name is equal to note. ID is equal to notes and the class
Will be equal to form hyphen control. Then we will end the text area and then what we will do, we will create a button. So we’re going to say div, we’re going to say a line equals center, just to put this button in the middle of the stream, going to end the div.
We’re going to add a button, say button type equals submit class equals VTN, VTN, hyphen primary. We’re going to say, add notes, and then we’re gonna end the button. All right. So now we have a forum and when we press this, it will send a post request to our URL, uh,
With the note, okay, so now we have the form, let’s write some code that can actually generate or show all of the notes. So first I’m going to make an H one tag, uh, and I’m going to say a line equals center, and we’re going to end the H one. And
Then I’m going to say that this is notes. And then under here, I’m going to write a list group. That’s going to allow me to show all of the different notes. So first I’m going to make UL, uh, which is like what you do for list. I’m going to say class,
This is a bootstrap class list, hyphen group list, hyphen group, hyphen flush. Uh, and then we’re going to say ID equals notes. Then we will end the UL and we’re going to do a four loop to loop through all of the notes. So I’m going to say percent percent for
User dot notes. Now, remember we’re always passing user, right? And since we’re passing user, what we can do is we can access all of the notes associated with the user because they have that. Uh, if we got them all this up high here, they have a notes field that is
Actually going to store all of our notes. So we’re going to say for note, in user dot notes, we’re going to end the force. So we don’t forget. And then what we’ll do is we’ll just display the note.data. So we’ll say note.data like that. And the data again is just the text
Associated with the note. We also could, uh, display the date of the note, but I’m not going to do that for right now. Okay. So now that we have that, uh, let’s just put this inside of an ally tag story, just so it shows up nicer and I will
Change the LLI tank. So we have a class here. So for L I, I am going to say, uh, class equals list hyphen group, hyphen item. Sweet. Okay. So now that we have that, we should actually display all of the notes. Um, um, I’m trying to find a word here just in a
List and that should be good. Okay. So now we’ll swell the notes. Then we have this form, so let’s go to the homepage and see how this looks. Uh, so let’s sign in, I guess, tim@gmail.com. And there we go. And now notice we have add notes, methods, not allow that make sense.
And then we have the note field like this. Now, for some reason, my quote, well, it would be helpful if I spelled class correctly, I was like, my, that looks really bad. Amos. Now we have the button that’s proper. But what I want to do is in between the
Text area and the dim, just going to add a break line, just so there’s a bit of space. So BR and then slash, and now let’s refresh this and notice, okay, that’s much better. That looks a lot better. So moving on, let’s make it. So we actually add a note.
Now we kind of already know how to do this. I we’re at the point where you guys, you know, you could probably go off on your own. Now let’s go to views up high and we’re on the homepage. We now need to make it so that the, uh, the post
Method is allowed for this route. So I’m going to say methods equals and then get, and then post. All right, so now we’ll check if the request dot method and we need to import requests. So let’s import requests like that is equal to post. So if request on method equals equals
Posts, then what we need to do is get the notes. We’re going to say, note is equal to request that form dot get note. I’m going to go a bit faster, cause we’ve done this a few times now, and we’re going to get the note and we’re just gonna make sure that this
Note is at least length. Once you’re going to say, if the lens of notes is greater than or equal to one, or sorry is less than one, then we will flash a note is too short. And then I guess we’ll just go with category equals error. Okay. Otherwise,
What we will do is we will flash note added category equals success. And then obviously we’re going to have to actually add the note. So how do we add the note? So to add the note, what we need to do is we need to say new underscore note is equal to note, which
Means we need to import that you want to say from dot models, import note, and then we’re going to say where this well, the data of our note is equal to note. So whatever the text is that was passed for the form. And then the user ID, uh, of our note is
Equal to current user.id. Because with the current user, we can access any of the fields on it, like the ID. So that will create our note. There’s nothing more we need to pass this. Then we will say, uh, DB dot session dot, add new underscore notes. And then lastly, DB dot
Session dot commits. And then, uh, I guess we actually don’t need to add anything. We just do that. Then we will flash a note added. We will return back to the homepage and we will render that note. So I believe that’s all we need to actually add the note.
I think that should be good. And then, yeah, you’ll see it in, will show up on the page. Awesome. Now that we have that, uh, one more thing that we need to do is we need to import DB. So we’re going to say from Zottz import DV, I knew I was
Missing something and let’s rerun the web server. So now let’s see if we can create a new note. So let’s go and let’s refresh. And let’s say high note and name flash is not defined. Okay. We need to import that. So from flask, let’s import flash, uh, now let’s refresh, continue and
Notice that we added. Now we added it twice, just cause the, the post request was sent twice. Uh, but there we go. So we added it on. Now, what I want to do is show you how to delete the notes. So let’s just go low and make sure this one
Works notice, hello is now added, and now I’ll show you how to delete them. So let’s go to home dot HTML, and I’m going to add a button for all of our notes that allow us to delete it. So underneath note.data, but still inside of our L I here, we’re going to save
Button type equals, and then this’ll just be button, class equals close, and then on click equals, or we’re going to call a JavaScript method, which we’ll write in one second or JavaScript function. Then we will, uh, and our button so slash button. And we will add that little icon.
That’s the X that we used previously. So we’re going to say spin and then area, oops, hyphen hidden, which means like just don’t show this, uh, equals and then true. And then, and the span. And then we’re going to do that little fancy symbol again. So ampersand times semi-colon save that.
And now we need to write the JavaScript function. We’re going to call, uh, you’ll see why we need to do this, but this is kind of the way that we would delete something. Um, I’m trying to find the words to describe this. I’m just going to do this and then you’ll
See kind of why we need to do it. But since we’re not submitting form data, and instead when we press the button, we want to send a request to the backend. This is kind of a standard way to do this. There’s of course, other ways to do this, but we just
Write a little bit of JavaScript. It will send a request to the backend for us, uh, that we’ll delete the, uh, the note. So we’re going to say, delete note is the name of the function we’re going to write. And then inside of here, we’re going to do two squigglies and
We’re going to write note.id. So the reason for this is that we need to be able to figure out which note we’re deleting. And of course we want to delete the note with whatever ID is in this field. So we need a way to figure out which note we pressed on and
The way we do that is since we’re in the loop, we’re going to say that on click, we call the delete note with note ID. So I feel like I’m explaining this very poorly, but we will have a function in JavaScript called delete note that we’ll take in a note ID. We
Are specifying that we want to pass the ID of the note that we’re showing in this list column or this list row. And then that way, when we press on the close button in this row, it will send the note ID associated with this note. And we will delete that note from
The database. So let’s save that, uh, for some reason, it’s giving me some, some red squiggly lines here. I think this should be good. I’m just double checking to make sure I did everything successfully or correctly. I think I did. Let’s go now to our index dot JS. Now, remember I
Showed you how to add this, um, in the beginning part of the series, in case your series beginning part of the video, uh, in case you’re forgetting how to do that. If you go to base dot HTML, this script tag right here, uh, is referencing this index dot JS file, which we
Have stored in the static folder. So make sure you have this line in your base template at the very bottom and that it looks like this and that you name your file index dot JS, unless you modify that line anyways, inside of here, let’s write what we need. So we’re going
To say function delete, Nope, we’re going to take a note ID and we’re going to send a request. So to send a request in vanilla, JavaScript, you use fetch, and then we are going to send it to an end point. We’ve not yet created called delete note. Uh, and inside of here, we’re
Going to pass the methods. You’re going to say method equals post. We want to send a post request and the body, uh, is Jason dot string of fi. And we’re going to send notes ID, and then being note ID. Now I’m just going to type this out. And then
I, that I will explain it. Don’t worry. We’re just going to say underscore Rez. And then we’re going to make an arrow function. Let’s say window dot location equals sorry. Uh, dot H ref equals and then slash, okay. So what this is going to do is it’s going to take the
Note ID that we passed, and it’s going to send a post request to the delete note end point, which we’ve yet to write, which we’ll write in a second. And then after it gets a response from this delete note, end point, it’s going to reload the window. This is how
You reload the window with the get request specifically. So window dot location got each ref equals slash just means redirect us to the homepage, which in turn will just redirect the page are sorry, refresh the page. So that’s what this is doing. Uh, don’t worry if you don’t understand the JavaScript, this is
All we need to delete the, uh, the note. And this is just how you send a really basic, uh, request to the backend from JavaScript. We’re not using Ajax or anything like that. So let’s go now to views dot PI and we need to make another view. So we’re going to
Say ads, views, dots, and then root. And we’re going call this one. We do need methods. Actually, we’re gonna call this one delete note. Now methods is going to be equal to post and it’s, there’s no get requests we can send here, just post. And we’re going to say, define, delete,
And then underscore. No. And what we’re going to do is we’re going to look, uh, for the note ID that was sent to us. Now, it’s interesting how we have to do this because we’re sending the request, not as a form. So the request is actually going to come in in the data
Parameter of our request object, which you will see in a second, which means we need to load it as Jason. So I need to import Jason, which is built into Python. So import Jason up top. And we’re going to say that the note is equal to, uh, Jason dot loads. And then we’re
Going to load, uh, the request.data. Then what we’re going to do is they’re going to say, uh, note ID, sorry is equal to, and then this is going to be data at note. So what this is going to do is it’s going to take this request data, which is a string. This string
Is what we just sent from here. So it’s going to be note ID and then note ID and, and what this does, what this does, Jason dot string, a fire is it turns this into a string. So we need to now take the string from views dot PI, turn it into a Python
Dictionary object. So we can then access the note ID, which is going to come in as the field note ID. And then what we’re going to do is find this note. So we’re going to say, Nope is equal to, and then note dot query dot get, and then note ID.
So again, when you get it access as the primary key, which is, uh, what, we’re, what we have here anyway. So if we found a note, so if note does exist, then what we will do is we’ll say if note dot user underscore ID equals current user.id, then DB dot session dot
Delete. No, this is how you delete an object. You query it and then you just put it inside of the delete there. I don’t know. I added a semi-colon and that will delete it. Then you say DB dot session dot commit, and then we can just return something. So I’m just
Gonna return J J Sonify, which I’ll import in the second, uh, with an empty response. Now I’m going to talk about all this story. I know I’m going fast, but at the top, just in Fort J Sonify and let’s discuss, so this that I just wrote here, what this is, is
It is going to take in some data from a post request, it’s going to load it as a Jason object or a Python dictionary we’re then going to access the note ID attribute, which again, it’s right here. What we’ll do then is we’ll say, note doc query dot gets
We’ll look for the note that has that ID check. If it exists, first of all, if it does exist, then, um, of course we can delete it. If it doesn’t, we don’t need to delete it. And then what we’ll do is we’ll say, well, if we own this notes with the
User who is signed in, does actually own this note, because we don’t want to let users who are assigned in delete other people’s notes, right? Uh, then we will delete the notes. So just a little security check. And then what we’ll do is we’ll return an empty response. Now we just
Need to do this because we do need to return something from these views. We’re not returning HTML here. We’re just returning an empty response that is either saying, Hey, you know, it was successful or it didn’t work or whatever. And in fact, at the very bottom here, we can just
Return Jason to find no matter what. And we’re just J sonifying an empty Python dictionary, which essentially means turn this into a Jason object that we can return. And, well, we’re not returning anything, but we just need to return something. It’s just like a requirement from flask. So anyway,
That’s what we need to do that should now delete our notes. Uh, so now let me get out of this. Let me run the server. And what’s the issue here. Uh, if notes, I used one equal sign, there should be two equal signs. Okay. Let’s rerun this. So I
Just had one equals. I need to change to two. Now, if we refresh, uh, I don’t want to do that. Let’s just do this. Notice that we have our Xs now. And if I press my ex uh, no, the requested URL was not found on the server. Hmm, interesting. So it
Looks like we must’ve sent the wrong URL. Uh, name data is not defined. Oh, oops, sorry guys. This should be note, uh, first of all, that should be note. So that will fix one of the errors and let’s see what other error we had delete note was not found on
The server. It should have been found on the server. We have delete note here. Hm. Interesting. Okay. I’m just gonna try this again and see what’s wrong. Let’s refresh. Let’s go back to slash home. Oh, that’s why we don’t want to go to slash home. We just want to go to slash and
I think the issue is an index dot JS. No, no. I’m just looking around for the problem here. For some reason we got redirected to slash home. I don’t know why that happened. Um, anyways, sorry. Let’s let’s just try this again. Okay. So let’s refresh, let’s try, delete a note. It says
It was not found on the server. Hmm. Okay. I’ll be right back after I looked for this. All right. So I fixed the error. It was actually just a caching issue with my previous version of this project before I’d started the tutorial. Uh, so you guys shouldn’t run into that issue. There’s
Nothing that you need to fix. I just cleared my browser cache by going up here and pressing empty cache and hard reload. Uh, when my console was open anyways, uh, now we can delete note. So if I go test and I add it, I can press the X and it
Deletes the note. So that is actually it. That’s all I wanted to show you that has been this tutorial. Now this took us almost two and a half hours. I do apologize that this was a long time, but I hope you guys can appreciate the effort here for the
Amount of time. I just sat in front of the camera and talk to you and let this gives you a really good start on your project. Uh, this again is how you create user counts, how you actually associate information with users. And I’m really hoping that now you’re going to have some strong
Fundamentals in flask and, and have a nice template project. And you can go, you guys can go out and build your own interesting website. So when we say that, is it I’m going to leave it here because enjoyed, please do make sure you leave a, like subscribe to the channel. And of
Course it will see when another YouTube video.
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Start a high paying tech career making $60k+/year with NO DEBT: https://coursecareers.com/a/techwithtim?course=software-dev-fundamentals
why is that at the beginning it says "No module named 'website'.
What do I do?
Should anyone get the Invalid hash method 'sha256' error, change the method from sha256 to 'scrypt', that is generate_password_hash (method='scrypt') – The 'sha256' password method is deprecated and will be removed in Werkzeug
you are too good i swear. it helped me a lot!
@41:39: when I add render.template("Login.html"), I obtain on web site "internal server error" but i don't understand the why. I add a template_folder,
from flask import Blueprint, render_template
auth = Blueprint('auth',__name__, template_folder="Template"), with no successful
I work with
Python 3.11.4 | packaged by Anaconda, Inc. | (main, Jul 5 2023, 13:38:37) [MSC v.1916 64 bit (AMD64)]
Type "copyright", "credits" or "license" for more information.
IPython 8.12.0 — An enhanced Interactive Python.
I'm a phyton beginner
You are really good at teaching dude❤
my question is.
is this frontend or backend?
Hi I wondered if you could help? I am having issues with connecting the terminal shown 12 minutes into the video it comes up with 'ModuleNotFoundError: No module named 'website' anyone advise how to get this running?
Hi i am working in IDLE and i am not able to change the interpreter and the output is showing no module found pls help
got ModuleNotFoundError: No module named 'website' error while trying to run first create_app()….same Directory Structure as mentioned…someone familiar with this error?
Really Helpful! Great work
you are an angel from the sky. Thank you for your creativity and effort. Keep this energy🤯🚀👍
Python does not import ‘create_app’ from ‘website’, it says “unknown location”. Does somebody know what to do?
pip install-sqlalchem is not working
13:01 I peed on my keyboard and it doesn't work. 😛
db.create_all(app=app) not working pls help
thank you Tim for this amazing tutorial😀
hello sir, your video helpful but i need u r help to complete bulid my website
52:08
Where do you login at the first?
When i try to run the project, it gives the error ImportError: cannot import name 'flask' from 'flask'. Can you fix this please?
If anyone is getting an error similar to: "SQLAlchemy.create_all() got an unexpected keyword argument 'app'"
Do this instead in __innit__.py:
def create_database(app):
if not path.exists('website/' + DB_NAME):
with app.app_context(): db.create_all()
print('Created Database!')
Are comments being auto deleted? I've posted my question twice but it just disappears.
Anyone getting this error?
ValueError
ValueError: Invalid hash method 'sha256'.
ValueError: Invalid hash method 'sha256'. i can not solve this problem bro . Someone who had the same pls help
2:02:39 it says jinja2.exceptions.UndefinedError: 'user' is undefined
Traceback (most recent call last)
does anyone know how to fix this?
13:02 – i tried this and now my keyboard is wet and doesn't work.
Amazing video, thanks Tim!
How to host the website online?
what would i need to do to make this a fullstack app on an online website
amazing video
replace 'sha256' with 'scrypt'
can you make another this but using SQL Server Management Studio, please
When creating the database I get an error that says that db.create_all has an unexpected parameter app. When I don't call the function create_database() it seemingly works. Can anybody tell me what's the problem. Did Flask change in the meantime?
Hello there
I did everythingstep by step but still this error mmessage shows "No module named 'flask'" even after I select my Python interpreter ?
How can I solve it please?
Thanks tim for your tutorial but i seem to get an error from
from . import db when i run models .py file and i dont know where i did wrong
I know this is super old but the only issue I had was the delete.
On your code in github you added the function in the base template
but here you never did that and for me when i wanted to delete a line it did not delete anything until I moved the function to the base. If anyone sees this or you do could you respond?
8:00 47:00
mantap bang