Using Flask to Build a Simple Application

We've got our file selected to run, so let's go ahead and execute this. Otherwise, it's just a library, and we'll leave that alone for now. So, we're going to activate our virtual environment, which has our Python packages installed. We'll say `source my env/bin/activate`, and our virtual environment is activated.

Now, we need to reference our packages that we specifically installed for this application. We'll say `pip install flask cores`, and that will grab the necessary packages. I don't think we need any other packages; those are the only two we used. So, that looks good.

Let's try running our server again by saying `python app.py`. However, it seems like we're not referring to our virtual environment when we try to install the package. Let's try again with more detail. We'll say `source my env/bin/activate` and then `pip 3 install flask`. This time, let's try running our server again by saying `python3 app.py`.

Now that our server is up and running, let's go ahead and check it out. We're going to go to `127.0.0.1:5000` in our web browser. Ah, it looks like we have an error! "get post get posts is not defined". Okay, so we need to import that from our models file here.

Let's try again with a fresh start. We'll say `from models import create_post, get_posts`. However, it seems like we accidentally removed the necessary path. Let's fix this by saying `import sqlite3 as sql`. Now, let's go ahead and run our server again by saying `python3 app.py`.

Unfortunately, we're still encountering errors. "sqlite3.Connection object has no attribute 'qser'". Ah, it seems like we don't need that anymore. Let's try again with a new approach. We'll say `from models import create_post, get_posts`. Now, let's go ahead and run our server again by saying `python3 app.py`.

We're getting closer! Our server is now up and running, but we still have an error when we try to submit our post. "expect token end of print statement got post". It seems like we accidentally included the post in our template. Let's fix this by removing it.

Now that we've fixed the issue with the template, let's go ahead and put in some entries into our application. We'll say `name = 'john', post_content = 'hello'`. Submitting this will create a new post. Ah, great! The post shows up correctly.

Let's close out our application here and start it up again to make sure everything is still working. And there we go! Our posts are still there because it's pulling from our database file. There's the name, the content, and now when we try to submit a new post, it creates another one.

Thanks for watching!

