Build A Blog With Django And AstraDB NoSQL Database

in this video we're going to be building a blog application from scratch using django if you don't know what django is django is a python framework which allows us to build web applications so if you are new to jungle or you don't have any prior knowledge of django i'm gonna be starting from scratch so i'm gonna explain every single thing we're gonna be doing so you'll be able to follow along with this tutorial and for the database we're gonna be using astra db so astra db is a nosql database and i'm going to be showing you how you can integrate that into your django project so before we get started make sure that you sign up to extra db and once you're on your dashboard you should see something similar to this and i'm gonna leave a link in the description below where you can just click and sign up for a free account right now and once you have that done you can follow along with this tutorial now let me show you a quick demo of what we're going to be building so it's a very simple blog but as you can see it just says tech blog the title and right here it just shows a bunch of blog posts so for example if i click on roadmap for learning jungle i'm gonna see the dates and time it was posted and i'm gonna be able to read the details of this and i can click here to go back to home and at the top right corner you see that we have this link called new post if i click on the link and i just say another post something and then i just like copy that for the post body and once i hit submit this is the new post as you can see now it's it shows as the latest posts it has been posted to this particular blog so we're going to be doing a simple crud application so create read update and delete we will be able to create a new post read all our posts and some other database manipulation in this project so let's dive straight into it the first thing we want to do is to create a new jungle project but before we do that i must say that the link to the github repo of this project is going to be in the description below so you can access the whole source code and the end product of what we're going to be building in this video so if you are stuck you can easily check the source code and you can also get access to the template files used in this video having that said let's get started with creating a django project so before you create your jungle project you must make sure that you have python installed so for you to install python just download it from the official python website and install it it's just a normal installation once you have that installed you should have pip installed automatically so if you have python installed what you can just do is to open your terminal or if you are on windows you can open your command prompt and type pip free so if you type pip3 on a mac you should see all of this but if you're on a windows just type pip and then you should see it should give you a response so if it gives you a response damage you have pip installed then after having pip installed you can now use that to install django to install jungle we just say pip free install angle now note that if you're on a windows all the commands i'm running whenever i pull three you don't need to put that you can just say pip install jungle or python whatever because even if i'm on a mac mac has python 2 installed on it so anytime i do python run setup.py it uses python 2 but if i specify by same python 3 run setup.py then it uses python 3. so that's why we have to specify 3 on a mac whether you're only windows and you just have python 3 installed then you don't need to do this so now we're just going to say pip3 install jungle but i have django installed already if i press enter you can see that it gives me requirement already satisfied but if you are on a windows just do pip install jungle and if you have it installed already it's going to give you this but if you don't have it installed it's going to go ahead and download it so now that we know we have django installed the next thing we want to do is to create a new jungle project first of all we must make sure that we are in the directory where we want that project to be so if i press ls i'm gonna see that i'm not in any specific directory i'm just in the root user directory so i want to move into document i'll say cd document and then i can see all my document files and then from here i can make a new directory and say project and then i can cd into project and now it should be blank okay so it says file already as is so we already have something called project so in this project now i can just say django admin that project tech blog if i hit enter this particular command creates a new django project named tech blog now if i press ls you're gonna see now that we have tech blog right there and i'm gonna cd into tech blog and if i press ls you're gonna see that we have a couple of files and folders right in there what i'm just gonna do now is to open this up in vs code i'm gonna come here into vs code and i'm just gonna say file open folder and in open folder i'm gonna go into document i'm gonna go into project tech blog and i'm gonna open this up so very quickly this opens that up for me on vs code now you can see that we have these files here if you are not new to django you probably already understand what this file does but if you are new this is just like the default boilerplate that django generates when we create a new project so what we want to do now is to create a new app so django is what we call this project and it has an app so the project is like the root of that particular application you're building so for example we have facebook.com so that facebook is the main project and then under that project we can have different apps so one app can be taking care of the authorization that's signing in and signing out of signing up of the user and another app can take care of the notifications and we have another app just for the facebook marketplace so basically we can see an app as subset of a particular application now most of the time when you are building an application in django you might just need to create one app except you are you know working on a very large project which you might want to create multiple apps but for this video we're going to create in just one app and to do this we're going to come back into our terminal so we must make sure that we're in the root directory of this django project and the root directory of the django project is a folder that contains the manager's py file so since we know that we're just going to say django admin very similar to the start project but this time we'll say start app and then let's name this a blog so we have the project name tech blog and we're just going to name this blog once i hit enter it doesn't give me any response but if i say ls now i'll see that i have a new folder named blog and if i come back into my vs code i'll see now that the new folder name blog has been generated with multiple files in it so to this point we'll be able to create a new project and a new app now let's move forward with creating our database on astra db the next thing we want to do now is to create a new database on astra db so right here i am on my platform as i said earlier uh astra db is a nosql database so i'm going to show you how you can be able to connect this nosql database and integrate it with your django project so first of all make sure that you have been signed up to astradb i'm going to leave a link in the description below where you can just click and create a free account it's totally free to start and once you have that you should see a platform like this and once you get started you might not have this database here as you can see i have one database that is one i've created before but what i want to do now i'm going to create a new database and walk you through everything step by step on creating the database and connecting it to django so let's create database so it's just gonna open this up for me and let me name the database name tech blog and for the key space i can just take underscore blog and you like this we can just use let's say amazon azure and let's say northern europe and then we can create database so this is going to create a new database for us and it's just going to take a few seconds to load it up so once i click create database it's going to start you know the process and the status is going to be pending initially so if i come down here on tech blog you see that the status says pending it's going to take a few seconds to start and once everything has worked successfully it has created that database i'm gonna come back so right now as you can see the tech blog database shows active so this means our database has been connected has been created successfully so now we can just click on this database and then we're gonna see more details about it so we can see that it has this key space named tech blog i'm gonna tell you why we're gonna use this key space and everything that this is about later in the video when we're actually connecting it with our project i click on elf that's just to see so it's going to load up some things that's just to see like how we are using the database and some other details so it's going to load up as you can see you're just going to say the requests the errors and everything that we've you know database for and this connect is what we're going to be using so as you can see it gives you different ways of connecting this database to whatever technology you are using so uh connected using an api so you can see that's document api graphql api and rest api and you can also connect using a driver node.js python java and using an sdk so that's what i like about this platform basically gives you various ways of connecting it so you're not just talking one way so now we're going to be using connect using a driver if i come to python i'm going to see all of this so basically that's what that does and i'm going to come back to this when we actually want to connect this database to our project if i come into sql console so this cqr just allows us to do a lot of things or manipulate our database from this command line so from here we can see all the data we have and do some major things that you do with databases and then this setting just allows us to configure some things like we can restrict the public assets we can terminate this database that means delete it and yeah so now let's just go ahead and connect this database that we created with our django project till this point we've been able to create our django project and create our database on astradb what we want to do now is to connect the database that we created on astradb with our django project so that will be the database we're going to be using in this project so right here i mean connect as i said earlier we're going to be connected using a driver so we're going to come into python since that's the language that we are using and what we want to do is to first of all come down here i want to install cassandra driver so this is just the library provided by cassandra so it can help us integrate the astra db with python in general so we're going to come into terminal right here and actually i just want to clear this terminal up and now let's paste a command but let's change p to pip3 i already have this installed so as you can see it says requirement already satisfied so for you if you don't have it installed you should just go ahead and install it but since i already have it installed it tells me that now that i know i have cassandra driver installed i'm just going to go back here and then the next thing i want to do is to download this bundle so this secure bundle as you can see it says download your secure connect bundle what it does is it's basically us all our everything you need to be able to connect with whatever project you're using whatever python project you're using so that's just the bundle provided by astra db so it is a zip file once i click download you can see that it's secure connect upon do dot zip so this zip file i'm gonna want to like move it to the root directory of my project so i'm just gonna drag it from here and paste it there so now that i have that there you don't need to unzip this once you just have it there it's fine so since we have this day now we can come back here now the next thing we want to do this is like a process so you can just follow along next thing to do is to create a database administrator token so what i'm going to do now is i'm going to come right here and i'm going to click on organization settings so under organization settings i'm going to come down to token management if you come down here you'll see that i already have two tokens created before they are both database administrator and i see still have all the details so i can use that in this project but just so i can show you how to create your own and you know not jump any steps let's just start that from scratch so right here where it says select row we're going to select database administrator and it's going to show this so it's basically going to show what this token is going to be able to do he's going to be able to read ipr access list you know create database expand database and all those fun stuff once i click generate token now you see that it says your token has been generated and you can see that it gives us a warning it says important copy or download the csv before you navigate away from this page because this is the only time we're gonna get to see the client id and the client secret that's why we need to download this so we can either just like copy this somewhere before we go from the page but let's just make sure we have that downloaded and once you have that downloaded i'm also going to move it to the root directory of my project so i know that i have that save and i can close this so even if i go away from this page it doesn't really matter now that i have that also i'm gonna install something called django cassandra engine first of all let me show you what i'm talking about so on pypi there's a library a python library called by django cassandra engine so what this does is that it allows us to integrate cassandra with django so right here if i come back here when we clicked on connect i'm just going to quickly come on back so if we go back and we come to manage database we're going to go back a little right here you can see that this is a python driver so it just allows us to connect it you know with python but because we're using a specific framework a specific python framework this django cassandra engine makes everything easier for us so it undoes the integration of cassandra the cassandra engine with django so basically we can easily use this into our jungle project so what we can just do is to make sure we have this django cassandra engine installed and then i'm going to show you how you can use this django cassandra engine to integrate your database with your project let's copy the command line go into our terminal gonna paste that and make sure we change this to paper free and we hit install so again it says requirement already satisfied that is because i have this installed already but if you don't you should go ahead and install that but now that i know what this is for and i have all the details i need i've created my token i've installed cassandra driver i've installed jungle cassandra engine and i've downloaded my secure bundle what i'm just going to do now is to go into visual studio code right now i'm gonna connect that astra db database that we created into this django project i'm gonna need to come to the initial project so if you are new to jungle basically as i explained in the intro of this video django is a python framework which allows you to build web applications so this is like the boilerplate that django creates when you create a new project and a new app so it has all these files i'm just going to quickly go through what these files are and the ones you should be majorly focused about so first of all this is the project we created called tech blog so this image.pyfi it contains when some information of when we migrate our database our models to the database so you might not know what a model is basically django uses what we call model to specify or create a databases so you're also going to see how we're going to do that later in this video so some of these files you don't really need to know what they are used for now but if you are just getting started with jungle what you need to look out for is the settings.py file urls.py file for the project file so these urls are too is going to allow us to be able to specify or add different urls to our project for example if our project is techblog.com and we want to add let's say another url i say techblog.com sign up in these urls of p wi-fi we'll be able to add that sign up if you want to ask like sign in or want to a slash profile so basically it's going to allow us to you know add different urls in our project and these settings.pur is where the main stuff is going to be going on for example when we are connecting our astra db with this particular project we are going to be doing everything in the settings of py so you don't really want to mess with this file because one little thing can you know spoil the whole application or once you are comfortable with django you know what you need to do and what you should now the next thing i'm going to go into is this blog so earlier we created a new app named blog so this blog is going to have admin dot py apps dot py modules or python py views and also the init file and migrations file so what you should really bother about in this video is the models and the views so these two as i said earlier django uses models to create databases so this way we're going to be basically specifying all the models we're using in this video on our project and these views dot py for example django uses these views of py to specify different views or so you can add different things that you want to do so basically this is where all the process all the back-end stuff goes on for example if we want to send data from the front-end to the back-end and we want to create a new user or want to you know create a new blog post this is where we're going to be doing all the coding that is going to create the blog post and on so i hope you like get the basics of what all this file does and for this money.p wi-fi we don't touch this at all so this is just the file that helps us run most of the commands and you're gonna see how we're gonna use this file also later in this video so right now we know that we have all of this we have generated token the secure connect bundle now what we just want to do is to start and what we're going to do is to come into settings.py file and since we have cassandra driver installed we're going to have to import some things so i'm gonna say from cassandra import consistency level and the next thing i want to import is from cassandra dot cluster import cluster and after that i'm gonna save from cassandra dot alt import plain so this is going to be plain text auth provider the second one and that is what we're gonna be importing for now another thing we want to import is os so i just import os so just one i just like to take care of all the importation at the beginning so we know we have that done and then what we're going to do is to come down to where we have installed apps so in django once you create a new app in your project you need to add it to installed apps so django can recognize that this particular app is part of this project so to do that just add the blog we're just adding blog which is the name of the app so once we have this done now the next thing we want to do is to also add django cassandra engine to the installed apps so basically the django cassandra engine that we imported we also need to add it to app so it can be able to air pause you know organize or take care of the integration for us to do this i'm just going to copy this variable name and i'm going to say install apps will be equals to django cassandra engine plus installed apps so now basically what it's just doing is adding this django cassandra engine to the initial list that is in this installed apps and just updating it with the main installed apps it's just basically adding this django cassandra engine to this and the next thing we want to do after doing that is to specify the session engine so these sessions are going to be the session engine that's going to be taking care of the databases section it's also django cassandra engine it's going to help us take care of that also we're going to say session engine equals to jungle sandra engine sessions that's backend and s db so after that is taken care of the last thing we're going to do on this settings of py file is to configure the major database so i'm going to come down so i'm just going to scroll down to where i see database so this i'm going to copy this actually and then once i have it copied i'll comment it out because we're going to be overwriting that we don't need that let me paste it again and what i want to do now in this default so for the engine that we're going to be using for this database you might have guessed by now yes it is django cassandra engine i'm going to change that to jungle underscore cassandra engine and then the name now earlier in this video i said that when we are creating key space for our database in astra db i said i'm going to explain why we need that key space later in this video so now this is why we need our key space because when we're defining our database the name is going to be the name of that key space if i scroll back to astra db and i come to tech blur so you can see that this key space name is what we're going to be using in the configuration so i'm not going to be using the main name of this particular database we're going gonna be using this key space name right here now i'm just gonna paste tech blog and then after this i'm gonna have options yeah i'm gonna say connection connection i'm gonna say us underscore provider now i'm going to use the plain text auth provider that we imported earlier so if you remember right here we imported this i'm going to use that now scroll down a little bit right here now i'm going to connect it using the client id and client secret so remember that we generated some tokens and we downloaded it and put it here now this client id and client secret is what i'm going to be using to connect to my database i'm going to copy this client id right now come back in here paste it have a comma and then i'm going to come back in here and i'm also going to copy the client secret which is the second one i just want to make sure i copy the right thing a little bit and yes that's quite a long id so yes we know that okay gonna stop here because the next one now is the database administrator and that's the rule and this is the token so this is the id the secret as a client secrets code i'm going to copy that come back in here and paste it now that we have that pasted we're going to have a comma here and hit enter now the next thing we want to do say cloud and what this cloud is going to do now is connecting to this secure connect bundle that we created earlier so i'm going to say here let's go connect let's go bundle and i'm just up this right here i'm just gonna say where this bundle is the location to the bundle and we know he's in our roots directory so what we can just do you just copy the name and paste it in here right in here so now that we have that done actually let's remove this and let's give it a proper name so let's rename it just secure connect bond with tech blog and right now we have that done so this is basically what we need connect to our database so we can save this now so everything is done to this point next thing we're going to do is to actually create a django model and then sync that model with our database then then we can verify if all our connection worked successfully now we're going to create a new model in our project so if i come over to blog i'm going to open a file called models.pr so what i'm going to do in here now is create a new model to take care of all the posts that are going to be in our blog remember earlier in this video i said that django uses what we call models to define our database or to create new data new tables in our databases so you can think of one model as a table in a database and the attributes in that model as the row in each of that data so now we're going to have to create a new model for our post so this is where when we create a new post all the data is going to be stored using this model so normally if you know django prior to watching this video you know the normal way of creating jungle modules but since we are using astra dba there's going to be a little difference or a slight difference but it's not the difference is not really significant but i'm going to walk you through everything we're going to do right now so first of all i'm going to import i'm going to say from cassandra let's see well engine i want to import columns and i also want to import django cassandra model so we'll be able to create model that astra db and recognize i'll go underscore cassandra engine dot models import i'm gonna say django android model this is what i want to import and right now what i'm just going to do is go ahead and create my class so when i want to create the model we use classes so to create a new mode i'm going to say class post model and what i'm going to do now i'm going to take from this django cassandra model i'm going to say jungle cassandra model so this is the name of the model and now it's going to have four fields going to have an id i'm going to have a title gonna have a buddy and it's gonna have the date or screen i'll say created at so now that i have these four fields i'm just gonna give them values so this id is gonna be the primary key i mean django or in a django model a primary key is like the unique identifier of that particular object created on that model so for example this is the model here when i create a new data using that model what i created is called an object so each object you have a specific unique identity so this id is what i'm gonna use as that unique id so for us to be able to do that i need to set this as the primary key so first of all i need to say columns dot uuid and i'm going to set primary key equals to true so now that i have this set i also want to give it a default value because this idea i don't want the user to be able to you know put a unique id by himself because i make an error or it might not be unique i want the application to automatically generate a new id so for that i'm going to say default equals to but now i'm going to use the python library called uuid so to do that i'm just going to say import uuid and once i've imported this i can come here now and give it a default of you id so to uuid for i'm gonna use for so that means once a new object is created automatically a unique ad is gonna be generated for that particular object and now for the title let's just say columns dot text that's going to be a simple text field and let's set it to be required the required equals true now that we have this done the for the body also we're going to use columns.text and it also has to be required and for the created art we're going to say columns that's date time the field we're going to use and we also want to give you the default because we don't want the user to write the date and time that he posted a post i created a blog post so we want the computer to automatically get the current time and give it to that value we're going to say default but for this default now for the application to be able to get the current date on time we need a particular python library called date time so we'll say from date time import date time if you have python installed this uuid and datetime comes rebuilt with python that means once you have python installed it is automatically installed also so now i'm just going to give it a default value of date time that's now so this dot now says the current time now i have this done i have specified all the models i've given it all the values and i've explained everything i did i'm just going to make sure i save this file and i'm going to go back into my terminal i come here let me clear this up again now what i want to do is to sync this model i created with astra db for me to do this i'm going to use a command line called sync i'm going to say python 3 manage dot py sync db when i hit enter see it gives us an error it says no module named django cassandra engine so the reason why we have this error is definitely because of a typographical error when we are specifying django cassandra engine in our code this should be an underscore and not a dash so we definitely made the error earlier so let's go back and check settings.py file under here and install the apps you can see that it is iphone so we just change that to underscore and underscore i'm gonna save this let's quit that and we come back here now and run that again so you can see now that it gives us another error it says no such file or directory as secure connect tech blog so what we're just going to do is to come back in here we come into the settings.py file where we specify this secure connect tech blog we also didn't specify if i hit enter here it has an extension named zip dot zip so what we just need to do is to come back to settings and right here we just need to make sure we add dot zip we click save that should be taken care of now let's come back and then once we run first of all let's just make sure that we clear just to make it look better now once we run this let's see the response good so now we don't have any error it says creating key space tech blog and syncing block the models of post model that should be done successfully now but for us to confirm this first to confirm that this particular module has been synced with our database we need to come into tech blog which is our database we are going to come under sql cql console and right here we can just check if that has been synced so what we're going to say we're going to use tech blog so this is just like going into tech blog and right here you can see that it's like continuous and that is because when we're using this cql console we need to end it with a semicolon so i'm just gonna opt out of that or we can just add a semicolon like this so what you're supposed to do is to use let me colon to end it once you have that next thing we want to do is to say select star from boost module and end semicolon good so as you can see now we have id body created that and title if we come back here id body created that and title so we have everything working now we know that there is truly a post model that has been migrated to our astra db so our database and astra db so since we know we have this now what we can just do is to test it out by creating a new object and then checking if that of when we create that object it's going to update right here so i'm just going to come in here i'm going to create a new object under this model i'm going to come back refresh this and see if that object has truly been saved in our database so right here now what i'm gonna do is to use something we call the shell so django has this feature which allows us to run some quick command lines using the shell so to do this i can come back to my terminal and what i can say is just to run a command line to open up the shell first of all so i can say python 3 manage dot py shell and it's going to open up a shell or an iterative console now what i'm just going to do is to say from blog dot models import post model so what i just did was i said from blogger modules in port post model so from this blog application dot modules file import this post model that we created so now in there what i'm just gonna do i'm gonna have like a new variable i can say p is equals to post model dot object dot create and then i'm gonna give everything this value so this just allows us to create a new object under this post module i can say title equals to how to deploy an application and then what i can also specify is the body goes to i can just say is the body of this post and then i can close this up once i close this up now just gonna hit enter so we gave values for the title and the body coming here give values for the title and the body the reason why we didn't give values for the id is because it has a default value so it automatically generates a unique id and for the created at we don't need to put the time automatically it gets the current time and fix that in so i'm gonna do now i come back here i'm gonna say p dot save so this is gonna save this in our database as you can see now it says post model the id automatically generated using this unique id the title we gave it the body and the time it was created so it uses this particular syntax but when we render the time it uses it in like a normal way of writing time like 2021 then something like toolbar or something like that so don't get bothered about that but now let's go into astral db and check if this was really created and saved in here so i'm just going to bring back this particular line and hit enter boom so you can see now that we have one value that says the id this is the body of the post the time it was created and the title of that particular post so now that we know we have this we have the database connected with our project then we can move on with this tutorial what we're going to do now is to configure or set up the template files that we're going to use in this project first of all what i mean by template files are the html files that we're going to use so to render the front end and before we continue with this i want to say that you can get the template files that we're going to be using with the link in the description below so i'm going to leave a link to the github repo of this project so you can get all the files that we use in this video including the template files static files and every other thing you need so we're going to be configuring the template and static files so if you are new to django i don't know what these are what they do the template files basically are the html files that were using our project and then any other files like css javascript images video files and those are static files so that's the way jungle sees these type of files so but for django to be able to render these particular files with you know a url or something like that we need to configure it or set it up in a particular way that jungle understand so what we're going to do now we're going to first of all set up the template and static files and we're going to create a url and that url we're going to connect it with a template file so that once the user goes to let's say our website dot com is gonna be able to open up that template file so let's go ahead and do that first of all i can close this models of py up and i'm gonna come to the root directory and i'm gonna open a new folder and i'm gonna name it template and the second folder i'm gonna open is static so it's not supposed to be in there so i have to delete that i can delete static so static is also supposed to be in the root directory static so now that i have template and static the templates folder is going to contain the html files so if i scroll right here i have the files i need so this index.html newpost.html let's select that index new post and post we're actually gonna select these three so i'm just gonna drag them into my project and i'm gonna put them in template files but now that i have those any other files i'm gonna use i'm gonna put them in a static file so the assets is css and javascript i'm actually going to copy that and just drag it into my project and make sure that they stay in static files but now that i have all of this set up what i just need to do is to tell django that this is where these files are located so jungle actually have to know where the files are so that it will be able when we actually render a particular html template it knows the folder to go and look for that template so for us to do this we're going to come back into the term the settings file so on that tech blog we're going to settings and then in these settings i'm just going to scroll up and look for where we have templates so right here where we have templates we'll see we have theirs this is where we're going to specify the location of our templates the os dot path the join and say base there template so what this is doing is is telling django that whenever we exit to render a particular template it should go into the base directory slash template and look for that particular html file or template file so these templates must correlate with whatever you name it right here we can save that now and also we need to do the same thing for the static files so we need to tell django where to go ahead and look for static files just like we told it where to look for template files but for static files are going to scroll all the way to the bottom and right here where we have static url we are just going to have static root underscore root goes to os.path the join and what's gonna be in there is base there and we can just say comma static files and the next thing we want to put we're going to say static files there so this where static files are located directory is static gonna be equals to where's the path the join and we'll say based there comma i'm gonna say static and we're gonna have a comma right here so i'm gonna save this now django knows where to look for our static files and our template files now that it knows what to do what i'm just going to do is to create a new url so we can quit this now we don't really need this for now i'm going to come into our app remember earlier when i was explaining what all the files does i came into that was in our project folder and i said this is where we specify all the urls that goes into our project so that's what we're going to do now so now this app since just one app are going to be using we can specify all our urls in this particular app what i'm going to do is to create a new file in here and i'll say urls.py and in this url.py now i'm going to have to say from angle.urls import path so this part is actually what we're going to use to specify the urls so i'm going to say urls barrow patterns be a list and in here i'm gonna save path i'm gonna have a comma i'll say views dot oh i'm gonna explain what all of this does let's say name equals oh i have a comma so first of all what this does is we have a path that's how we we called it like a new url and then after it is going to take a parameter and what is going to go in here is the url so for example let's say i want my website should be demowebsite.com then i want to go to like slash profile what i'm going to do here now is just say profile so what this means is that whenever isa comes to our website slash profile then do whatever this is well if i leave it blank this means the home page of our website so when user just come to ourwebsite.com then this is what you need to do now after that we're going to specify views.on so as i said earlier this views file is going to be where all the main coding is going to be done all the database manipulation and everything so for example now when a user comes to the home page what should be done if you need render an html page actually just throw a response then that is what is going to be done in these views right so as you can see it says views.on what this dot o means is we're going to have a function here that says own and it's going to take a request then this function can do something now then let's say we just want to render an html page we can say return render we can say request and then we can say index.html so what this does now is right in here in this url once user comes to the homepage it goes to views.on so it comes into views and then it looks for any function with the name oh and then we're just giving it a name of home so this is like an id that we can use to identify it anytime but now we have this done but you can see that it still gives us this like warning but this is because we are using something from another file but we didn't import that file so we need to import this views file so we can say from that import use so right now we've imported views so we said from the current directory import views now that we have views imported we can use anything from this views file now what i'm just going gonna do is to save this and save this well the thing is if i run this project now when i you know run it on my browser on my locals it's still not gonna show me the page i want and this is because everything we've been doing since we'll be doing it in this app called blog remember i said the app is just like a subset of the main project so we need to tell the main project that whenever a user comes to our website this is the url you should use to render anything we are rendering once to do that i'm going to come to the main project go into the urls.py file i'm going to have to specify a new path right here i'm going to say um and then we're going to use something named include but before we can use that include we need to import it after this path we'll say include and now that we have that imported we can say include and then we want to include blog dot urls so what this is doing is that is including the url.p wi-fi from blog app so from this blog app so now once a user comes to the home page it's going to go in to block the urls and it's going to look for the url that matches this so we come here that is this url and whatever is being done here is what it's going to do is what it's going to render so what has been done here is use dot ohm so it goes into views.oh and we're rendering this index.html page so now when we run this project everything should work totally fine now let's come back here actually we were in the shell a little bit earlier so i'm just going to opt out of that shell and let's just clear and let's make this a little bit bigger pay it up what we want to do now is to run this project to run the project we're going to use a command line or ei command line called python3money.pyron server the python3 manage dot py run server so this particular command line allows us to run our project on the locals i'm going to hit enter and now we shouldn't have any errors and our project should be up and running as you can see it gives us this particular link what i'm just going to do is to copy this link this is the localhost and the ports that our project is running on what we just want to do is to go into our browser right now and open up that particular link boom as you can see now it shows this our project and it renders that index.html page for us so to this point now we've been able to configure a url and then render the html page that we need and as you can see it's not really looking good and this is because i come back in here we have static files which are connected to these template files but in each of the template file we didn't actually connect them to each of these static files so for example the css this uses css from css slash style so if i come into static it uses from css and uses this styles or css but he's looking for a css folder that is in the root directory but obviously there's no css folder in directory it is actually in the static then css and style.css so django actually this is a different way of doing this so for us to actually you know render or use any other external file we need to use something called static so what we're going to do now first of all we're going to come up here and then gonna use two percentage sign i'm gonna load static so this load static now is gonna allow me to be able to take all these files from this static folder not it's looking for it from any other place so for example where we have this favicon dot ico what i'm gonna do is to put use this particular code static just before link i'm going to close it using percentage sign and curly braces so this is the particular code that we can use to get our files to be in front from the static folder i hope you understand why that we can just copy this and copy it and any other place we have a file and just paste it in there so i'm just gonna paste that and then let's see right here and see that we have this right here and just so what we can do is just to make sure that everything is in the right place so we paste it so actually let's undo that of this and it shouldn't be here so that's going to give us like an error but just ignore it it's because normally it should be in this format with this href but since it's like using styles isn't css so it doesn't recognize that but that is totally fine and then the next thing that i'm sure we are using is this js so basically what you should do is just look for everywhere we have an external file and just put this particular code in there that is good now that we have all of this let's save it and then if we come back to our app that is running and hit refresh you're gonna see that we have everything working successfully so as you can see we have tech blog a blog for quality getting quality articles come back in here and see that that's what shows you a tech blog a blog for getting quality out and right here we just have test body test title and posted on test date so this is just the way our blog posts are going to be appearing but for now this i just add coded values if i come back here and i scroll all the way to the bottom so you can see nicest test title test body test day but actually what it's going to be doing later on is getting all the data from our database and then rendering it dynamically so it's not just going to be this static data type so to this point we've been able to configure our urls as templates and static files and we've been able to allow users to come to the homepage of our website and see this now what we want to do is to be able to create a new post so once we come here and it click on this button or click on this link we should be able to be taken to a particular page where we will just fill out a form and then create a new post from that form but before we do that let's quickly come into our code right here when we're specifying the static we need to make sure that we have only braces here that was an error so once we save this now what this does is that it basically provides a background image since we have this corrected and we come here and hit refresh now you can see that the background image is shown so like any slight mistake in the syntax can cause the code not to work so what we just need to do now is to just make sure that we can create a new post the first step in doing that is to come into the urls the py file of our app we don't need this again i'm actually going to create a new url i'm going to name this new post and then to go to views.new post and we give it a name of new post so what we are doing now is basically setting a new url and then in the views we also want to set a new view i'll say def new quest and we want to render let's just copy here we want to render newpost.html if we come in our template we can see we have newport.html this is what we want to render so let's save this files and now let's make sure that our code our project is running come back in here now and hit refresh and just go to slash new post and as you can see it shows me this new post page so it shows me this form where i can hit the title and the body and click submit well as you can see it's also not looking good and that's because we haven't configured the static files for this we also need to go back in here now open up newpos.html first thing we must make sure that we do is to load static so let's just right open here load static and then right here just want to have the static like this and then we need to close that there so we also need to copy this okay let's make sure we have that done correctly now we can copy this and then any other place where we see we can just put this and paste and then if we go to the line 40 right here and also paste it so we don't need this right here and we don't need this what we do need is this right here and then we can just scroll all the way to the bottom and then right here we can also paste it in there so now once we hit save we should be able to come back and hit refresh and it should show us everything we need to see so now that we know we have this we can just write some title on somebody and once we hit submit we want it still throws us an error number because we've not configured or set up that form but we want you to be able to some take this value and then save it in our database and astra db and then re direct us to the home page and then later we're now going to get a list of all the posts or the data we have in our astra db so what we can just do now is to come back in here so now that we have all of these first of all let me go into index.html and let me search for where we have new post this new post so i can do right here you can see that you just have a hashtag so i can say new post it's going to take me to slash new post and if i come back here and go to the home page and i hit refresh if i come here to new post now you see it takes me to the new post page so also right here in the home i can just say slash so slash takes me to the home url and i can just do the same thing for the new post i'm gonna search where i have new posts or where i have home so it just take me to slash and for new post i can just also leave it blank once i leave it blank it means that it comes back to this particular page now if i say new post it just reloads if i say um it takes me home so that is what i want to do and that is done next thing to do is to set the form so let's quit this we don't really need the index.html for now and then right here in the form we're just going to scroll down to where we have this form so you can see that we have this form here now what we want to do is to be able to send this from all the data inputted in this form to this views.py file and then in here i'm going to send it to this new post function then in here we're going to be able to submit the data that was collected from this form and save it in our database in astra db so now let's just go ahead and do that so the first thing we want to do we're going to go back to our form so right here in the new post we need to make sure it has a form id that is not really important for this but it's good to have a form id and we need to make sure that he's using a method of post and the action is blank so what this action does is that it sends all this data back to this particular page so what i mean is that this new post once i submit i go to new post and i submit the data it sends all this data back to this new post now the reason for that is so that it can submit it back to this particular view so once you submit you to this particular view then i can in here i can be able to get the data and then save it in our database so now that we know we have that as i said earlier isn't a method of post so i think posts is ideal in this point but first of all why is it a get method once we hit submit all the values passed in here is going to be displayed in the urls which we don't really want that and post is like more secure so we just want to use a post method to do this and also if i continue without adding something we call csrf token is going to give us an error so whenever we're using a post method in django we need to add csrf token so csrf token stand for cross site request for aj is like an attack but if you have this csrf token configured django takes care of that for you so now we have two fields here we have the name the title and we have the body so um we must make sure that each field has a name because is this name we're going to be using to get the data right here at the back end so it has a name of title and the name of body and then it has a submit button so this form actually is taken care of so what we just want to do is to save now we can come into the views.py and right in here what we just want to do we want to use an if statement so what i'm going to do is i'm going to say if the requests the method is post then we want to get the data that was being posted and then save it in our database else just render this new pose.html so why am i doing this there is there are two request method that i'm going to be talking about the first one is post and get so for this post when i say something like if request dot method is equal to post now what jungle sees this as is that if there is a form or data being sent to this particular view so if i come in here you can see that we said method is equals to post so it's saying if the request domain is equal to post then that means a form is being submitted or some kind of data is being sent to this view then what we just want to do is to get those data i'm going to get the data by saying so by using the name so the name of this field is titus i'm going to copy the name and then i'm going to say request dot post tie to and then i'm going to save this in a variable name to title i'm going to do exactly the same thing for body i'm going to get body and writing here i'm just going to copy and paste that i'm going to say body and i'm going to get it with body so what this is doing now if there's a method called posts then do this else that means if it's not a post method and it's just any other method maybe a get method then just render the html template normally so that's what we wanted to do for us but now what we can just do since we have these two details we can just get these details and then use it to create a new object in this module right here in the post model so let's actually import this post model in our views.py so we're gonna have to say from dot models import post model so now right here we can say new post and be equals to postmoder.object that's create what this does is that it takes from this post model that we created and it it says dot object dot create so it's basically creating a new object in this case it's creating a new post and we have to give it the values it needs so right here we know that it needs a title and a body the rest are being taken care of automatically so id as a default created that as a default so we just need to pass in these two values so we can say title let's copy that and say titu will be equals to this title that we have here so that's the title we collected from the form which the user field and then the body are going to do the same thing for the body i'm going to say the body is equals to this body and just quit that and this body is equals to the data collected from the form the user field right here so since we have this now what we can just do is to say new post dot save and we can just say return and we want to redirect but before we redirect we need to import redirects up here so once everything has been saved successfully we want to redirect that user to the home page so what we can just say is return redirect user to the home page now let's save this and let's check it out let's come in here now and hit refresh i'm just going to open up my blog and get post from it so i'm just going to copy this and the title i'm going to paste it in there x which is and i'm just going to copy all of this basically oh yeah so let me just for example i'm just going to copy just this lock of text i'm going to paste it as the body now we have that as the body we can hit submit as you can see it brings us back to the home page of this particular blog but for now it shows this test title test body and posted on test date so this is ad coded in our html as i showed earlier but what we want to do is that whatever we've been saved to the database or whatever post has been created we want them to show here and once we click on it it should take us to a page where we can reach the post fully but before we even do that we need to make sure that what we just the post we just created has truly been created once to do that we're going to come into data stacks so we're going to come into this our astra db dashboard and then right in here we're going to say use tech let's call blog and we need to have a semicolon so once we've done this now what we can just do is to make sure that we get all the values or the objects in a particular module using a command line so we can say select star can say from post model and we have to add our semicolon and hit enter as you can see now we have one particular model right here and it says it has an id and this is the body and this is the date it was created out and this is the basically the title so now that we know that we have all of these data right here created what we want to do is to be able to showcase all the data that we've been all the posts that have been created right here in the home page now we want to be able to get a list of all the posts that has been created on our blog so once a user comes to new post and clicks post or click save and user comes back to the home page we wanted that post to be shown here we don't just want this add code value to be here first to do this we are going to have to come into our views.py right here in the ohm actually we can just minimize that and right here in the home what we can just do is to use a simple variable and say post list should be equals to sorted and we can say lists and what we can just do is say post model so this is the model for the post dot object that's all and then after this you can just say is key equals lambda b column p dot created underscore art so what we're just doing here is getting a list of all the objects in this post model and basically converting it to a list like storing it in a list so this post this variable nice seen as a list and then it's sorted with the created ads option with attributes so basically the time it was created at is so it's like the the earlier the later so the first post is gonna come above and the second post or the third post are gonna come below and so on so basically the first pose is going to be the one on the top and the last pose is going to be the one at the bottom but that's the way this basically configures that so it configures it in an ascending order but we're also going to use a particular picture that's going to allow us to reverse that later in the html page but for now this is good and what we can just do is to send this so i'm just going to copy it i'm going to say comma posts and give it post list so now we are sending this particular list into the index.html so now this index.html has all the objects in this post model now to get it or to render it in this index.html what we can just do is come into index.html and then we're going to scroll down to where we have these add coded values what we're just going to do we're going to use a for loop so we're going to say for for posts and posts so this post is basically this post that has been sent into it so we say for posts in post and then we're going to end the follow right here we'll say end for and what we can just do now is to say for the title we're gonna say post the title so if you are new to jungle let me quickly run through this what we just did here is we got all the objects in this post model we stored it in this post list and then we sent that data to the index.html using this post key so now while looping through that post key or to that post list i was saying for each post in post then we just want to display this so now we're displaying the post the title remember if we come in the models file we know that it has title body created that id but what we want to display is just the title the body and the date it was created so say post the title and then we're going to do the same thing right here if i just copy this for the body i'm just going to say post dot body and for the date it was created that also let's copy this so posted on we change this to created underscore at so if i save this now when i go back in here and hit refresh you can see i don't know i no longer see an ad credit value what i see now is the post that has been created well there are two things i want to change here first of all this was posted on 4 p.m on this date and this was posted on 8 00 p.m on this date so this is earlier done but this is more recent than this so we want the more recent post to be the one on the top that is one thing we're going to change and the second thing we want to change is you can see that it basically just shows all the like body of this post or the details of this post we don't want that because if it shows it here first of all the ui is not going to look too good and then the user is not going to even going to be able to just click on a page to read the full post so let's change that first of all let's make sure that the most recent posts come first to do that it's very easy where we are for posting posts what we're just gonna do is to say reversed if i save this this just reverse the order in which that list appears if i refresh it now you can see that the more recent one is on top the next thing for this we're gonna use a feature called truncate so right here where i have this body i'm gonna put this particular symbol and i'm going to say truncate words colon 13. if i save it what this is doing that is cutting is basically getting the first 13 words and it's cutting off any other thing that comes after it if i come here now and hit refresh i'm gonna count one two three four five now i don't even see this as a word but i'll say six seven eight nine ten eleven to f13 so he sees this as it was and these are the first 13 words and he just put these three dots and cuts out every other thing but for you you can see that the body is not rotating so it just shows all the body because that's what it has to do but now to this point you can see that we've been able to do what we need to do with just like few lines of code now this is why django is very recommendable with just a line of code we were able to get all the objects in this particular model or database and we passed it into our index.html and now we rendered everything right here so since we have all of this done now what we just want to do is to be able to click on each of these posts and we want to read a detail of this particular post let's do that next thing to do is to be able to read full details of a particular post so for example when we come here we should be able to click on this and it should take us to a specific page or unique page for this particular post so we can read the full details of this post now let's go ahead and do that write in vs code we're going to have to create a new url and this time around the url is going to be a dynamic url so in django there's something we call the dynamic url so remove this where you can have values passed into a url to make it unique so we want to change this to post slash so what we're going to do is say str alone okay i'm going to explain what this is in a minute first of all let me change this use the post name a post what this is this is a new url yet named post so it will be our website dot com slash post and it's going to go into views.post and the name given to it is post so what was saying slash stl stands for string and this stands for like the variable name of the key so we're saying that anything that is being passed for example a user can go to our website dot com slash post then slash now we can input anything in here like an id or something we can say id55 so once a user goes in there this particular part of the url now is like a variable with the name pk so we can see this as something like this as pk equals to this so now in these are views that has been given to this views.post we're going to create a new view right here so let's just quickly do that we'll say def posts request and what we can just do is return so let's just cancel this and go back what we can do is to return render request post dot html that's get gotten from this post.html so what we can do now so this pk now whatever value has been put in this url is going to be stored forgotten in this particular view using that pk name so to do that after request right here we're going to say pk so we can use pk now for anything so pk now we can say like print pk so what this is gonna do now anything that was being passed in the url right here is now the value of this pk so since we are gonna do that what we're gonna do is this is going to take the id of that particular post when i come back to models here you remember that i said this id is the primary key there's the unique identification for each post so that is what is going to be in this particular part that we're going to be passing into this particular path so once the url has the id we can use that to get details about that post now i hope you understood everything i just explained so now that we have this done we can just save this and we don't need to print let's just save that so now that we have all of this done what we can just do is to say equals to from the post model now we want to say dot objects dot get now remember this time around the last time we use that object.all what this is doing is getting all the object in this particular model but when we say that objects.get well that means we are looking for just one particular object and we need to give it like an attribute to a parameter it should look for so we're seeing if we get the object in which the id is equal to pk so once it has that what we're just gonna do is to pass this particular post object into the post.html we're just going to pass it into post so now that we have this it is very easy now we can just save it since depose.html has it already we can just come into post.html and then render it in there so what we can just do now first of all we need to make sure that we have static configured for this particular page so we can say percentage sign and we can say load static and then what we can just do is right here we can use the static tax by saying this static and then right here we can simply close that let's just copy this and quickly use that for all of it so let's make sure that we have this copied copy this and we use it for this right here we paste and then for actually for this particular background i don't want there to be a background right here so i'm just going to leave that blank or we just have to remove this style since we don't need it and then we're just going to go all the way to the bottom and then add that in here so we can paste it now and what we can just do now is to come back in here in our post so we're gonna do that once user clicks on this post you take them to slash posts slash the id of the post they click on now first to do this we need to come into views no we need to go into index writing index where we have this hashtag so as you can see it shows each post so you can see that we have this hashtag as the link it's going to what we just need to do is to change this so what we're going to do right now is to just say slash post slash now we need to give you the id of this particular post so say post dot id if i save this now and come in here and hit refresh what i'm gonna see is as i click on this it takes me to this page let's suppose slash the id of that particular post so now that i have this what i can just do is to change all these values so these values are just add coded in our html if i come back in here into post you see that it just says test body posted on test date so they are just add coded values but since i have this particular id now and if i come back in these views from the id i've gotten the object of that particular post then now i can just render the post so for the title i can just say now we're not going to be using a for loop like the way we did the last time because this is not a list it's just one object so i can just say post dot title and for the body so first of all for the date you can just say post dot created at and then for the body we can just say post the body save this we come back in here right now and then once we hit refresh you see that it gives us everything we need to see it says the particular title of the post the date and then it just shows us details of that particular post now let's go to home and let's click on this second one so the name of the title the date it was posted and the body of this particular page of this particular blog post so to this point we've been able to complete this blog what we're just going to do is to run through everything we've done by just testing them out so now i'm going to come to new posts i'm going to create a new post and try to read the post and see if everything is working fine so once again i'm just going to go into my blog and then from my blog i'm just gonna take one post and just put it in there so like this i'm gonna paste that and i'm just basically gonna take all the text from here i'm just gonna copy all of this and then paste it in the body and hit submit so now you can see that i have that new post here and once i click on it it takes me to the page where i can read this fully so to this point i've been able to do everything i want to do in this particular blog so thank you so much for watching because we are done with this tutorial i hope you enjoy it if you did please don't forget to smash the like button and subscribe

Channel: Code With Tomi

Views: 566

Keywords: nosql, cassandra, mongodb, cassandra db, astra db, datastax, django, django tutorial, django project, django blog, django cassandra, django cassandra engine, django cassandra tutorial, django cassandra integration, python, python tutorial, python web app, codewithtomi, code with tomi, python django, nosql tutorial, nosql database, what is nosql

Id: 6JdcSdAPGt4

Length: 89min 26sec (5366 seconds)

Published: Mon Dec 13 2021