Build Three Django Projects - Python Course

hi guys welcome to this video in this video we're going to be learning django by building three different projects so the projects we're going to be building are a url shortener a to-do list app and an english dictionary so without wasting any of your time let me show you the demo of everything we're going to be building so the first one i have here is the url shortener so let me show you how this works if i go to google and i search for a term like python once i click on enter you see that it gives me this link to the search page but the link is very long now if i come here and then paste that link in here let me just remove this and click on shortened you see that generates this link for me this shorted link now once i copy this shutting link and then go open it in a new tab you see it automatically redirects me back to the link which i shortened now that's how the url shortness going to work now the next app we're going to be building is the to-do list app now let me show you how the to-do list app is so if we come here you're going to see a jungle to-do list app this is what we're going to be building and we're going to host all the apps in which i'm talking about so how this works is you can add a to-do list so let me say something like get a drink i click on add you'll see that it automatically adds it to those list and once i click on delete right here it automatically deletes it from the list so that's what we're going to be building and the third one we're going to be building is an english dictionary so if i come here and i search for a word like english once i click on search it's going to give me the meaning the synonyms and the antonyms so you see the meaning of the word the synonyms of the word and antonyms of the word now let me search for something else like set once i click on search it's also going to give me the meaning of the word a whole bunch of synonyms and antonyms that's what we're going to be building now i must say that we're going to deploy all the projects in which we're building and i'm going to link the source code to all this project in the description below so if you're stuck you can easily follow up and you can get all the html files and the templates we are using through the source code in the link below and if you like more tutorials like these don't forget to check out my channel at goodwithtomy having that said let's go straight into the tutorial [Music] so guys in this tutorial session we're going to be building a url shortener using django so the first thing we need to do as always is to make sure that we have django installed i'm just going to say beep install jungle and then this command line is going to install django on my computer but since i already have django installed it's going to tell me something like requirement already satisfied as you can see but for you you should go ahead and install that so let's just create our django model say django admin let's say start project and then let's name it url shortener so now we have created a new project named url shortener let's just go into that project so in here i'm going to create a jungle app so i'm going to say django admin start app and let's name it shortener [Music] so this is going to start a django app name shot now if i press d i out i'm going to see short now so now that we have our project setup we're just going to import it in visual studio code so let's come here and then what we just need to do is to open folder and then we're going to go into that folder so right here is the folder and select folder now it's going to open this my django project in this code editor so we can code so now that we have this opened what we just need to do is to set up our project so the first thing we need to do is to create a new folder and name it templates now in this template folder what's going to be in there is the html pages in which we are going to be using in this project but before i continue i have my html page here which is index.html i'm just going to drag it into visual studio code and i'm gonna put it in template so let me say once again that i'm gonna link everything we're gonna use in this tutorial i'm gonna link the source code in the description below so you can check them out to get any file you need now that we have these we're just going to come into our url short now go into settings.py and then we're going to come down the first thing we need to do is to add our app which is shortener now that we've added that we're going to come down into templates and we'll look for this i'm just going to say based there i'm going to say slash templates so what this does is that it tells jungle we have to look for all our templates file and as you know we saved it in our base directory in a folder called templates which we created right here let me save this settings.py and close it now i want to do the url mapping if i run my project now what you are going to see is jungle default template so we want to show our own html template first to do this we are going to come into our app create a new file name it urls.py and then we'll say from jungle dot urls import path and then we're also going to say from the roots import views now we're going to say url patterns should be equals to path home safe views dot index i'm going to give it a name of index so now what we just need to do is come into views and create a new function and name it index it's going to take a request and then let's render our html page which we have in here that is index.html so say return render request index.html now when we save this issue automatically use this index.html as our own page but not yet that's because we only did url mapping for our app we also need to configure it for our main project so we're going to come into our main project go to urls.py what we're going to do right here is to import include and then we're going to create a new path and then let's give it blank and we're going to say include shortener dot urls i'm gonna save this now i can cancel this now let me open a new terminal and just run our project so now a new terminal is being popped up and what i'm just going to say is python manage the py run server now this command line is going to run our project on the localhost so let's just wait for it to run our project quickly okay as you guys can see it's running on our locals let's open our browser go to our localhost and then we should see our html page as you guys can see we have this beautiful html page so now that we've taken care of everything about the template let's dive straight into configuring the back end so what i want to do is to create a django model that is going to save a url anytime a user imports a url and then shorten it so let's just go ahead and do that let's come back to official studio code we can close this and in our modules.py file let's create a new model let's say class and let's say links okay or let's name it urls i think that's better so url and we'll say models dot model and then you should take two fields which is link so say models.chat field and let's give it a max length of ten thousand because some links are very long and let's give it a uuid as a models dot character field also and the max length of these should just be 10. now what this is doing is that are very familiar with django models you know that is the same thing as a database so we're creating a database named url and it's going to have two tables the first one is going to be link and the second one is going to be uid so link is going to take the url which is i want to shorten so once the user come here and you put a url right here and click on shorting whatever that user's input should save in this link model and then a uid should be passed to that link that is a specific id will be passed to that link you guys are going to understand in a bit so let's save this first let's bring back our let terminal just open the new terminal here quickly and then let's say python manage dot py make migrations and then after making migrations we say python manage the py migrate so now this is going to migrate everything into our database so now that we have uh models migrated what i like to do is to configure my admin interface so i can easily see my database so let's just say python manage the by create super user so now let's just use the admin and let's also use admin right here let's give it a password now it has okay y and now it has created that super user we can cancel this if i come back here and go to slash admin okay slash admin it's going to prompt me to login now once i log in with the details in which i created now and i say login now you guys will see that we've logged into our admin interface so for now we only have two database which is users and groups so if i open my user database you're going to see the admin which we just created but what i want to do is that under here we should also have a new database which should be urls so let's go ahead and do that we're just going to open our admin.py and register that model first of all we need to import the model save from dot models import url right here we say admin dot site the register now let's register that url now once we save this and come back here and refresh you're going to see that that is going to pop up right here so let's wait for our server to load so if we come back here and open up our terminal okay our server is loaded back now once we refresh you guys can see that we now have a new database table which is called urls so now that we have these let me go to my home page once the user just clicks input a url clicks on shorting it should automatically save that url into this database and since we're going to be using ajax it's not going to reload this page now you know that once you submit a form in html it's going to take you to another page or reload that page but we're going to use ajax to submit this form so once the user just input a particular url right here what's going to happen is once you click on shorting without the page reloading it's going to be saved into this database and then it's going to return back a response with a unique id so let's go ahead and do that you understand what i mean now we're just going to come back we're going to come into our index.html that is our template file so let me cancel this terminal for now what i want to do is to go down into this input so right here is this so what i'm looking for is this input and i want to make it a form so let me come back so i'm gonna say form and then i'm gonna close it right here so let me just delete this so what i was going to give this form is an id that's the only thing so i'm going to say id and the id should just simply be let me say my form or post form now this is good and we're going to be using a post method so when was in the post method in ajax we're not going to configure it right here but we're going to configure it in the script so you're going to see that also in a bit so let me say csrf underscore token and save so this button let me give it a type let me say type should be submit so that once they click on this button you should submit this data and this also should have a name let me save it as okay it doesn't have a name so say name should be equals to link so now that we have these what we just want to do is to come down after all our html and create a script let's just close that and then let's make sure that it has the type we'll say text slash javascript so what we just want to do now let's give it some indentation we're going to say dollar sign and then is now we're going to start with configuring or submitting our form so before we start doing this let's come into our views.pri so once the user clicks on shorting right here we wanted to take this to a particular url so that url is going to be called create so in that url it's going to create that in our database and then send the response here let's do that quickly so i'm going to come back right here in urs.py let's create a new url and name it create let's say views dot create name equals to create let me show this as a comma then write in views create request and then let's pass for now so now let's save this so after doing this since we have this url what we just want to do now is to come here and submit that form to this url so once we submit this form to that url then we're going to come back here and then get everything in which the user inputted and just save it into our database so let's do that so after saying dollar sign i'm going to say document and then what i want to do is dots on submit so let's open a bracket submit on submit of post form hashtag right here hashtag post form now how we are getting this post form is basically this form so what we're saying is on the submit of post form damage once user clicks on this submit of this form what we want to do let's give it a function so that should be outside piece comma function should be outside that and let's say e is like this so now what we just want to do is to say e dot prevent default so what this e dot prevent default is going to do is that once a user clicks on submit of this form it will make sure that that page doesn't reload so now that we have that covered let's now use our ajax so say dollar sign again dot ajax and endless open curly braces press enter then the type which is also the method should be posts and then url it should be taken to slash great so come on and then the day time which you want to pass into it so let's do this and then the link dollar sign hashtag link dot value so now we're going to say csrf middleware token dollar sign and then inputs before we say input put these square brackets let's close that real quick and say name the name should be csrf let me do where token so that's what that does and then after this we should say dot valve to get the value so we're also sending in a csrf token so after doing this we're just gonna come down here and click on comma and then let's also give it a success function so after doing these okay in here we're gonna say success and let's give it a function so that means if everything has been submitted successfully for now let's leave it blank like this so let's just leave everything blank for now and let's come here and make sure we put our semicolon since we're working with javascript so now that this success function is uh let me say is blank we're going to take care of that after we submit our form so now let's save so since we're sending all this data into our create url let's go into our create url and get those data so right here in this views dot py we're going to go into that function let's remove this path and say if request that method is equals to post now if they are sending a post method let's say url should be equals to post dot it should because request dot post link so we're getting what the user put as this link and store it in a variable named url and then let's also use a uid so once the user also stores that variable once the user stores that link i mean we also want to assign a particular id to that variable so that we can use that id to generate a shortened link and once that goes to that shortening link it should come back to this url so it's going to make sense also let's just import uuid to get a unique id so i'm going to say string we want to make sure it's in a string so say that uuid does uuid 4 open bracket close bracket and then what you just want to say square brackets column five so what shortening because when this generates a unique id it generates is very long but want to shorten it to only five strings so let's save okay we don't need to save yet so what we need to do now is to after we get all this data we just want to save this data in our database first to do this we need to import our modules we say from dot models import url so right here now we're just going to say new on url should be equals to url dot url open bracket close bracket and the link should be equals to the url and then uuid should be equals to uid now once we have these we're just going to say new url dot save and then once we save these we just want to return a response say return http response but before we use that we also need to import http response say from django.http import http response right here so say return an http response of the uid now we can save this once we go back here and test this now it should work let's refresh this page now let's give it a url let's do something like https then let's say www.youtube.com slash code with tommy okay this is slash now once i click on shorting nothing happens but if i come right here and click on refresh as you can see nothing happens again so we need to open our inspect element right here we're gonna come to the network so now let's try it again let's click on shorting so as you can see we have an error and this is what the error is okay it's giving us a jungle error actually so let's just enlarge these and see so let's go and see where the area is coming from it's coming from right here so request dot post link so there is an arrow actually right here let's see why that is giving us an error so i'm gonna go back and just check that let's come here so right here instead of saying url let's give it a link unless a link should be equal to link and then let's make sure everything is working perfectly so say if request the method is equals to post then let's start a link should be request dot post link and then uid should be string now that is nice let's save it and go try it again now let's close this let me just copy the issue area i want to shorten now let's refresh this and paste and then click on shorting now it gives us an error now we're going to see what's up okay i think it's not getting this link in which we are trying to give it so let's see let's go down again so it's not getting linked the program will be from index.html so it's not getting linked we're gonna come here so i think the id should be linked okay not this the id should be linked let's save it i need to refresh and let's click on shorting as you guys can see now we don't have any error again once we come here now preview everything is nice so this is the uid which we are returning as an http response right here as you can see we return an initiative response there's the response it gives us if we come here and hit refresh we'll see that we now have a new object the link with the uid so let's try it again so let's see let's just say youtube.com and let's click on shutting it does another one with a uid also once you click on refresh and we come in here you see that link with that uid so now what we just want to do is to show the user the shorted link in which we generated so for us to do this we're going to come right here into our index we want to create in this section after the form let's have our own div tag and in that div tag let's create like an h2 tag so in this http is where the link should be for now let me put link and refresh so see how that will look okay it's in this shorting so let's just bring out this away and then put it outside here so let's save this and see again okay same thing so let's just remove the div tag which we have i think there's a styling attached to that div tag now once we refresh it should just be a link okay now is there's a stanley attached to the h2 nice so what i just want to do is to remove this from main and just remove this and put it right here let's save it and see okay it's outside okay yes so what we just want to do now let's try and put it here let's hit refresh nice so we just put it in this section and now we can see that the link is showing that so this is where we want the link to show now let's just remove this link and leave it blank so once we get an http response we want to show the link right there if i save it i'll come back you can see that it's blank but once we're shutting the url we want to see the link pop up here for us to do this we're going to come back to our script where we see that success function we're going to get the http response now whenever we're returning an http response for us to be able to get that response using ajax we're going to get it as a variable named data so i'm going to say data now this data is a variable which has the http response stored in it so in here we're just going to say dollar sign h2 and then what we just want to say is that html and then let's change that to let me give it this let's just simply change that to low cost 8000 slash let's add data now if i save this and go you are going to see what it looks like so let me refresh it let me put that same thing as shorting now once i shorten you see it gives me this link which is locales 8000 slash this uid which was assigned to this url so now for now we're just using local slash because we've not uh deployed our app to on the web so once we deploy our once we host our this our app we're building on the web we're going to use a specified link we're not going to use localhost 8000 but i'm going to use let's say link dot ml slash this or just a short link but for now let's stick with 8 000. localhost 8 000. so now what i want to do is that once these are now copy these links open a new tab and go to that link it should take the user back to that url in which is shortened that's how a url short network so for now the same page not found let's go and do this i'm just going to come right here into urls i'm going to create a new url and name it let's leave it blank and it take a string it's going to be a dynamic url and say pk so say views.let's say go and go so let's come into views create a new function name it go request and let it also take pk so now once we have this we're just going to get pk and then what we just want to say is url details should be equals to url dot object dot get the one in which the uuid is equals to pk and then let's just return want to redirect so we need to import redirect right here i'm just going to scroll down return redirect the user to url details dot link now let's save this now what we're doing is that once the user goes to slash let me come into our url.py so this is a dynamic url it's going to create something like slash then it's going to take a string and save it in a variable name pk so what is that comes to slash this uid it's gonna this string pk is gonna be replaced and what's gonna be there is this id so once we now have this id we're gonna come into our view.py get that id as pk then we're not going to search for our model and make sure that that uid is present in our model and a link has been assigned to it and then we're going to get that link so i'm just going to say return redirect url details dot link so i just redirecting the user to that link so let's save it and test this out so now let's refresh okay our server is not running let's pop it up okay the problem is here we need to put a comma let's save that reload reload so now let's refresh our app now let's just put www dot youtube dot com slash code with tommy and let's click on shorting it gives us a url we copy it paste it right here so now you can see it says page not found www.youtube.com so we need to pass this as a url for us to do this we'll come back here we're gonna say https and this now once we save it and come back let's copy this our page again is our url and paste it now you'll see that it takes me to that page you see it takes me to https youtube.com so now let's come back let's try it out with another url let's see www dot and once i click on shorting it gives me that url let me copy it and paste it right here now you see it takes me to socialblade.com now that's how our url shot now works so i hope you guys enjoyed and understood what we did in this video if you did please don't forget to smash that like button and please subscribe thank you for watching this session [Music] so now that we have created our project what we just need to do is to host our project online so for us to do this we're going to use the roku as our hosting platform so we don't need all these we can just quit these what we need is two python libraries and they are unicon and django heroku so first to install these libraries we're gonna say beep okay there's beep install gunikon and django iroku now once i click on enter it should tell me requirement already satisfied because i already have it but for you you should go ahead and install it so you see it says requirement already satisfied so now that we have this installed what i just need to do is to come into my root directory let me close out this my root directory i'm going to create a new file and name it runtime.txt now this file should contain the python version which you used in this project so i use python 3.9.1 then we're going to save it another file we need to create is profile so this proc file is going to create contain these web unicorn web gunny con then the name of your project which is url shortener dots wsgi column application log think a game file and like this so we're just gonna save it and then after doing this what we just need to do is to pip freeze requirement.txt beep freeze requirement dot t x t so that's done a new file here is requirement.txt so i'm going to come into our project folder and go to settings.py and up here that's right here we're going to import django heroku and i'm also going to import dj database url and then we're going to come here into a loud boost and make sure that we allow all the hosts after doing that we're going to scroll down and we're going to come into databases delete this okay delete from here and then we're just gonna say dj database url dot config so after doing this i'm gonna scroll down to the end all right at the bottom i'm going to say jungle iroku dot settings then open brackets in that bracket i'm going to say locales like this so after saving this we're good to go now we're just going to come into our command line and what we need to do is to log into roku by saying heroku login okay we type that wrong so say iroku login now this is going to prompt us to open our default browser and automatically log us in to our roku account so let's wait for it it should give us a reply soon so let's type any so now our browser should open up so when i click on login logged in if i come back it's automatically logging in now let me create a new app by saying heroku create and let me name it url shortener yt one two three just naming it a random name simply because i know there are there will be names that already have you are rational because in iroku you can't have you can't create a project with a name that has already been created before so if i just use plain url short now it will tell me another person i've taken this name so that's why i just use that randomly so since we have this now we're just going to say git status initialize this does nice so get remote v then git remote add iroku and then what we want to add is up here this git link just paste it and enter and then let's say git remote v again nice and then let's say git status nice so what we just want to do is to create a new database which is heroku add-ons create eroku postgres ql rpdf and press enter so now this should create a postgres database with the ob dev version the database has been created so now after doing this i'm just going to say git add and then you should add so i'll say git commit let me see the first time and then i'll say git push iroku master so now this git push roku master is the final step in deploying this project so once this is done it should automatically deploy it onto iroku and then we are going to get our site url so let's wait for it to deploy it should deploy within a minute depending on how large your project is so our project is pretty light so you should install routine seconds so let's see let's just wait okay installing collected packages so what is doing now is installing the packages which it saw in the requirement.tx files so let's just see after compressing it should say done so let's wait for it to say done okay it says done and then now let's wait for our final confirmation and then we're just going to go to this url which is the url of our project let's wait for our final confirmation again okay that should pop so it says verify deploy dot so let's just go to this open link now you guys can see our project is ready so what we want to do now before we test our app we have to come back here and migrate our database so say heroku run python manage dot py make migrations and then after this we're going to say hiroku run python money dot py migrate just like how we migrate our database when we are building our project so let's wait for this command line to run it should actually say no change is detected yes but i just like doing that so that we won't get any error so my grid now now this will migrate everything into our database so let's give it a moment you should migrate that soon let's see if i didn't do this it's going to give me an arrow so i just have to do this to prevent that error okay and then done so let's come back now refresh so now let's try to shut in a url in this again now you see it gives me locales 8000 then this link so if i go to this url slash this uid it's going to take me to youtube.com slash code with tommy but because in when we are building our project we added this localhost so that's because we see testing our project now we're supposed to add the url of this project which we've deployed but as you can see we are building a url short now if our url shortness something like this let's say once you shut in a url it gives you this type of url then i don't think we are building a url short now again so i'm going to buy a free domain i'm going to get a free domain there is actually a site which allows you to get a domain for free so i'm going to get a free domain a very short one and i'm going to connect it to this our project so let me show you the domain i'm going to get before i show you let me test out once i click on enter you can see it takes me to youtube.com slash code with tommy now once i go back now what i want to do i want to show you the domain which i took so you guys can see i already took this domain it says sorry source.ga is not available so this is the domain i'm going to use for this project source.ga for now it says source.js not available because i already took it so as you can see you can come in and claim sales.cf you can claim some domains for free but if you want to buy the.com.net you need to pay for them so that's what i we're going to use in this project so i'm just going to connect it with these my heroku site so when i connect it i'll be back so guys right now i've already connected the domain the custom domain which i have to this our project so you can see now if you go to www.source.ga it takes you to this url shorter so let's test out this shot now let's test it out and click on shorten now it gives us this url the last thing we want to do to this project is to update this so instead of it saying localhouse 8000 we wanted to say www.source.ga then slash the id so let's go and do this we're going to come back to our visual studio code and then in our index.html right here instead of saying locales 8000 let's see i think it's better if we copy these just come here and paste so we don't need to put http let's just say www.gay www.sauce slash ga then data so this data is the id so let's just save this and then what we just want to do now is to say git add so this what i'm teaching you now you are going to be able to know to update your project even after you've radiused it so we already have this hosted on the web but we want to make a change and update it so once you make that change to update it you just come back to your cli and say git add and then you're going to say git commit iphone m and let's say make it better nice and then we just say git push iroku master now this should redeploy it again with the updated changes so let's just wait for that it shouldn't take long this time because we've already deployed it so let's see let's wait for it you should do within a second so let's see okay almost done after compressing you should say done that means it's worked yes and now we should see deploy to your roku so once we see this deployed to liquid has deployed but let's just wait for the last confirmation before we go check so let's wait it should say yes done so let's go back to our browser and then reload this page so now let me shut in this url and click on shorting now if i just take this link and copy it and paste it here now you see that it takes me to that url which i shortened right here you can see that i shortened youtube dot com slash code with tommy then once i click on that it says youtube.com code with tommy so that's what this should do so let's try it out with another website let's take let's go to google and then let me just search now this url link let me copy it and then right here let me paste and click on shorten so now it gives me this link so everything is working perfectly [Music] in this tutorial session we're going to build a to-do list app using jungle so without wasting any time let's get straight into it the first thing we need to do as always is to make sure that we have django installed so we should do beep install django so since i have django installed already it's going to tell me requirement already satisfied but for you you should go ahead and install django on your computer so it's going to tell me as you can see it says requirement already satisfied that is to show that i have django so now that we have django installed let's just go ahead and create our project so i'm just going to say jungle iphone admin start project and let's name it to do list now once we press enter it's going to automatically create a jungle boilerplate which is a folder which contains all the necessary files to start a jungle project so let's go into that folder which is called to-do list now if i press dir i'm going to see money dot py and another folder called to-do list another thing i need to do now is to create a jungle app and i'm going to call this app to do so i can just do django admin iphone admin start up and i can name it to do so once i click on enter as you can see right now we have only one file and one folder but now once i check it again you see i have two folders and one file and the second folder which was created is this to do which is our app so now that we have everything set up let's open up our project in visual studio code so this is visual studio code here all i just need to do is to press open folder and then open up my project in the directory which i created so i created my online to-do list directory right here i'm just going to select the folder and it's automatically going to open on visual studio code so once it has opened now i'm just going to quit this we just need to configure some things which are our template file that means the html file which we're going to use and then get straight into the tutorial so to do this we're going to make sure we're in the root directory and then we're going to create a new folder we're going to call our folder templates with an s templates and in that templates folder i'm going to move in the html which i'm going to use for this project as i said i'm going to link the description to everything that we are doing in this video so all the links to the source code is going to be in the description below so you can check that out to get all the html css and everything we are using in this project so i have it right here i'm just gonna drag it into visual studio code and then what i need to do is to paste it and template now that i have this here i'm just gonna press cancel so what i need to do now for django to cds i'm going to come into my to-do list go into settings and once i'm in settings i'm going to scroll down a little bit i'm going to look for where i see templates so i'm going to scroll down as you guys can see there is templates here so where you see this you're just going to write base there then you're going to put a slash then inside there are going to put templates this is simply telling jungle where all your template files are located so after doing that we can cancel settings now the next thing we need to do is to come into our to-do app create a new file called urls that's py and in here we're just going to import path so say from django.urls import path so what i want to do now since we are done with configuring the template file and django knows where our template is we just want to root our url simply means we want to provide where our url should go to when a user comes to our website so you're going to understand that in a second so let's go to say url patterns equals to path and we're going to leave it blank blank means that's the home page and i'm going to say views dot index and then let's give it a name of index so for us to use views we have to import view so say from root import views so now that we are importing views we also need to go to views create a new function called index it must take a request and then we need to render that html page which is index.html so i'm gonna say return okay right here i'm gonna say return render request index.html now this is going to render that index page let me just cancel this so once i come into urls.py as you can see you are telling me that once the user comes to our home it should take the user to the views dot index and once the user comes to that function is just rendering the index.html page but if we run our project now it's still going to show us the default jungle template that's simply because we only configured our urls in our app we didn't configure it in our project so if you open your to-do list project that's the main project folder you're going to see a url file also so for us to configure it here we need to import one thing called include and then we're going to create another path which is also blank still means home i'm just going to say include to do dot urls now once we save this everything is fine let's just go ahead and open a new terminal so right here in the new terminal we're going to run our project and test it in our browser so let's just give it a few seconds okay so now let's run our project by saying python manage dot py run server so once this runs on our server on our localhost we're gonna go open our browser and we're gonna see this index.html page so what we just need to do is to copy this localhost come into our browser and paste it right here so now we should see as you guys can see we see this beautiful jungle to-do list app template so now that we have everything configured on the front end on the ui what we just need to do is to start with the back end so what we want to do now is to create a jungle model for the to do where everything is going to be saved and then once the that input something right here and clicks on add we're going to submit it to that django model and we're just going to show all the objects which are in that module and then another feature is that once user clicks on delete you should just delete that object from the model it's pretty easy so let's dive straight into it so we're going to come right here we can just close this terminal and then what we want to do is to open our modules.py file now we're going to create a new model and let's just call it to do so we're going to say models dot model and then we only want this to just take one field so i'm going to call this title i'm going to say models dot character field i'm going to give it a max length let's say max length of a thousand and this should be fine so not what this simply means is that our model is taking only one field and this field is the title so if i come into this template as you can see this says it's the gym meet george all these are the titles of the to-do so that's what that field is so all these are just dummy data for now they are just static data but when we integrate our database with it they are going to be dynamic so let's come back into our visual studio code and after doing this let's just return underscore str self so we want to return that title return we're going to say self dot title so we can save this now if you know django very well you should know that once you make any slight change to your models file you need to make migrations and then migrate into your database but before you do that you must make sure that the app in which you are configuring your models or py must be registered in your settings file so if we come into our settings right here we're going to go up and look for installed apps right here in installed apps before we migrate our data to our database we need to add our app which is called to do into our installed apps so doing this alone we've added the app we're just going to save it so you must make sure that this to do correlates with the name of your app after saving we can cancel that so now we're just going to bring back our terminal so instead of cutting this serval let's just open a new terminal so what we want to do is to make migrations and migrate so say python manage the py make migrations enter and then once this make the migrations and then we're just going to say python manage the py migrate now this is going to migrate everything we have into our database as you can see is making all those migrations which is good so now that that is done let's close the terminal another thing i like to do is to create a super user and configure my django admin so i can see all the database easily so let's bring back our terminal and do that what we just need to do is to say python manage wpy create super user now this is going to prompt us to put in some details just like if we're registering on your site so we can just say admin let's just give it admin and password so bypass that now that we have this done let's go ahead and test it so let's come to our project and go to slash admin so in slash admin you should tell us to login so we're going to log in with those details so admin and also the password and just click on login so now you should automatically log using into jungle admin so right now you can see that we're logged in in this jungle admin so the only thing we can see in the database is the user and groups we also want to register our module which we just created which is the to do module so for us to do this is very very easy we're just going to come in here we can quit this now we're going to come into our admin dot py file import our to-do model so we're going to say from dot models import to do and then let's just register it in our admin so say admin.site dot register and the naturally started to do it's that easy now once we save it all we just need to do is to come back and hit refresh now as you can see to do is already added in our data so once we click on it we're going to see the list of to-do lists the list of to-do in which we have here so let's say user comes into let me just quickly go back right here what i want to do now is that once the user input something right here and clicks on add it should automatically be saved in this database so let's go ahead and do that now for us to do that we're going to come back here let's come into our views.py which is uh which has our index function so what i want to do is to go to our index.html we're just going to scroll down into where we have what we're looking for is this form these inputs right here so we're going to scroll down where we have that so as you can see we have that right up here so it is an input what we just want to do is to make it a form so i'm just going to say form now we're going to close it let me first cut that and see where to close it so i'm going to close it right after the span tag which is add so i'm just going to close it right here and then what i want to do now is to just give this i think some indentation so let's just give it a little bit of an attention so that's nice so since this is a in a form now so guys what i put in a form is this input right here this input and then this add as our submit button so let's just go back here so what i want to do let's make this a submit button so say type equals to submit it needs to have this so says submit now we can save this we must make sure that this have a name which is this one right here so say name equals to let's say title so let's save this so what i want to do now is to just make sure that once the user clicks on add which is serving as our submit button it should send those data to our index function so let's do that so say action let's leave it blank so it sends it back here and let's say method let's give it a post method we don't need a get method and then you know diameter wise in the post method we must always add our csrf token csrf underscore token so if i save this right now click on refresh once i type in something and then click on add okay as you can see when i click on that nothing is happening so i think there's a javascript right here this one click so this javascript is colliding with it let's save it and try it again let's import something and i click on add okay so it's not serving as the button so what we just need to do instead of using okay let's put this back instead of using a span we can just change it to a button so right here also let's change this to a button nice now let's go back and then refresh as you guys can see made a little bit of change but that's okay so let's just input something and then click on add so you guys can see that it refreshed that page so what i want to do once you refresh that page you should add whatever the user input to the list of to do right here let's go ahead and do that so we're just going to come into our views.py so right here in our function we're going to use an if statement and that if statement we want to do is to get even the post request so we're just going to say if let's give it a space so say if request the method is equal to post so if is equals to post what we just want to do is to say new underscore to do should be equals to so before i continue we need to import the to-do model in which we want to save so we're going to say from dot models import to do so now that we have this model we can automatically save a data into that model so i'm just gonna say to do i'm gonna open a bracket and then let's say title should be equals to request dot post which is title so guys what i did here is i assigned a new variable and what i put inside a variable was this to do model but i'm passing in some fields a field actually so this title is basically this title we have in our module so this title is this title right here so what we're giving that field is request the post title so while just getting this title from a post if we come into our index.html we can see that once user clicks on add it's posting this input which is named title into back into this page so as well in this place we're going to collect using that post collecting that title this title is whatever the user input and then saving it into this variable so once we do that and then we just come down and click on and type new to do dot save it's automatically going to save it in our database so after it's saved let's just return let's redirect the user back to this page before we can redirect we need to import redirect so let's import that so we're going to say return redirect the user back to the home page now that's very easy so now let's refresh again no let's cancel this on it so let's say code so now once i click on add you see that it refreshed and brought me back to this page but nothing show here because we're not getting the list of data for now but we come into our to do database and click on refresh you should see that we have one new data now which is code which are input so that's basically how to do it let me go back now let me come here do another thing and say go for a run so now once i click on enter come back here and refresh you see that now we have a new data called go for iran so what i want to do now is that all this data which we have that's what we want to show here we don't want all these static data also very easy we're going to come back into our visual studio code so right here in our index also what we just need to do is to get this this to do module so we're going to say to do equals to to do dot objects dot o and then once we have this we're just gonna pass to do right here into our index.html so say to do should be to do now once we save this right here in our index.html we're going to come down here and use a for loop what we need to do now we can remove all of these once we remove all of these we just need to use a for loop and see for to do okay right here in our view.py let's name this to do's so we can say for to do introduce so for to do in to do's then let's end our for loop right here so let's end four and four and then right here we're just gonna say to do dots title we can save this come back here and refresh now as you can see it gives us everything in which we have right here so go for a wrong code code go for a run boy is reversed so if i click on something and i'll say it's the gym the gym and save it you can see it's automatically added on the list but is on the bottom so we want the newer to do to be on top for us to do this we're just going to come here as if to do introduce reversed when we save this and come here you see there's a latest dice on top so let's just do something like it now you can see it is on the top let's say sleep now you can see sleep is on the top so that's basically how to um showcase a list in django ginger formats just using the reverse attribute very easy so now that we have these let me just add one more let me say one more attribute which is as you can see that this everything is in small letter so we want that even if a user writes it in let me say small letter like buy buy or close so as you can see the user started this with the b as a small letter so once it's shown here we want it to be calculator for us to do this we're just going to come here use this and say title this alone once you refresh as you can see everything nice and caps later so that's also a good attribute which might be useful in some of your projects so now that's good what we just need to do now which i think is the last thing is that once the user come here clicks on delete we want whatever is here to be deleted also very easy we're gonna come back here so we're going to create a new url and then let's name this url delete so i'm going to say path let's name it delete but this url right here is going to be a dynamic url and this is because it's taking an input so what we want to delete it to do that to do is going to have an id which is being sent to this delete url so for this url to collect that id we need to use a dynamic url so we need to pass in a variable i'm going to say slash let's give it a string and let's say pk like this so after doing this we can continue to our normal format which is views dot delete and then we can say name equals to delete so this is nice now we can come into our views and create a new function and name it delete take a request and after taking a request you should take pk and pk is the variable which we assigned here that is a string so when i'm writing an html page what we want to do is to just get a particular object from the module so first to do this i just gonna say to do should now be equals to to do dots objects dot get the one in which the id is equals to pk so now once we get that we just want to say to do the delete and then once it has deleted it then we want to return redirect direct the user back to the home page so what we're doing here now you guys are going to see how we're going to send the id into this view so let me explain in detail when you create an object in a model in django automatically each object has an id so this code which is the first object i created has an id of zero this go for a run has an id of one it's the gym as an id of two and so on like that so each of them has a unique id which is being assigned to them so that unique id once i click on delete the any kind is going to be used to know which to do the user wants to delete so as i click on delete that id is going to be sent into this url and then it's going to be saved into pk which is this variable then we're going to collect that variable name pk into this view then what we're doing right here is that we're saying to do dot object.get so this to do is our module in our database and then we're saying does get the one in which the id is equal to pk and as you know pk is the id in which we sent into this view so i'm basically getting the id which the user wants to delete and then we're storing that particular object into a variable called to do so once we already know what design was to delete we just use the attribute to do the delete it deletes it and then we return user back to the home page so now let's go back and see now let's refresh this so let's click on delete nothing happens this is because we've known it's assigned the variable let me show you how to do this i'm just gonna come here right here in our index where we see delete so this delete now has to be a link so i'm just gonna give it a link a and then let's paste delete in there now let's say hyperlink so we're gonna use the jungle format and then we're gonna say delete and then i want to say to do dot id so once we save this everything should work so let's come back here refresh okay it says um invalid right here so the reason why it's invalid is because it says delete expected empty or n4 did you forget to load this type so what we just need to do is to come here if i shift to this side you guys can see that the area is coming from right here so the problem is the way in which we pass this url so you can also pass this url by saying [Music] delete slash will say to do dot id once we save it and go back let's make sure we have everything correct now once we refresh we shouldn't be seeing this arrow now you can see that this delete is showing as a link we will take the of that later but now let's click on delete and see what happens as you guys can see that particular to do is gone let's click on the next one that is gone click on this it's gone and then let's also try to add jog you can see it's there once i click on delete it's gone so that's basically how to build a basic to-do list app so now let's just take care of this blue link which is showing there first to do this we're just going to use a basic css we're going to say style equals to text decoration so say text decoration should be none so this css is going to remove all the text decoration which is assigned to a link so once we refresh you guys can see that it doesn't have that line on diet again but the color is still blue so also very easy we're just going to come here and say color okay shift back right in this style i'm going to say color should be black let's save this refresh now you can see that the color is black and once we hit on delete everything still works successfully delete again still works successfully now let's just test on our app once again so now we can add a new to do let's say it's the gym to enter oh we've added that before so let's just delete that and let's just say learn flask so click on enter as you can see it brings up this length flask and it brings it up the latest side of the table of the list i mean and we can also delete and one feature which we added if we put in small letter it's automatically going to show it in calculator so i hope you guys learned something from this tutorial section if you did please don't forget to smash the like button and please subscribe now that we've successfully completed our app what we just need to do is to host our app on iroku it's very easy to do this we just need to make sure we have some python libraries installed and these python libraries are gunikon and jango hiroku so let's go ahead and install them beep install unicorn and jungle heroku so i already have this installed it's going to tell me requirement already satisfied but i just needed to show you how to install those libraries so you should go ahead and install on your computer so now that we have that installed what we need to do is to come into our roots directory let's close all these now root directory we're going to create a new file name it runtime.txt in that runtime.txt what we need right there is our python version so the python version which we use for this project is what we're looking for to get that we'll come to our terminal and type python version python two iphones with version so as you can see i am using python 3.7.4 so i'm going to say python then i'm going to say iphone 3.7.4 so that's the way you should write your version let's just save it and then quit this file the next thing we need to do now is to create a new file let's make sure we close this and these files must be in the root directory the root directory means the directory which contain the money money.py file so that's the root directory of any django project so now in the root directory we're going to create a new file and name it proc file with no extension so proc file like this and what you go in here is a piece of code now this is how the code is so instead of these these are like a line of clothes boilerplates something like that so instead of contactless is the name of your app so it should be um to-do list so that's how it should be web unicorn to-do list.wsgi column application two items log one iphone file space and iphone so that's what should go into this file then we're gonna save this file so after having this done what we just need to do is to come into our terminal and press beep freeze requirement requirements.txt now when we press enter a new file here is created named requirement.txt what is in that file is all the pattern libraries in which we used in this project so after doing that now we're going to come into our settings.py file and then we're going to add some things so up here we have to import django heroku django iroku and the second thing we need to import is dj database url import dj underscore database url so the next thing we need to do is go into that our database and then change it from sqlite we're going to change it to the database in which eroku is going to recognize so i'm going to change this defaults not going to be an array or at least it's going to be dj database url dot config now this is how it should be i'm just gonna press save the next thing i need to do right now is to go down into my project right here i'm gonna say jungle heroku then dot settings boom bracket locales then open bracket close bracket now i'm going to save this file again the last thing we're doing in this file is to go to allow hosts and just press these to allow all hosts like this so once we save it we're done with this file now after doing all this thing we can now start with our command line that is with our iroku so we need to say iroku login so what's going to happen now is that it's going to prompt us to click on something and then it's going to open our default browser and then in there we're going to log into heroku automatically so when i click on login if you tell me logged in you can close this page and return to your cli so once i close this page and go back you can see now it automatically logs me in so what i just need to do now is to say heroku create and let me say to do list so once i create this to-do list it's automatically going to create this to-do list app in my roku account so once it creates that we're just going to start with the git so as you can see it's creating okay it says to the list already created my mind wasn't really there so let me just say to do list let me just give you random words like seven ways nine so let's see i don't think that should be taken okay it's creating yeah it's created so all we need to do nice is just say git status okay then we're gonna say git init so now he's going to initialize the repository and let's say git status again now we should give us something right and then we're going to say git remotes iphone v nice i want to say nice git remote add heroku now i want to add we're going to scroll up right here when we created the app you see it gave us two url i'm going to take the second url which has dot git at the end scroll down and paste that so it's going to be git remote add iroku then that url so i'm going to click on enter so now i'm just gonna say git remote v again so that's nice and i'm gonna say git status okay nice so now what i want to do is to create our database on our cloud so i'm going to say iroku add-ons i'm going to say column create i'm going to say iroku i think postgres ql then column i'm saying obi dev so that's what i need to see so i think this should be an iphone so now once i click on enter it should run that command line so let's wait for a response okay so it's creating see i couldn't find a service named of the dev okay there's a typographical error i put two o's instead of 2b so let's wait for that and let's see should create that for us in some seconds okay nice so it says database has been created and it's available the database is empty okay nice so the database has been successfully created so now that we have our database created what we just need to do is to commit so we're just going to say git add and then after adding we say git commit i think m then i'm gonna say the first time and then let's close that now when we click on enter we're gonna commit that so that's nice then as for the last step we're just gonna say git push iroku master okay um there was typographically right there so i don't think it will work so let's just wait for that to give us an error then we're going to say git push iroku master okay so remove these and it should be git so git push iroku master now this is going to deploy everything which you've been doing on the url in which it created area let me show you the url of the app so when we are creating we will come here when we created these uh which is to do list789 you see it gave us this url right here so once it deploys it it's going to deploy it on this url so once it's done and click on this url what we're going to see is this app in which we've been building since so let's scroll down and see how far the deployment is going okay it gave us an error if we come back here so the reason for that error it says now this is very good because you know also know how to debug so it says request runtime is not available for this stack heroku 20. okay that's nice so what we just need to do right here is to come into runtime.txt so the reason why we're getting that error is because of our runtime so uh python version is too low for heroku 20. so if i scroll up here you're going to see that it says heroku 20 stack so it's going to update to one of the latest versions we'll say 3.9.1 and then what we just need to do is to commit those changes so i'm just going to say git add and then git commit and then we're just going to say git push iroku master now this shouldn't give us any errors again so let's just give it a few seconds installing python nice so everything is working so because iroquois has been upgraded to europe 20 the stack is now 20 that's why we're getting that error so notice that if you are using django and you like deploying on your roku you need to be using python 3.9 version to be specific so let's just give it a few seconds to deploy okay installing collected packages nice okay so just gonna wait so it should be done in a few seconds because all the main stuffs are done already so you should just deploy it to our url yes done yes so it's deployed to eroku as you can see this link is deployed to your roku so let's just wait for the last confirmation and then it's going to opt out of that command so let's wait for it okay nice so now let's click on this url so let's open the link once we open the link we should just see our app it says um programming error so anytime in which you are dealing with database and then you just deployed your app you need to also make migrations just the way you make migration once you change your model.p wi-fi i'm just going to come in here say heroku run python manage the py make migrations and then after making migrations we're just gonna say by heroku run python menu.py migrate so that's going to do and solve all the problems so let's give it a second to run that okay running python monitor py make migrations so that should run that within no time running still running okay no change is detected so let's just migrate so now once this migrates successfully we're just gonna go refresh our link and then we should see our to-do list app so let's wait and see okay see my creating let's see up run and then go yes so that's nice let's just wait nice so now once we come here and then refresh we shouldn't see any error so as you guys can see it says jungle to-do list up now we can just add and say it's the gym and once you press enter you see it's added already and we can say code added you can say uh take a run and it should be added so as you guys can see everything is working perfectly let me just try to delete one so let's click on delete and you guys can see that it's gone so everything is working perfectly it's hosted online the database is connected and i walked you guys through all these steps so thank you for watching this session of the video and you can go to this url to check it out live is live now and i'm not taking it down thank you for watching once again in this part of the tutorial we're going to be building an english dictionary using django so user is going to be able to search for a word and get the meaning of that word the synonyms and the antonyms of that word also so let's start by installing django we say peep install jungle and then you should tell me requirements already satisfied jungle admin start up stat project and let's name it english dictionary so let's move into english dictionary and then let's start an app a jungle app and let's name the dictionary so now when i press dir i should see money dot py english dictionary and then dictionary so let me come into visual studio code and then open this project i just created i'm going to click on open folder and then right here all i just need to do to select this folder and then it should open in my editor so now that i have these let me just start configuring the first thing i need to do is to create a new folder in here and name it templates so this template folder is going to contain all our html files so let me just move in the html file for this project let me move it into visual studio code so now that we have that in there what i just need to do is to go to english dictionary then settings.py and i'm just going to go down a little bit and right here i'm going to say based there based on the score there then slash templates now this is just to tell jungle where our html files are located after doing this i just need to do the url mapping so i'm going to come into dictionary i'm going to create a new file urls.py in there i'm going to say from django dot urls import path and after i put in these i'll say url buttons equals to pass and now save views dot index and let me give you the name of index so let me first import views before i'm able to use it so i say from roots import views so i'm going to go into views folder now and create a new function named index so i'm going to say def index it's going to take a request and then i'm gonna render this html page in this template folder so i'll say return render request index.html okay let's make sure this is correct index.html so before uh index.html can show us our own page we also need to come into the project folder and open urls.py right here we need to import include after importing include then we're going to say path then include i'm gonna say dictionary dot urls then i'm gonna save it now i can quit this let me just open a new terminal and then what i need to do now is just to run my project now when i run this project my html that i rendered is going to show as the home page so let me open up my browser and then i'm going to open up my localhost in my browser so let me open up localhost so now it should show me my project as you can see it shows me this simple html page with just a form so this is what we need to build the dictionary very simple so you are just going to type in a watch once you click on search it's going to say the meaning and synonyms of the word right here so let's simply do that this is very very easy what we just need to do now is to first of all create a new view and let's name it watch let's say requests and let's say return render request and then we're going to create another html page let's name it word.html we've now created it now but we're going to create it so let's save it for now and let's also create a new view name it word let's save let's go back to our views this should be returned then let's save this so in our urls since it's a list you should have a comma so after doing that we're just going to come into templates and let's first create a new file let's name it word.html now we're going to leave this file blank for now let's close this terminal now in this index what we want to do is to make this a form so i'm going to scroll down right here let me first say h2 search for a word so let's see the changes okay it shows but not pretty cool so let's leave it so what i want to do now is to make sure that this is a form so i'm going to say form and then we're going to close the form after this button like this so what i want to do after closing the form after the button we're just going to say action and this action is going to the word url like this now we must make sure that these inputs have a name which it doesn't know so now i'm just going to say name should be equals to search so this is the search term in which it is accessed then it's going to be submitted into this word so i'm just going to come right here in the views i'm going to get that word we're going to say search equals to request dot get that get and we're going to say word i think it's search so what this is must be the name which you are assigning to the input that's why i intentionally put a name field here because that we're going to use to get whatever the user searched for so now that we have this how are we going to get the name the meaning synonyms and antonym so i'm going to use a python library called pi dictionary so let me bring up my time now here real quick let me open a new terminal so first to install this module we need to type peep install by dictionary so i have it installed it should tell me requirement already satisfied but for you you should go ahead and install it as you can see stage requirement already satisfied so let me go back to my normal time now and quit so what i just need to do right here is to import this library so i'm just going to save from pi dictionary import by dictionary now that i have this imported i'm just gonna say dictionary should be equal to by dictionary with brackets so now that we have the search which is also the word we're just going to get the meaning and storage in a variable name meaning so same meaning equals to dictionary dot meaning of this search so that's the meaning and then we're also going to do the same thing for synonyms it will be equal to dictionary just synonym of the search i'm going to do a similar thing for the answer names so anthony's will be equals to dictionary that antonyms of the search so this is how to simply do it and after doing this what we just need to do is to put it in a context so in here i'm just gonna say the meaning so the meaning should be equals to the meaning because the antonym the and we are going to pass all this into our html so meaning should be meaning comma they just copied i'll say synonyms should be synonyms and antonyms also should be antonyms so we can just pass this right here and say context and let's save so now once we save this and we come into our word.html what i want us to do is just copy all these paste it right here and then what i want to do now is that under here we want to write the meaning and i don't need the synonyms of the word so that would be under the button under the form so let's say meaning let's give it like an h3 let's say meaning now should be equals to meaning so now let's just test meaning before we continue so let's just save this and then what i want to do is to come here into our browser and refresh so let's search for it and then let's click on search and once we click on search as you guys can see it takes us to another page what search equals it says meaning equals all of these so what i want to do we just want to get only the first meaning we don't need to rest and we need to pass this css right here so i'm going to come into a visual studio code and then right here in the word instead of putting it right here i'm just going to put it outside to wrap and then in views dot py meaning will be meaning a noun like this and the first one zero so we can test this again so once we go to the home page it should take us yeah so let's search for it again and then once we click on search she take us to the words page and now we say key error at noun okay so the what is simply saying is that in the dictionary that this is bringing back there is no key named noun so we just need to patch that so that is because it is not unknown so we can basically do that in plenty other ways but for now let's just search for set and then let's see as you guys can see meaning a group of things of the same kind that belong together and are you so used so that's how to get the meaning of the word so we also want to get the synonyms and antennas so i'm just going to use a for loop right here so i'm going to say exactly the same thing and say 4. 4 let's come into our views and get what we passed signal name in synonyms so you just want to pass in the synonym and then what we just want to do is to end for and i'm also going to do the same thing for the answer names let's delete these copy this and paste so let's try for the answer names also so in the word say to be for antonym in antonyms then this should be antonym then n4 so let's go back and see so if you just refresh this page we should see the meaning with the antonym and synonyms okay as you guys can see if i scroll okay so it's basically just listing everything out so we just need to pass that and let it just put it in a word so first of all this is not meaning what we need to do now is this bring this in here i want to bring it into the hdre tag instead of outside so i'm gonna do like these and just end four same thing we're gonna do here into the h3 tag i'm also going to end for in the h3 tag so that's what we want to do so right here also we want to say synonyms and then right here i want to say antonyms before the for loop so let's just give it caps later and we can save once you come back here and refresh this page now we should see it aligned horizontally as you guys can see meaning a group of things of the same kind that belong together and are so used synonyms best no good put inlay and a lot of synonyms so we just want to use comma to separate each of them so i'm just going to put comma right here and also comma right here so just press that and once we refresh we should see comma so that everything will be refined so as you can see meaning a group of things of the same kind that belong to together and are so used so synonyms it gives us all the synonyms antonyms also give us all the antonyms so let's search for english the session for the meaning and then we should see the meaning synonyms as you can see it says meaning an indo european language and also give us synonyms and then the antonyms so that's how to build an english dictionary using jungle i hope you enjoyed it [Music] now that we finished building this project what we need to do is to deploy it online so for us to do this we need to have two live item libraries installed and these libraries are unicorn and django heroku so to install them you save python install pip install gunikon and django i think heroku so i already have them installed you should tell me requirements already satisfied but for you you should go ahead and install that so now the next thing we need to do is to go into our roots directory and create a new file named runtime.txt so in this runtime.txt what is going to be in there is the python version in which you are using so mine is python 3.9.1 so i'm just going to save this and then what i need to do now is to create another file named prog file and then what is going to go in here is a file is this code so it changes project to the name of your project which mine is english dictionary so you can save this file now and close it so after doing this the next thing you need to do is to come into your terminal and say peep freeze requirements dot txt now you'll notice that you're going to create a new file here that's because it's storing all the libraries in which we used in this project so now let's come into settings.py we're going to go to database okay since we are not using database in this video we don't need to configure anything for database but what we just need to go is come up import jungle iroku and then scroll down allow us let's allow all us and then we're going to scroll down to the bottom i say jungle heroku dot settings locus and open bracket close bracket after doing this i'm just going to come into my command line and say heroku login so now it's going to prompt me to open my default browser and then log into iroku from there so it should give me an option like press any key to open your browser or press q to quit so if you press any key it's going to open your browser if you press q it's going to quit like you can see so if i press h it's going to open up my default browser like this and then log in now i'm logged in if i go back in there you can see that i'm now logged in so what i just need to do now is to create an uroku app so i'll say heroku create and let me name it english dictionary white so right now it should create that app and then give me two urls one is the url to the git repository and the other is url to my app so now that we have this we're just gonna say git status okay and we're going to initialize it by saying git init and then git status again and now i'm just going to say git remote v and then adjusting say git remote add heroku and then we're going to add that giz repository right here so i'm just going to copy it come down and paste it nice so i'm going to say git remove v again nice and then we're going to take git status so what i just need to do now is to just say git add i'm going to say git commit let me see the first time enter and then i'm just going to say git push heroku master so now it's going to deploy it to iroku so i'm just going to give it a couple of seconds to deploy our project onto your roku it doesn't take too long depending on how large a project is so let's see okay it's working so everything is going on fine right now i'm just gonna give it a couple of seconds install yes installing collected packages okay compressing after compressing it should say done yes so it has said done that means it has been deployed so i'm just going to wait for the last confirmation and then it's going to opt out of this command so let's just wait for that confirmation and then we're going to open this up so don't so when i click on control and click it's going to open up in my browser so as you guys can see it opened it up so let's just search for english so when we search for english you guys can see brought out the mini synonyms and antonyms so let's search for another thing like spots so as you guys can see what are the meaning synonyms and antonyms so that's how to build a busy english dictionary using jungle so we've hosted this you can go to this url now to view it if you enjoy this part of the video don't forget to like it and smash the like button and if you have any question please drop it in the comments so guys that's gonna be the end of this video thank you so much for watching to this part if you like this video once again please don't forget to smash the like button and please subscribe and if you like more videos like this i'm building more projects on web development with python jungle and stuff like that you can also check out my channel at code with tomi having that said bye for now

Channel: freeCodeCamp.org

Views: 126,441

Keywords:

Id: qPtScmB8CgA

Length: 121min 6sec (7266 seconds)

Published: Fri Feb 05 2021