"WEBVTTKind: captionsLanguage: enguys today we are going to create a social network using flask and python by end of this video you will know how to create a full stack social network including a database server and your front end and yeah so let's get right to it thanks for watching so first thing that you want to do is create your directory for your project so we're going to call the directorynet so let's go ahead and create that now we're going to say open up a terminal or command prompt and say mkdir net okay then we want to go ahead and change into that net and it's going to be an empty folder at this point now what we want to do is say pip install so assuming you have python installed on your computer you're going to have pip which is the python package manager we're going to say pip install virtual env okay so virtual env is a package that will allow us to create an environment where we can keep the specific versions of the python packages that we are using for this project separate from our from the python that is installed on our computer okay we are doing this so we can keep track of those packages and then if anyone wants to reproduce our project they know exactly what packages they need to install so once we have virtual env installed on our computer we're going to say source um oh no actually we're going to say virtual env and then we want to say the name of the python version that we're going to use so we're going to say dash dash python equals python 3.6 and then we want to specify the name of our directory so we're going to say my env okay so now that's going to create that virtual environment for us again this is where all our pi python packages that we install are going to be saved to once we activate that so the way we do that again we're still in the same directory we say source my vnv bin activate oh one sec guys oh my env there we go bin and activate okay so now we are inside of our virtual environment now we can install our packages so we are going to need uh one package in particular for this which is flask so flask is a uh is a python web framework that makes it very easy to get a website up and running quickly it allows us to create a basic server as well as render html to the page when our user comes to visit it okay so let's go ahead here and say pip install flask so after our virtual environment has been activated that is going to take that package and bring it into our virtual environment for us to use so now let's go ahead here and now we want to create our database schema okay so now we're gonna dive into we have our our dev environment set up we're gonna dive into how to create the application itself so the first step in doing this is creating the database schema so in our case we are only gonna have one table okay and a table in a database is where you store all information okay generally you may have multiple tables in our case we're just gonna have one which is posts so let's go ahead and create a file and we're gonna call it schema.sql okay so this is where we are going to create the uh or specify the values that are going to be in our database table okay so we're gonna say um in this case here let's go ahead let me open it up here um okay so we're gonna say drop table if exists uh posts all right and then we wanna say create table posts so what this is doing is this is saying if that table exists already in the database go ahead and drop it and then create a new one with the things that we are going to specify in just a minute here now these things we are going to specify our unique values in our database so first thing we want to do is create a unique identifier for every post so we want to say id which is going to be the name of our of our column in our database table where that value is going to go so every database table has columns that make up the values that relate to those entries into the database okay so we want to say id integer and that is going to be the primary key and that is going to auto increment so this is a little bit of lingo here guys this is just sql syntax for creating a primary key that auto increments so what that means is this is the the integer that is going to represent or reference the uh each individual post and as each post is added into our database you can think of it as you define the column values and then each post you add is a new row in your table that is going to be a new entry into your database that corresponds with those column values at the top so we have id integer is a primary key and that's going to auto increment so that means for each new entry into our database that is going to increase by one so now we want to create a name so we're going to say name is going to be text that means it's a text value and it's going to be not null so this is going to be for our entries so now we're thinking for each post that comes into our social network we want to be able to create this we want to be able to post an entry into our database right and in this case we want to know the name of the person that created it and we want to have the content of the post and that's what's going to be put into our database so that is the first value name is text not null next up here we want to grab the content so we're going to say content text not null so what not null is doing is that's saying if they uh if we try to create an entry and that is a content or name is not specified return an error because we want name and content to be specified for every single entry in our database okay so now that we've got that let's go ahead and just add our closing parentheses closing semicolon and write and quit this all right so now we have our schema now we're going to use our schema.sql in order to generate our database file so let's go ahead here and use sqlite3 this is a very light version of a database you might have heard of called mysql and this come built in with python so we're going to say sqlite3 and then we want to put database.db specifying the name of the database file it can be anything.db and then we're going to put a little less than sign and then we want to put the schema.sql after that okay and by the way guys if you haven't used autocomplete before in the terminal when you start typing the name of a file and click tab it will go ahead and it'll create the rest of that file name for you so again that's what i'm doing there to quickly generate that so we say sqlite3 database.db less than sign schema.sql and click enter so now when we click ls to see the files here we see that there is a database.db file all right so now we have we created our schema we created our database now we need to create the server which is going to handle the interactions with the database so to give you guys just a general overview of what the structure of a full stack application looks like you have your front end which is the view okay when you come to any website you see on the internet you are seeing the front end of a website that is the view and the information that is being displayed on that most often comes from a database so what is going on in between there that would be the server so we have the view and the server receives requests for information from the user which comes from the view right so the user comes to the view from there they're able to make certain requests to the server for information they want to see then the server goes grabs that information out of the database pulls it back and then sends it to the user which is viewing everything so you can think of it in three parts we have the view we have the server and we have the database right and the server is going to interact is going to be the intermediary in between there pulling information from the database making the changes that we want to make before we send it back to the to the user who is viewing it and then sends that information back to the front end to where the user is viewing it okay so right now we've created that final part that's the that's the database so now let's go ahead here and create that intermediary part which is going to be the server so let's go ahead here and say we're going to open up the server and that is going to be app.py okay so now what we're doing here is we're going and we are opening up this file here this is going to be our server file okay and generally speaking you can name that app.py that is sort of a a good practice okay so let's go ahead here now and install the packages actually let's go again a little ahead of ourselves here so let's install the packages so we're going to say pip install um pip install flask right so that will oh oh we already installed that okay so that's going to bring down that package for us that's again how we're going to make our web framework i'm going to move over out of the terminal for you guys and we're going to open up um and grab net okay so this is this is our file right here and again we have our app.py file which is going to be where we are going to add the information for our server okay so the first thing that we are going to do here is we are going to import flask so we want to say uh from flask import flask let me go ahead and move myself down here import flask render template this is going to be for displaying the html that we want to display on the screen then we're going to say also um let's see what else do we need here flask render template oh we need request in order to grab the information that is going to be the content and the name of the user off the request that's coming in and then we see uh let's see here flask render template request um what else are we going to need we are going to need redirect no i think we're good i think that might be enough okay so now we want to go here go ahead here and we're going to say we want to create our actual server object so we're going to say app equals flask and then we go ahead and we pass name as the parameter here okay so that is going to create our server object and it's called app so now that we have that we want to create the routes okay so when you have a server you have different routes that you can hit these are known as endpoints routes basically synonymous but essentially what they do are they are unique endpoints which tell the server which the server uses to decide what data to send back to the to the view half right to the user the view part of our full stack application so in this case say we wanted to log in a user we would often hit an endpoint called something like login and then that would run the necessary code on the server looking for the necessary information that was sent to the server in order to log in the user so in our case here we just want to be able to see a home page and then be able to create posts and see the posts that have been created so let's go ahead here and let's say at app.route and we're just going to do a backslash so this is just going to be the very home page of our application once we start it up which we will do here in just a second so we're going to say at app.route with just the backslash this could be anything like backslash home backslash login backslash whatever you guys want to put you can specify whatever name that's just going to be your endpoint you have to send the request to in order to receive that response back from the server so now we're going to say we want to say methods right so when you are sending information whether you're sending information or any kind of information on the internet we use things called uh methods so in this case uh the methods are going to be or include post put delete and there's a few other ones as well uh get is is obviously the most common one so when you make a request to see any web page on the internet that's a get request you're saying i want to get this information and they send it back generally that is going to be the web page the initial web page okay beside that we have post which is saying here's some information store in the database uh put which is saying here's some information you probably already have this in the database update what you have okay and then finally delete is here's some information about what we want you to remove from your database okay now all of these methods these put post uh delete um and get these are all known as this is what's known as crud but as another acronym you may have heard of but essentially these are again how you send the data from the um from the front end and these are all user actions so these all these are just acronyms for user actions okay so let's go ahead here and say there's two methods that are allowed for this endpoint that is just going to show our our page with the posts and be able to take in information so we're going to say the methods are get in order to get the page and post okay so when the post is for submitting all right so now that we've got our our app.route here we're going to create a function that's going to execute when we hit this endpoint so we're going to say def index we're just going to call this function index and then we're going to say uh we want to say if request dot method equals get then in this case we're just going to pass okay because if it's a get request we're going to go ahead and return the template that we want our user to see right because they're requesting to see the web page so we're going to say return render template and we're going to create this in just a second but for now it's going to be called index.html okay we're going to create that html file that our user will see when they send an initial get request to our server uh in just a second here so if request.method equals get we want to pass now otherwise here if request.method equals post then we want to go ahead here and we want to grab the content so if it's a post request we are making the assumption that our user has already come to our page and they are now posting information to our web page via some input fields that they see on their end okay so we want to say request dot form dot get and we're going to name our inputs in just a second but we're going to call them name and we're going to say request.form.get and then we're going to call the other one uh name and we'll say post okay just for this is going to be the value of whatever our user is the actual information the uh the text that our user is posting uh this is different from this post okay this is the method itself and then this is just a variable that's going to be part of that data that we receive that is going to contain the text okay so we're gonna have a name name equals that and post equals this and then we're gonna go ahead here and now we're going to create um that post and store it in our database okay so we're going to call a method called create post and we're going to pass in name and post okay so now let's go ahead here and actually create the file that's going to interact with our database okay so we need we created our database and right now we're starting to create our server which is going to handle requests but now we need a way for our server to interact with our database and we're going to create a thin layer that uh of functions that our server is going to use to add things to the database or remove things from the database okay so let's go ahead here and create that file now and we're going to call that file models.py okay so into this file we're going to say import sqlite3 okay and then we're going to go ahead here and do some do some path uh some pathing so essentially guys when we get to this um when we get to this file here when we get to this file here this is going to be the thin layer that is going to contain that information that is going to allow our server to interact with the database here and in this case we want to directly know where our database file is so we can open that up and interact with that so we're going to say root equals path dot dur name and we're going to say path dot rel path file so again essentially this is saying get the directory name and then get the direct path to whatever file we pass in as the file for this okay so we're going to say so we're going to use that in just a second you guys will see how that ties in nicely but we're going to go ahead here now and say uh create a function that's going to create a post okay so when that request comes in it's going to call this function with those with the uh with the name and the post data from that request and then it's going to insert that into the database so let's go ahead and say def create post and remember it's going to receive two parameters that is name and content okay and now we want to go ahead and create a connection to our database so we're going to say con equals sql.connect and then we want to say path.join root and then the name of our database file so database.db okay so now we've made a connection to our database now we're going to define a a thing called a cursor so essentially guys in order to efficiently pull data or not not pull data but traverse the database and find the information that we need we're going to use a thing called cursor and what the cursor does is instead of grabbing the whole database it just goes to what we need and makes it much more efficient for us okay so we're gonna say cur equals con dot cursor okay so that's gonna say this is the uh this is the the variable that represents the instrument or object that is going to move over our database and find the information we need so now we're going to say cur dot execute so this is going to execute raw sql syntax for inserting a post into the database so we're going to say insert into posts which is our table name and content so insert into the name and content uh columns are let's roll back insert a row into the name and content columns that is going to contain this data that was passed as a parameter okay so we're going to say insert into name content values question mark question mark and then we want to go ahead here and fill in those values what those are going to be so in this case that is going to be name and content all right so that will execute that sql statement after making a connection to our database inserting in the name of the person who posted and the content of the post next up here we're going to say khan.commit and con.close so that's going to commit that entry to the database finalizing it kind of writing it in stone and then close the connection to the database now we want to create one more method in this file as well which is get posts so we want to say def get posts that's going to be that's actually not going to take any parameters that's just going to pull all the posts that we want out of the database so we can display them on the html template that we allow our user to see so we're going to say def get post and we're going to say con equals sql sql.connect path dot join uh root and database dot db just like above there and then we say cur equals con dot cursor and then we want to execute a little bit different sql this time so we're going to say curve.execute select all which is represented by this little star all from posts which is the name of our table so that's going to pull all the entries out of our table and then we want to go ahead here and say posts equals cur dot fetch all so that will go ahead and store all those uh entries into our database that we pulled out with that last sql statement and store them in the post variable then we want to go ahead and return posts okay all right so that will go ahead and do that that will grab all our posts for us so now we have that file we're able to interact now with our database with that thin layer we have our database written written and now we want to finish out our server here so let's go ahead and uh check this out here and now we're going to go ahead here and create a few final elements okay so this is going to be we have our create post and now we want to go ahead here and just say posts equals get posts right so that is going to go ahead and grab all of the posts using that method we just created in our models.py file here grab all the posts out of the database and return them so that we can display them on the screen so we have post equals get post and then we want to go ahead and return uh well we have our render template right there and then we're going to pass a another parameter and we're going to call it posts equals posts so what this is doing here when we create our template which is what our user is going to see initially and then every time they submit a post we re-render that template updating it to reflect any new posts so in this case we are creating a variable called posts and we are passing in posts so when that template wants to access what those posts are it can do so by referencing this variable that we are passing into it right here you can think of that more or less as a variable okay so we've got that yes so that looks pretty good that should be just about everything that we need here uh oh something else that we do want to do here is say from flask cores import cores okay so this is not always necessary but this these are security precautions that are going to allow uh our server to run properly here uh so essentially we're gonna install this package in just a minute but these are just security precautions to prevent certain things like uh cross-site scripting which could say um essentially that influences our sql could pretend well okay there's a couple different things that can happen there one we could someone could inject new sql code into our application to see every all the contents of our database and we don't want that to happen so that can help do things again protect against that and also cross-site scripting in this case we're not using any javascript specifically so they can't like insert javascript into our code and kind of cheat it in but there's other ways that you can cheat in other code and essentially execute certain things when users are trying to do something else and generally those certain things would be devious things so we're going to go ahead and close close this out now okay all right so that's what we've got now guys let's check out oh yeah we don't need to close it actually so let's check out what we've got we've got our server we have our models.py file which is the thin layer on top of the database to interact with the database we have our database file and then we have our schema and we wrote to generate our database okay so now the final thing we have to do is create the html template that users are going to see when they initially come to the website okay so let's go ahead now and create that um oops okay so let's go ahead and create that now so this file is going to be uh well first we're going to store it in a directory flask always looks in a directory called templates for your templates to display to the user so we're going to create a directory called templates in order to allow flask to find that and then inside this directory we're going to create a file called index.html okay now what this is going to do here is uh we are going to be able to display this to the user and the user is then going to be able to see this html uh and this is where we're going to show the posts and allow the user to submit new posts so we're going to say doctype doctype is html and we want to say html and then we want to put the body of our text so again guys these are just regular old html tags here and in the body here we're going to create a form and we're going to say we're going to say form and then action equals backslash here in between quotes that means it will send whatever method we specify after we submit this form to that endpoint in that case that is this endpoint right here and now we want to say what request so in this case guys we defined it so that if it's a post method then we go ahead and we create these pull this information and then we create the post right we want that to happen so we're going to say uh method equals post and then we want to go ahead here and put that information in our form okay so let's go ahead and say um in here let's put uh input with a placeholder to let the user know what to put in there and that's going to be name and then we're going to say um after that we're going to go ahead here and say name equals uh name okay so this name field is going to specify what the name what so right here remember we're looking for name request.format.getname these values right here that we're pulling are specified in our form by this name field right here okay so we've got that input now we want to create another input and this input is going to be the content of the post so we're gonna say placeholder input placeholder equals equals uh well post content and then we're going to say name equals post okay now finally we have a final input which is going to be our submit button so we're going to say input type equals submit value equals submit all right and then that will complete our form so right here this is the form that is going to be able to submit new posts to our application now we are going to go ahead here and create our um now we want to create our way to show the messages that are in our posts right so remember we are passing this right here post equals posts we want to be able to see all the posts that are pulled out of the database every time we render this template right because we want to see an updated view including all the posts that have been recently submitted every time that we see this template so let's go ahead here and and do that now so we're going to say um we're gonna say let's see we're gonna first create uh some special syntax here for for uh rendering this this python right so this is why this is a special template this is unique to python templating for html specific with flask so we're going to say uh for post in posts so essentially we can write raw python in our html template in order to render things this is pretty cool guys so check this out uh we say four post in post then we want to return a div and we're gonna say in that div we're just gonna have a post post one plus a um colon and post two okay so remember in our database field here in our schema we have our id we have our text and we have our content okay so in this case here when we get all these posts out of the database it is returning a set for us which is going to have those three values so again the first one will be the id at zero index second one will be the name of the first index and third one will be the content at the second index so we want to go ahead and reference that in our index.html file here with that and now these two squiggly backers right here just mean we are we are writing python okay so anytime you're doing like loops or if statements you're going to go ahead and use this and then anytime you're rendering actual python onto the screen you're gonna do that with these two uh two consecutive squiggly brackets with the information between okay so now let's go ahead and close out that div and now we can go ahead here and we will need to end this for statement so again this is specific to flask and python generally speaking python templating uh for html so we want to go ahead and end that loop with the n4 here and now that should just about do it for this here so let's go ahead here and save this template and now we know that we're going to see that template uh when we when we get this here because remember we have return render template index.html it looks inside the templates folder finds that index.html pass in this posts now in that index html we have the form for submitting new posts which when you submit it sends a new post request to this endpoint with that information which is pulled off a new post is created and then oops a new post is created and then we have uh we grab all the posts and return the template again and then in that template we go ahead and we loop over all those posts displaying the name of the person who posted the content of their post and then we end that loop and then we end the that's the end of that template okay so now in order to get our server to run and have anything up and going here we're going to say if name equals main app dot run and we're going to say debug equals true okay so what this is doing is saying if this is the file that is running so this if not if name equals main con syntax is basically saying um if this is fi if this file is the actual file that was selected to run then go ahead and and execute this otherwise it's just a library then don't execute that uh whatever is in that within that if statement block okay so now we've got that app.run dbax equals true so let's go ahead here and now we're gonna see where the errors are because i'm assuming there's there's errors there are almost always errors so let's go ahead here and see what we've got so let's go ahead and activate our virtual environment that has our python packages so we're going to say source my env bin activate virtual environment is activated all right so now we are referencing our our packages that we specifically installed for this application now we're going to say pip install flask cores all right so that will grab that um all right so we got flask cores now i don't think we need any other packages i think those are the only two we used yep okay so that looks good there so now let's go ahead here and try our running our uh server so python app.pi no module name flask all right pip install flask okay so let's try again python app.pi um okay so it looks like for some reason we are not referring to our uh virtual environment here when we try to install that package let's try again here we'll say source my env bin activate pip install flask let's see here python apt up high hmm okay um let's see here so we're gonna try we're gonna try this out we're gonna say um we're gonna say source my env bin activate and then we're going to say which pip okay so it looks like we're using uh the 3.6 we're going to say pip 3 install install flask and we're gonna try python3 app.pi okay there we go so now our server is up and running here let's go ahead and check that out so we're gonna go ahead and put in 127 uh just like that 127.0.0.1 at port 5000 now we are seeing that specified uh right here oh it looks like we have an error okay so get post get posts is not defined okay so we need to import that from our models file here so let's go ahead and say from models import uh create post get posts try again let me move myself out of the way um and let's see here invalid syntax import sqlite3 it looks like we accidentally removed that i put that in there path is not defined um okay from os import path try again there we go okay so now we are up and running here so now let's go ahead here and check this out get post is not defined again here so let's see what the error is um get post is not defined we have our function right here we are importing it get posts and then we are executing it there get myself out of the way here see is something not saved correctly def get post spelling is correct okay guys hang with me we're going to figure it out okay there we go so it looks like something wasn't saved correctly now we have name sql is not defined at sql.connect okay i was wondering how i had so we're going to say import sqlite 3 as sql i don't use sqlite very often so that's my excuse for not knowing that syntax okay so let's go ahead here and say python3 app.pi there we go and now we can pull this up here another error sqliteconnection object has no attribute qser so we're going to go ahead and get rid of that that's what it should be all right ah we don't need that okay now we'll try again expect token end of print statement got post okay so that is in our template so we're getting very close here guys um let's go ahead to our ah we need this other plus right here oh boy okay there we go and we try again there we go okay so now we have our screen here let's go ahead and uh put in an entry and see what happens so i'm going to say name equals john post content is hello submit and again we have a typo in our models file let's go ahead and get rid of that all right and we try again and there we go so john says hello now we can go ahead and here and put um john uh goodbye there we go and our post shows up so now we go ahead and close this out shut down our whole application here and start it up again and we will see those posts are still there because it is pulling from our database file there we go there are posts there's our name our content and there we go again thank you guys very much for watching i hope you guys enjoyed this uh please give me a thumbs up would be great uh please do subscribe if you guys just got here and uh yeah thanks for watching i hope you guys enjoyed have a great nightguys today we are going to create a social network using flask and python by end of this video you will know how to create a full stack social network including a database server and your front end and yeah so let's get right to it thanks for watching so first thing that you want to do is create your directory for your project so we're going to call the directorynet so let's go ahead and create that now we're going to say open up a terminal or command prompt and say mkdir net okay then we want to go ahead and change into that net and it's going to be an empty folder at this point now what we want to do is say pip install so assuming you have python installed on your computer you're going to have pip which is the python package manager we're going to say pip install virtual env okay so virtual env is a package that will allow us to create an environment where we can keep the specific versions of the python packages that we are using for this project separate from our from the python that is installed on our computer okay we are doing this so we can keep track of those packages and then if anyone wants to reproduce our project they know exactly what packages they need to install so once we have virtual env installed on our computer we're going to say source um oh no actually we're going to say virtual env and then we want to say the name of the python version that we're going to use so we're going to say dash dash python equals python 3.6 and then we want to specify the name of our directory so we're going to say my env okay so now that's going to create that virtual environment for us again this is where all our pi python packages that we install are going to be saved to once we activate that so the way we do that again we're still in the same directory we say source my vnv bin activate oh one sec guys oh my env there we go bin and activate okay so now we are inside of our virtual environment now we can install our packages so we are going to need uh one package in particular for this which is flask so flask is a uh is a python web framework that makes it very easy to get a website up and running quickly it allows us to create a basic server as well as render html to the page when our user comes to visit it okay so let's go ahead here and say pip install flask so after our virtual environment has been activated that is going to take that package and bring it into our virtual environment for us to use so now let's go ahead here and now we want to create our database schema okay so now we're gonna dive into we have our our dev environment set up we're gonna dive into how to create the application itself so the first step in doing this is creating the database schema so in our case we are only gonna have one table okay and a table in a database is where you store all information okay generally you may have multiple tables in our case we're just gonna have one which is posts so let's go ahead and create a file and we're gonna call it schema.sql okay so this is where we are going to create the uh or specify the values that are going to be in our database table okay so we're gonna say um in this case here let's go ahead let me open it up here um okay so we're gonna say drop table if exists uh posts all right and then we wanna say create table posts so what this is doing is this is saying if that table exists already in the database go ahead and drop it and then create a new one with the things that we are going to specify in just a minute here now these things we are going to specify our unique values in our database so first thing we want to do is create a unique identifier for every post so we want to say id which is going to be the name of our of our column in our database table where that value is going to go so every database table has columns that make up the values that relate to those entries into the database okay so we want to say id integer and that is going to be the primary key and that is going to auto increment so this is a little bit of lingo here guys this is just sql syntax for creating a primary key that auto increments so what that means is this is the the integer that is going to represent or reference the uh each individual post and as each post is added into our database you can think of it as you define the column values and then each post you add is a new row in your table that is going to be a new entry into your database that corresponds with those column values at the top so we have id integer is a primary key and that's going to auto increment so that means for each new entry into our database that is going to increase by one so now we want to create a name so we're going to say name is going to be text that means it's a text value and it's going to be not null so this is going to be for our entries so now we're thinking for each post that comes into our social network we want to be able to create this we want to be able to post an entry into our database right and in this case we want to know the name of the person that created it and we want to have the content of the post and that's what's going to be put into our database so that is the first value name is text not null next up here we want to grab the content so we're going to say content text not null so what not null is doing is that's saying if they uh if we try to create an entry and that is a content or name is not specified return an error because we want name and content to be specified for every single entry in our database okay so now that we've got that let's go ahead and just add our closing parentheses closing semicolon and write and quit this all right so now we have our schema now we're going to use our schema.sql in order to generate our database file so let's go ahead here and use sqlite3 this is a very light version of a database you might have heard of called mysql and this come built in with python so we're going to say sqlite3 and then we want to put database.db specifying the name of the database file it can be anything.db and then we're going to put a little less than sign and then we want to put the schema.sql after that okay and by the way guys if you haven't used autocomplete before in the terminal when you start typing the name of a file and click tab it will go ahead and it'll create the rest of that file name for you so again that's what i'm doing there to quickly generate that so we say sqlite3 database.db less than sign schema.sql and click enter so now when we click ls to see the files here we see that there is a database.db file all right so now we have we created our schema we created our database now we need to create the server which is going to handle the interactions with the database so to give you guys just a general overview of what the structure of a full stack application looks like you have your front end which is the view okay when you come to any website you see on the internet you are seeing the front end of a website that is the view and the information that is being displayed on that most often comes from a database so what is going on in between there that would be the server so we have the view and the server receives requests for information from the user which comes from the view right so the user comes to the view from there they're able to make certain requests to the server for information they want to see then the server goes grabs that information out of the database pulls it back and then sends it to the user which is viewing everything so you can think of it in three parts we have the view we have the server and we have the database right and the server is going to interact is going to be the intermediary in between there pulling information from the database making the changes that we want to make before we send it back to the to the user who is viewing it and then sends that information back to the front end to where the user is viewing it okay so right now we've created that final part that's the that's the database so now let's go ahead here and create that intermediary part which is going to be the server so let's go ahead here and say we're going to open up the server and that is going to be app.py okay so now what we're doing here is we're going and we are opening up this file here this is going to be our server file okay and generally speaking you can name that app.py that is sort of a a good practice okay so let's go ahead here now and install the packages actually let's go again a little ahead of ourselves here so let's install the packages so we're going to say pip install um pip install flask right so that will oh oh we already installed that okay so that's going to bring down that package for us that's again how we're going to make our web framework i'm going to move over out of the terminal for you guys and we're going to open up um and grab net okay so this is this is our file right here and again we have our app.py file which is going to be where we are going to add the information for our server okay so the first thing that we are going to do here is we are going to import flask so we want to say uh from flask import flask let me go ahead and move myself down here import flask render template this is going to be for displaying the html that we want to display on the screen then we're going to say also um let's see what else do we need here flask render template oh we need request in order to grab the information that is going to be the content and the name of the user off the request that's coming in and then we see uh let's see here flask render template request um what else are we going to need we are going to need redirect no i think we're good i think that might be enough okay so now we want to go here go ahead here and we're going to say we want to create our actual server object so we're going to say app equals flask and then we go ahead and we pass name as the parameter here okay so that is going to create our server object and it's called app so now that we have that we want to create the routes okay so when you have a server you have different routes that you can hit these are known as endpoints routes basically synonymous but essentially what they do are they are unique endpoints which tell the server which the server uses to decide what data to send back to the to the view half right to the user the view part of our full stack application so in this case say we wanted to log in a user we would often hit an endpoint called something like login and then that would run the necessary code on the server looking for the necessary information that was sent to the server in order to log in the user so in our case here we just want to be able to see a home page and then be able to create posts and see the posts that have been created so let's go ahead here and let's say at app.route and we're just going to do a backslash so this is just going to be the very home page of our application once we start it up which we will do here in just a second so we're going to say at app.route with just the backslash this could be anything like backslash home backslash login backslash whatever you guys want to put you can specify whatever name that's just going to be your endpoint you have to send the request to in order to receive that response back from the server so now we're going to say we want to say methods right so when you are sending information whether you're sending information or any kind of information on the internet we use things called uh methods so in this case uh the methods are going to be or include post put delete and there's a few other ones as well uh get is is obviously the most common one so when you make a request to see any web page on the internet that's a get request you're saying i want to get this information and they send it back generally that is going to be the web page the initial web page okay beside that we have post which is saying here's some information store in the database uh put which is saying here's some information you probably already have this in the database update what you have okay and then finally delete is here's some information about what we want you to remove from your database okay now all of these methods these put post uh delete um and get these are all known as this is what's known as crud but as another acronym you may have heard of but essentially these are again how you send the data from the um from the front end and these are all user actions so these all these are just acronyms for user actions okay so let's go ahead here and say there's two methods that are allowed for this endpoint that is just going to show our our page with the posts and be able to take in information so we're going to say the methods are get in order to get the page and post okay so when the post is for submitting all right so now that we've got our our app.route here we're going to create a function that's going to execute when we hit this endpoint so we're going to say def index we're just going to call this function index and then we're going to say uh we want to say if request dot method equals get then in this case we're just going to pass okay because if it's a get request we're going to go ahead and return the template that we want our user to see right because they're requesting to see the web page so we're going to say return render template and we're going to create this in just a second but for now it's going to be called index.html okay we're going to create that html file that our user will see when they send an initial get request to our server uh in just a second here so if request.method equals get we want to pass now otherwise here if request.method equals post then we want to go ahead here and we want to grab the content so if it's a post request we are making the assumption that our user has already come to our page and they are now posting information to our web page via some input fields that they see on their end okay so we want to say request dot form dot get and we're going to name our inputs in just a second but we're going to call them name and we're going to say request.form.get and then we're going to call the other one uh name and we'll say post okay just for this is going to be the value of whatever our user is the actual information the uh the text that our user is posting uh this is different from this post okay this is the method itself and then this is just a variable that's going to be part of that data that we receive that is going to contain the text okay so we're gonna have a name name equals that and post equals this and then we're gonna go ahead here and now we're going to create um that post and store it in our database okay so we're going to call a method called create post and we're going to pass in name and post okay so now let's go ahead here and actually create the file that's going to interact with our database okay so we need we created our database and right now we're starting to create our server which is going to handle requests but now we need a way for our server to interact with our database and we're going to create a thin layer that uh of functions that our server is going to use to add things to the database or remove things from the database okay so let's go ahead here and create that file now and we're going to call that file models.py okay so into this file we're going to say import sqlite3 okay and then we're going to go ahead here and do some do some path uh some pathing so essentially guys when we get to this um when we get to this file here when we get to this file here this is going to be the thin layer that is going to contain that information that is going to allow our server to interact with the database here and in this case we want to directly know where our database file is so we can open that up and interact with that so we're going to say root equals path dot dur name and we're going to say path dot rel path file so again essentially this is saying get the directory name and then get the direct path to whatever file we pass in as the file for this okay so we're going to say so we're going to use that in just a second you guys will see how that ties in nicely but we're going to go ahead here now and say uh create a function that's going to create a post okay so when that request comes in it's going to call this function with those with the uh with the name and the post data from that request and then it's going to insert that into the database so let's go ahead and say def create post and remember it's going to receive two parameters that is name and content okay and now we want to go ahead and create a connection to our database so we're going to say con equals sql.connect and then we want to say path.join root and then the name of our database file so database.db okay so now we've made a connection to our database now we're going to define a a thing called a cursor so essentially guys in order to efficiently pull data or not not pull data but traverse the database and find the information that we need we're going to use a thing called cursor and what the cursor does is instead of grabbing the whole database it just goes to what we need and makes it much more efficient for us okay so we're gonna say cur equals con dot cursor okay so that's gonna say this is the uh this is the the variable that represents the instrument or object that is going to move over our database and find the information we need so now we're going to say cur dot execute so this is going to execute raw sql syntax for inserting a post into the database so we're going to say insert into posts which is our table name and content so insert into the name and content uh columns are let's roll back insert a row into the name and content columns that is going to contain this data that was passed as a parameter okay so we're going to say insert into name content values question mark question mark and then we want to go ahead here and fill in those values what those are going to be so in this case that is going to be name and content all right so that will execute that sql statement after making a connection to our database inserting in the name of the person who posted and the content of the post next up here we're going to say khan.commit and con.close so that's going to commit that entry to the database finalizing it kind of writing it in stone and then close the connection to the database now we want to create one more method in this file as well which is get posts so we want to say def get posts that's going to be that's actually not going to take any parameters that's just going to pull all the posts that we want out of the database so we can display them on the html template that we allow our user to see so we're going to say def get post and we're going to say con equals sql sql.connect path dot join uh root and database dot db just like above there and then we say cur equals con dot cursor and then we want to execute a little bit different sql this time so we're going to say curve.execute select all which is represented by this little star all from posts which is the name of our table so that's going to pull all the entries out of our table and then we want to go ahead here and say posts equals cur dot fetch all so that will go ahead and store all those uh entries into our database that we pulled out with that last sql statement and store them in the post variable then we want to go ahead and return posts okay all right so that will go ahead and do that that will grab all our posts for us so now we have that file we're able to interact now with our database with that thin layer we have our database written written and now we want to finish out our server here so let's go ahead and uh check this out here and now we're going to go ahead here and create a few final elements okay so this is going to be we have our create post and now we want to go ahead here and just say posts equals get posts right so that is going to go ahead and grab all of the posts using that method we just created in our models.py file here grab all the posts out of the database and return them so that we can display them on the screen so we have post equals get post and then we want to go ahead and return uh well we have our render template right there and then we're going to pass a another parameter and we're going to call it posts equals posts so what this is doing here when we create our template which is what our user is going to see initially and then every time they submit a post we re-render that template updating it to reflect any new posts so in this case we are creating a variable called posts and we are passing in posts so when that template wants to access what those posts are it can do so by referencing this variable that we are passing into it right here you can think of that more or less as a variable okay so we've got that yes so that looks pretty good that should be just about everything that we need here uh oh something else that we do want to do here is say from flask cores import cores okay so this is not always necessary but this these are security precautions that are going to allow uh our server to run properly here uh so essentially we're gonna install this package in just a minute but these are just security precautions to prevent certain things like uh cross-site scripting which could say um essentially that influences our sql could pretend well okay there's a couple different things that can happen there one we could someone could inject new sql code into our application to see every all the contents of our database and we don't want that to happen so that can help do things again protect against that and also cross-site scripting in this case we're not using any javascript specifically so they can't like insert javascript into our code and kind of cheat it in but there's other ways that you can cheat in other code and essentially execute certain things when users are trying to do something else and generally those certain things would be devious things so we're going to go ahead and close close this out now okay all right so that's what we've got now guys let's check out oh yeah we don't need to close it actually so let's check out what we've got we've got our server we have our models.py file which is the thin layer on top of the database to interact with the database we have our database file and then we have our schema and we wrote to generate our database okay so now the final thing we have to do is create the html template that users are going to see when they initially come to the website okay so let's go ahead now and create that um oops okay so let's go ahead and create that now so this file is going to be uh well first we're going to store it in a directory flask always looks in a directory called templates for your templates to display to the user so we're going to create a directory called templates in order to allow flask to find that and then inside this directory we're going to create a file called index.html okay now what this is going to do here is uh we are going to be able to display this to the user and the user is then going to be able to see this html uh and this is where we're going to show the posts and allow the user to submit new posts so we're going to say doctype doctype is html and we want to say html and then we want to put the body of our text so again guys these are just regular old html tags here and in the body here we're going to create a form and we're going to say we're going to say form and then action equals backslash here in between quotes that means it will send whatever method we specify after we submit this form to that endpoint in that case that is this endpoint right here and now we want to say what request so in this case guys we defined it so that if it's a post method then we go ahead and we create these pull this information and then we create the post right we want that to happen so we're going to say uh method equals post and then we want to go ahead here and put that information in our form okay so let's go ahead and say um in here let's put uh input with a placeholder to let the user know what to put in there and that's going to be name and then we're going to say um after that we're going to go ahead here and say name equals uh name okay so this name field is going to specify what the name what so right here remember we're looking for name request.format.getname these values right here that we're pulling are specified in our form by this name field right here okay so we've got that input now we want to create another input and this input is going to be the content of the post so we're gonna say placeholder input placeholder equals equals uh well post content and then we're going to say name equals post okay now finally we have a final input which is going to be our submit button so we're going to say input type equals submit value equals submit all right and then that will complete our form so right here this is the form that is going to be able to submit new posts to our application now we are going to go ahead here and create our um now we want to create our way to show the messages that are in our posts right so remember we are passing this right here post equals posts we want to be able to see all the posts that are pulled out of the database every time we render this template right because we want to see an updated view including all the posts that have been recently submitted every time that we see this template so let's go ahead here and and do that now so we're going to say um we're gonna say let's see we're gonna first create uh some special syntax here for for uh rendering this this python right so this is why this is a special template this is unique to python templating for html specific with flask so we're going to say uh for post in posts so essentially we can write raw python in our html template in order to render things this is pretty cool guys so check this out uh we say four post in post then we want to return a div and we're gonna say in that div we're just gonna have a post post one plus a um colon and post two okay so remember in our database field here in our schema we have our id we have our text and we have our content okay so in this case here when we get all these posts out of the database it is returning a set for us which is going to have those three values so again the first one will be the id at zero index second one will be the name of the first index and third one will be the content at the second index so we want to go ahead and reference that in our index.html file here with that and now these two squiggly backers right here just mean we are we are writing python okay so anytime you're doing like loops or if statements you're going to go ahead and use this and then anytime you're rendering actual python onto the screen you're gonna do that with these two uh two consecutive squiggly brackets with the information between okay so now let's go ahead and close out that div and now we can go ahead here and we will need to end this for statement so again this is specific to flask and python generally speaking python templating uh for html so we want to go ahead and end that loop with the n4 here and now that should just about do it for this here so let's go ahead here and save this template and now we know that we're going to see that template uh when we when we get this here because remember we have return render template index.html it looks inside the templates folder finds that index.html pass in this posts now in that index html we have the form for submitting new posts which when you submit it sends a new post request to this endpoint with that information which is pulled off a new post is created and then oops a new post is created and then we have uh we grab all the posts and return the template again and then in that template we go ahead and we loop over all those posts displaying the name of the person who posted the content of their post and then we end that loop and then we end the that's the end of that template okay so now in order to get our server to run and have anything up and going here we're going to say if name equals main app dot run and we're going to say debug equals true okay so what this is doing is saying if this is the file that is running so this if not if name equals main con syntax is basically saying um if this is fi if this file is the actual file that was selected to run then go ahead and and execute this otherwise it's just a library then don't execute that uh whatever is in that within that if statement block okay so now we've got that app.run dbax equals true so let's go ahead here and now we're gonna see where the errors are because i'm assuming there's there's errors there are almost always errors so let's go ahead here and see what we've got so let's go ahead and activate our virtual environment that has our python packages so we're going to say source my env bin activate virtual environment is activated all right so now we are referencing our our packages that we specifically installed for this application now we're going to say pip install flask cores all right so that will grab that um all right so we got flask cores now i don't think we need any other packages i think those are the only two we used yep okay so that looks good there so now let's go ahead here and try our running our uh server so python app.pi no module name flask all right pip install flask okay so let's try again python app.pi um okay so it looks like for some reason we are not referring to our uh virtual environment here when we try to install that package let's try again here we'll say source my env bin activate pip install flask let's see here python apt up high hmm okay um let's see here so we're gonna try we're gonna try this out we're gonna say um we're gonna say source my env bin activate and then we're going to say which pip okay so it looks like we're using uh the 3.6 we're going to say pip 3 install install flask and we're gonna try python3 app.pi okay there we go so now our server is up and running here let's go ahead and check that out so we're gonna go ahead and put in 127 uh just like that 127.0.0.1 at port 5000 now we are seeing that specified uh right here oh it looks like we have an error okay so get post get posts is not defined okay so we need to import that from our models file here so let's go ahead and say from models import uh create post get posts try again let me move myself out of the way um and let's see here invalid syntax import sqlite3 it looks like we accidentally removed that i put that in there path is not defined um okay from os import path try again there we go okay so now we are up and running here so now let's go ahead here and check this out get post is not defined again here so let's see what the error is um get post is not defined we have our function right here we are importing it get posts and then we are executing it there get myself out of the way here see is something not saved correctly def get post spelling is correct okay guys hang with me we're going to figure it out okay there we go so it looks like something wasn't saved correctly now we have name sql is not defined at sql.connect okay i was wondering how i had so we're going to say import sqlite 3 as sql i don't use sqlite very often so that's my excuse for not knowing that syntax okay so let's go ahead here and say python3 app.pi there we go and now we can pull this up here another error sqliteconnection object has no attribute qser so we're going to go ahead and get rid of that that's what it should be all right ah we don't need that okay now we'll try again expect token end of print statement got post okay so that is in our template so we're getting very close here guys um let's go ahead to our ah we need this other plus right here oh boy okay there we go and we try again there we go okay so now we have our screen here let's go ahead and uh put in an entry and see what happens so i'm going to say name equals john post content is hello submit and again we have a typo in our models file let's go ahead and get rid of that all right and we try again and there we go so john says hello now we can go ahead and here and put um john uh goodbye there we go and our post shows up so now we go ahead and close this out shut down our whole application here and start it up again and we will see those posts are still there because it is pulling from our database file there we go there are posts there's our name our content and there we go again thank you guys very much for watching i hope you guys enjoyed this uh please give me a thumbs up would be great uh please do subscribe if you guys just got here and uh yeah thanks for watching i hope you guys enjoyed have a great night\n"