Django Tutorial for Beginners | Full Course

[Music] welcome back my name is divisibility and in this video we'll talk about Django be django django is a free and open source web application framework now you will say okay we know about free part we know about open source part but what is a framework now framework is a combination of certain components and packages of course that if you want to build some complex application there are certain things you need a ready-made example if you want to build web application you don't want to do everything from scratch it will be time-consuming right so we will be using a framework here now Django is not the only framework available don't you say web app we have certain frameworks I believe one of them is or one of the famous one is Django but why we have to learn Django that now Django as we know is a web application framework that means you can build web application but roll down our websites are so important of course right if you talk about any business they need their own online presence in fact most of the virtual solutions which we use nowadays are the web applications example if you want to buy something online we have Amazon we have clip card we have a B if you want to book a cab we have uber right we have so many applications of enable which are based on web so if you want to build them you will be using Django there but don't when you talk about websites we know that you can build a website with the help of HTML CSS and JavaScript so basically we use HTML to design the page you can think vegetable as the makeup for you now that we have CSS if you want to improve your design if you want to have that uniformity in the design that's what you will use CSS so we have HTML CSS for designing to make your website interactive we can use JavaScript so yes we use HTML CSS javascript in the front end what about the back end part what if you want to make your website as a dynamic website example it's like you go to Facebook you know everyone will get different feed you will not see the same message which everyone is saying right so your feet will be different from them if you go to Amazon you can buy stuff online you can pay you can transfer amount online and all this thing needs certain operations or sudden processing done on the back inside and that's where we need a language which will work on the back end but which one so we have the options that we have Java using if you heard about servlet so we can do that there we have PHP we have ASP we have Python but hold on how can we do that in Python and that's where we have Django so you can use Django to build verification the backend part in Python okay as I mentioned before Django is not the only web framework available but it's quite famous there now when it comes to web application one thing is very famous which is MVC now it doesn't matter which language you learn maybe Java PHP or ASP we have this thing common which is MVC Model View controller now basically we do that so that we can separate big concerns we have model for data we have view the HTML format which you see on this print and then we have a controller which will control these operations in fact we have separate video on what is MVC but then in general when you say MVC it will help you to build a good app good web application but in Django we have something similar to MVC not exactly and we see which we normally call as MVP or NPV doesn't matter so that MV T which is Model View template so basically in MV T we are replacing controller with view and replacing be with template again how that works we'll see that later in the in the petrel video but then django basically follows MV T so if you have worked on MBC on different language don't worry it's almost same but with some changes but why you choose Django when you have other web frameworks available in Python the first reason Django is fast which simply means if you want to build something you should not be spending much time in just for the configuration so Django will help you to build application faster second one the number of components available but think about this if you want to record a video you need certain components with you right you need a camera you need lights you need a mic in the same way if you want to build a web application you need login you need database connectivity and all this thing comes bundled in Django that's an advantage and drawback as well advantages you have everything with you the drawback is you have everything on you the third one is security now if you are building an application where a user willing to write of course they will be sending their data and you want to secure them you want to secure your users so Jango will provide you that security and the fourth one is scalability what if in future your website skills you want to have multiple users you want to have more features so Jango will give you that option as well and that's the reason you should be learning Jango now so Jango is interesting so if you have done your Python codes before on this channel now you can also learn Django because that's the next step you can take to work with Django we have to install Django first and unfortunately we don't have a setup here now when you say you want to install a Django of course you have to be specific with the OS you're working with because for different type of OS we have a different setup for Django if you aren't using a Linux based OS or if you are using a Mac they have almost the same step but in Windows we have a defense settings to work with now in this series we are going to start with Windows for various reason the recording software which we are using is it works well on on Windows and most of the people are using Windows I will still suggest you to move from Windows to Linux to enjoy programming but just to get started let's start with Windows of course the coding part will remain same doesn't matter which OS you're working with so let's get started first of all you need a set up now if you want to work with Django as we mentioned Django is a web framework for python that means if you want to work with Django you need a Python setup now if you have seen my Python series we have done the Python setup there and then we have learned so many things right so if you have done those things if you have done the setup you don't have to install Python again is there in your machine but what if you don't have a pipe in the setup so that's where you will install it now when you say you want to install something there is one little question which is about devotion which version we are going for so for Django we are going for version 2 to be specific it is 2.2 of course if you are watching this video after some time you will be having some new versions but don't worry like at least for two eggs they will not be having any major update so that you can just check that on the documentation now whatever Python set up your need so if you want to work with Django 2.2 you need a latest version of Python which is more than 3.4 I guess so you just have to go to Google just search for Python download that ax a website up to go and click on that now once you come to this website you can see we have an option of download by thorne three point seven point three which will surely work it is more than 3.4 right but you have to also check one more thing which is the the type of Windows you are working with is a 32-bit OS or is it 64 bits or bit OS and based on that you can do the setup so download the version which you have with you know so this is 64-bit OS and I'm downloading that now so once you've got set up with you you just have to go to downloads so you just have to click on the set up which you got down to read so you have to make sure if your windows was in 64 just do that okay 64 OS and then you have to also make sure that you do this you have to say add a Python in your part so that you don't have to do that setup late later so just check that and here click on install now it does take some time okay so it says setup time for python click on close now once you go out your python install how do you verify it best way open CMD and that's your CMD prompt here okay so here we have to check for the python version so that way you can do that is by saying python - - you have to say version now I'm going to give you the version of Python which you have which is three point seven point three the next thing you need is P IP now P IP is a installer manager for Python so when you install Python you will get the IP as well so just simply say P IP and let's check the version of this as well and it should be nineteen point 1 or nineteen point zero point three both works so you can see I have nineteen nineteen point one the latest version now once you've got Python with you once you've got VIP we have to also check for Django of course we don't have a Django set up the way you can verify that is by saying Django - admin of version that's how you that's the django django command you can use and you can see it says there's no django available so of course we have not installed it yet so if we go at python we got VIP let's install django now if you install django here it will be available for the entire machine ok so what if you want to have a different configuration for django for different projects so let's say if you are working with multiple projects you want to have a different set for django there so just imagine from the entire system you are kidding right it is space for your projects so which will not be affecting the other projects which you have and the way you can do that is by installing a virtual environment wrapper so let's do that so the command is VIP install virtual and we wrapper - when and just have to say enter so it will install the virtual environment for you and that's done you can see we got this set up so once you go out this set up for the environment we have to actually create the environment because this will not give you the environment this this will just install the wrapper or the environment wrapper so we have to create an environment here the way we do that is by saying it's m'kay virtual env space and you just have to give any name to it so timely I will say test because I'm testing it and you would say enter so it does take some time and like so you can see we got our environment so what we have done is we have installed Python and then we have if you have installed a virtual environment wrapper and then we have actually created the environment so the environment name here is a small environment which very can go and you can also say it says test here so just before your command we have test there which means we are into environment now once you are in the environment now we have to install Jango let's do that and is it difficult of course not you have a simple command here so we can simply say apip install django i know we are working with command prompt and some people don't like it but come on you are a programmer right this is something you should be you should be loving love doing so we have P IP space install space django and it will install django for your simply Center now based on your internet speed based on a system so we did speed it will take some time and that's done you can see it says installed django 2.2 this is what we wanted in fact you can you can actually check the version now so you can say django - admin version so you can see we got oh something went wrong yeah so we got to 0.2 so that's the version which you are working with okay but what if if I open CMD again and if I check do we have django available here and you can see it says django is not available so that's the thing so django is there only in our environment is not there for the system and that's what we want right be what we don't want to disturb the entire system just for our project so we have the environment where we have Jaguar enable so we got pythons we got django and now let's create our first project yes that will be done using kumano itself okay but then how will now we can't do that in a particular project so what normally I prefer is I keep all my projects in one particular folder so let's do that I'd pick create a folder here so we'll send MK m dr m KD r and we'll say projects this is where I will have all my projects so we got a folder which is projects and let's move to that folder so it's a CD projects oh sorry projects and now you can see we are in that project so let's do it we got a folder and we are into it and let's create our project here now to do that we have to use a command again but don't worry once you you will get used to it so we'll say Django - admin so so what am I going to do you have to do with this thing you have to say Django - admin and you have to create a project which is start project and I will give a project name so that's the command so Django admin and then you have to say start project and you can give any project name video you want so it seems we have to discover let's give a project name as a new square itself and we'll say enter but before doing enter let me just go to this project folder just to see if it is empty or not so I'm in my C Drive and so in user we have that useful let's go there and and you can see here we have a projects folder which is empty and the moment I say enter here it will create a project for you let's go back to the folder and you can see we call it the new spa project now what do you think will it be empty or not let's double click here and you can see we do it's not an empty folder we have a managed Python file I don't know why why we need this let's say that later and then we got a disco folder in which you have four different files we talk about these things later you know what exactly these things are but as of now the important file here is managed ok to access that manage first of all we'll navigate to the project which we have created so the project name is the disco so we can see we are in the disco now and if i say LS oh that's Linux if I say dir you can see we have holder which is managed dot py so we have this file and then in Terry Squires we have satisfied which is important we have URL we are building a website right so of course in the website you will be having lot of URLs so this is this will be used to handle that this is something which will be used to deploy your project on the protein server because what are you working while you're learning stuff you will not be working on the production server you'll be working on a development server the testing server basically so we'll be using this we don't actually use in it so we'll not talk about that ok so we go out our project we are into that project now but what next we have not done any coding as of now but still you can you can run the project this particular project and you can run this on a particular server of course in Union server right Django says hi don't worry since you're installing Django we will also give you a lightweight server and to access that we have to say Python and we have to use a file which is managed dot py we have seen this file before and then the command get to use is one server and the moment you say enter you can see you got your shower up and running without any errors it also says some different stuff we'll talk about that later in fact in the theory video we have talked about fvt right which is model view template in model live it works by database right it's handle data that's why it is giving you those warnings but as of now let's ignore them what is important is its it says if your server started at this IP address so this is your localhost address basically and the port number is 8 triple 0 of course you can change this port number but I will just go here I would say 127.0.0.1 : 8 triple 0 and you can see this is your Django homepage ok why we are getting this why not our own project data because we have not done any coding as of now and that's why you are saying this if you want to experiment you can simply click on you can see below we have tutorials a pulling app you can just go there it will show you this steps out to how to create a project you know I just love documentation part here so you can follow this documentation just to just to learn more so that's how you do the setup for Python for Django and we have graded our first project without the recording of recording of course in the last video we have seen how do you send up Jango in your machine on Windows at least and then now let's write a code because in the last video we have just fitted the project and then we were running a server a lightweight server with django provides it was running so you can see this is the code which we have done we enter this command which is python managed dot pi which is your management file and one server which will run this server and then you just have to use any browser which you like I am using Chrome here and you just have to enter the IP address now this is the IP address which is basically localhost and the port number is 8000 and we are able to run the server and then we will be called the author as well but then we don't want this we want something extra right we want to build a web application that's what we do right so when you say you are using Django it means you want to build a web application okay now there are two type of web application we can talk about we have static pages and then we have dynamic pages now all the websites which we use nowadays some of the pages which you visit are static pages which means everyone will see the same page dynamic pages are different for every one example if I go to Facebook in fact we have talked about this example so if I go to Facebook I will see my own fees I will see my friends feed you will not see my friend's feed right that's you will get your own Fitch there so if I go to my bank account I will see my own bank balance not your bank balance so basically we have a dynamic point in there now when you say you want to build static content we can use HTML CSS JavaScript done but the moment you say you want to make it dynamic you want to do some processing that's what we are doing here so let's make a simple web application okay when I say simple we are going for the basic you know what we do when you learn how to get a web page you write hello world right that's what we do now I know you are expecting something bit but the thing is here we want to learn Django we don't want to learn the complex programming as at this point we know Python so we can write big applications but now we have to understand the framework so let's build something we using which you can print hello world on the page yes you can do the - team as well but let's let's make it dynamic here okay so for that what you do is you how to use some sort of IDE now basically when you say IDE we can also use a notepad to type the code ok that's completely fine you can use sublime because that's a lot of people use here we are going to use Visual Studio you can download Visual Studio by going to Google so many search for we just read it download this is what you will get just go to their website and you can download in fact every new version they are providing amazing features so let's try it out one of the best idea available for programmers now but again the community version which is free if you want to go for professional version you have to pay for it but at least at this point we are happy to work with the free version it works well so just some download that and have to install simple steps now in this machine I already have Visual Studio so let me just open that so you can see we have Visual Studio here this is how it looks like the out theme you can also go for the light theme it's also available here depend up on some programmers normally prefer black or dark theme youtubers or the content creators they prefer white thing because the recording works well okay so now once you have your once you have business to do we have to open the project now if remember in the last video we have done that we have created the project the disco so let's open that folder so just have to go to the folder projects remember we have created this folder projects and inside this project we have a telescope project which we have created using come on and of course select that that is go and click on open this is what you will get so you will get your project here which is the disco and it's inside this you can see we have a lot of files in fact we have talked about them before but just to go for a quick recap we have this managed dot pi which is useful to manage your project and then if you want to do some settings in your project this is very important the settings dot PI file so if you exclude this file you can see we have a secret key which is basically used for deployment in the server and then we have a deeper so little debug will give you a lot of information when you get stuck somewhere and this is very important actually so let's say if you are building our project and if you want to know what is happening behind the scene just make debug equal to two and it will give you all the information but make sure before deploying but on this server just make it false because some someone can hack your machine and they can see the all the logs okay and then this is important this is the installed app so in your project these are the apps which are already installed again we'll talk about it later we can have our own apps so these are the middle ways which will help you for security purposes as well we have a template so you can see this is the Django template will help you to provide template stuff what about database of course so if you are making a web application you also want to database in behind the scene maybe MySQL have a post wizalll SQLite so by default it gives you a SKU light but you can also use post was there and then we have some password stuff here for validation so let's not focus on this file as of now because we don't actually edit this file very frequently so let's keep it there but it is very important file ok and then we have URLs so you can see we only have we might be having only one URL here which is for admin for admin stuff so that's it as of now let's create our first app but hold on you might be thinking we got a project right why we have to get a separate app the thing is in Django what we do is we have a project like let's say if I want to make a big web application which will have a lot of features you know the admin stuff will be having some let's say e-commerce website we can have product as a module we can have shipping as a module so we can have a different set those are different apps and all these apps in the website will be provided in one particular project which is your website in general so login stuff will be one app then showing the products will be one app that's how so let's create a simple project here's the way you do that is by going to our terminal so you can see this is drug terminal and this is where you can type so how do we create our app and what you will name it so as of now I just want to name it as calc because I love hello world and then the next example will be Cal so let's create a calc app to do that we have to type a command so I have to say Python manage dot P why does the file we are using and then you have to mention the name of your app so as of now we'll go for calc the moment you say enter we got an error the problem is now we are using a different command to operate I was not expecting this but then we are using a different command clock right initially we were using the Windows command term now we are using a true Visual Studio and then if you remember we have to also set the virtual environment so the virtual environment we were using here is test so we have to use that so I will close this and we'll use test so how do you use our environment you have to say work on test so now we are in tests now we have to find a command so we have to say a Python managed dot py o we have forgot one more things you have to say start app that's what you serve just a start app information gallop the moment you say entered now you can see the left hand side we got a calc this is basically your app so this is your project I disco and this is your app now if you can see we have some different files there we have a settings here but we don't have settings here because this settings is for the project and every app will have its own stuff example let's say if you if you talk about the app we have some admin stuff here will not be doing that as of now but we have a admin stuff we have apps this name is important just look at this name we are getting a class named as calc config we are using we are going to use it then we have models now if you talk about Django if you want to build a web application of course you want to work with database right and in Django we have this awesome concept named as o R M so we'll talk about that later but then this model will be used for that use for that or basically it is used to hold data and then we have test so if you want to do some test cases if you want to test your application this is how we can do it and then we have views remember when we send out requests we have talked about MVP where views will handle your request but then you can do that here ok but we want to build hello world right so will you do that that we'll see in the next video so in this video we have talked about how to create a app in the project in Visual Studio of course that's what we are using here and then we have seen the files in the next video we'll run this code so in the home page so it's example if I go to home page and if i refresh i should be getting something like hello boys something like that this is not working now but we'll make it work we want hello world here at the home page in the last video we have created the app inside our visual studio so we cut a project in the inside which we got a small app named as Cal which is doing nothing and let's make it work so what we wanted is we wanted to get the homepage right we want to see the homepage saying hello world or whatever you want now the way you can do that so to understand how exactly thing will work this we have to understand how Jiang will navigate stuff so to make you request to the django server when the moment you request to your URL which is localhost colon 8080 triple zero it will search for the urls mapping so what will happen is you are asking for the home page right so it will search for the mapping which is with slash so basically home page is record with slash or empty if you wanted a way to operate block page let's say website slash documents for website slash products that's where you will see all the products page so hope is normally left foot as empty or slash so here we have to do something with this URL but then this URL is for the entire project not for specific app right we want to work with this Pattillo a pin to scalp so in this cap we need a file which is URL stored py its own URL mapping so let's click here and we have to search for you others dot py this is where you have to provide the mapping but what should be the code so if you go back to the project main project URL so you can see we have these two things here which is part sort of which I only need this form in fact we can just type it there let's type it so so we have to say from Django dot you other's import part we want to import the part and then here if we need one more minute views as well so we say from all import views okay but how would you provide in mapping so that's what you have to use a list of mappings okay you might be having multiple URLs to map with right so we'll say URL pattern so we'll have at least here so this is where you have to do the stuff so this will be having multiple lines let me say enter and this is where you will specify the mapping so let's specify only one path as of now we can add later as well so we can say path now for which path so you can also say slash F is for home or you can keep it empty that's your choice give a comma so when you when someone calls for the home that's what we are doing here so whenever someone calls for home page we need to hydrate it with some function now of course the navigation is a process right it should be done with the help of some function so we'll call that function but what is a function name as of now we simply say we use dot o comma and we can have the name as home itself all you can also have index dot HTML right that's what we do so we normally have our page home page name as home or index dot HTML what we'll do here let's stick to home so when you click on this views if you get any other there it will ask you to install this extension let's click on install that it should not take much time I think it's done let's go back to CMD our original prompt so you can see we are getting an error here for viewers but why record the error it's because the moment you say you for this URL you are handling this video poker home function unfortunately we don't have this function very we'll define this and that's why we have this view module so just go to views dot py and here we have to pay that function ok what function so the moment you say function you have to set def and the function it would be home that's what we are used there and this home will accept our request oh that's what you get from the client right so when a client sends a request you will get in a request object and then you can simply return ok but how will you return data so I won't return hello boy so what we are saying is very much polite requests for home or the home page I want to return hello world but then this will not work directly because we have to send that in a response format if you are getting data in a request format you have to give back in a response response format and if you want to use that we have to use a special thing here which is HTTP response let's give a bracket here ok so what we are doing now is STP response ok but we go attend other the other is see whenever we use the HTTP response now we have to also import it right because it's not imported here so we can do that is by saying from Django dot HTTP and we have to import HTTP response so the stripping response belongs to this package or module named as HTTP ok so that's done we can see if you've got a function if you go back to you start by okay it should remove the error now what's wrong okay you can see it's all so we got views there as well we got who used at home it is working but will this work so you can see we got a calc as an app and then we have edited two files because this will handle the mapping so when we call the home page it will call this particular function which is home and then in this fuse it will pause it will print hello world but will this work unfortunately let's okay that's why it's why to say unfortunately in fact I will be creating extra or maybe else I will use a second wrong here okay so you can see I'm using two plants in fact we have record replant songs here so here in the new prompt I'll be shutting the server because this server is not on so if you refresh you can see we don't have this ever started let's go back and let's type the command and we all know the command now right so which is Python space - dot py and you have to mention run server ok so once we have this server running let's go back and let's say refresh ok you can see the god we are still getting the default homepage we are we are not getting the void something is wrong here so think about this we are doing all the mapping inside the URLs dot B Y which is our file right we are not doing anything in the project files because this is the main file which which controls everything so we have to mention that entry here as well not the exact entry not all all the entries but just one entry we have to mention hey you have to also use the URL file of the app and the way you can do that is by saying path so for the home part we are using it let's give up comma and then if you want to use that particular file which is URLs dot py or calc you have to mention that here with the help of a function named as implode and in this you have to mention kal dot URLs ok the automation that fine that's it it should work now or but there's one issue you can see we got an error here the error is of comma is it yeah so there was a comedy show so you can see we got the error for include now but why is because we're using a function without importing it so this is something you have to remember you have to also important so you can simply give a comma after path and here you can mention Inc load and our job is done that's it I hope this will work now let's go back to the browser and say refresh ok so this server is not running let me on this server again so you can see we got hello world so it's that simple right just to go for a quick recap what we have done I know we have not done sent something much but at least we are able to generate up content dynamically without using that static HTML page right so if you can do this we can do whatever you want right we can fetch it from database we can do calculations as well right but we'll do that later but as of now what is happening the moment you send a request request search for this file when you are saying hey if you are searching for the homepage you have to look for calc URLs and in this calc you others what we are doing is we are saying OK for the home page you have to call this function which is home and inside this home we are saying here it turn is written hello world so whatever you mention here may be the variables as well because this is a function you can write variables right so you can do some processing and you can return so that's how you can create your first app doctor this fine we were able to print hello world on the screen and dad to the page we have painted is not a static page right so what we have done is the moment you send a request to a page so what page I'm talking about so so this is what I was talking about the moment you go to your browser and when you say localhost or the IP address colon eight triple 0 you will get hello world because this is your home page right so so in your Django what we are doing is I'm going to send a request so it will go to the urls of your project where you have mentioned that whenever someone calls for the admin this is what it will handle but we are not doing that we want to handle for the home page and that will be handled by calc dot URLs which is here so we have one more URL dot py in our app now the question is why don't we do everything in this URL because we can have multiple apps right and every app will have its own URL and it makes sense to do that because it will be isolated so if you touch one thing it will not affect the other one it will be easier to manage so in the UN s dot py you can see we are saying again path and then we are saying for the home page we have a function named as whole so if you go to views dot P Y which is your Python file for views here we are saying this is a function home the moment it could get called you just have to send a response which is a HTTP response and you have to send hello world and that's what we are see we are able to see that in a world but hold on if you talk about the real projects if we talk about the actual web sites you don't actually print only one text white you mock you might want to print multiple texts you want to print an image or you want to do some amazing UI style that up don't worry I'm not going to do that do that here we are not going to create a good-looking website which we just want to get up simple web page even if when you say web page it will have certain HTML tags right for the title for the bgcolor I mean if you want to change the background color I know how to do that right ok so you can change the background color and then you can also have some amazing font right if you want to use a big heading small heading so of course that should be done in HTML now how when you use HTML here so let's I want to increase the font size of it or maybe I want to set it h1 so yes you can do that you can actually type h1 here so before hello well you can say h1 and after well you can say h1 clothes this is perfectly possible but is it logical because if you go to browser it was torn your work you can see the fresh you've got hello world in a big font but what if you want to create a big page I mean multiple tags so it doesn't make sense to type all the tags here so what you wish do we should be creating a separate page okay a home page which will have a lot of HTML tags but don't you think the moment you create a new HTML page it will be a static page once you specify the content we cannot change it to the static right we want to make it dynamic and that's where in Django we have this amazing concept called templates so you can imagine in template what we can do is we can have a HTML page okay and in that we can have a dynamic content the layout will be fixed you can you can change layout or you can make it study that's your choice so imagine the background color will be fixed everything the entire layout will be fixed but the data will change and yes that is possible so in Django we have a concept of DT L which is Django template language so we all have one more option there we can also use ginger but again we'll talk about that later as of now let's focus on templates in fact if you go to settings we have seen this right we have templates here and here we are using Django templates right so using this you can actually achieve that now to see that we have to actually create a page right so where you will create a page normally you can create a page outside the app or in general the root directory so that's a load tag here so I will just come back here so I just want to create a folder when I will put all the pages now what name I should be giving it so you can give any name to it you can say pages you can say templates so that's your choice I can have anything so I would say templates here since we are using DTL in this templates folder I want to create a file which is home dot HTML so let's do that so we click on that I'd file here and we'll say home that HTML and this is variable print HelloWorld but this time of course I will be using h1 tag final client in a world but just to get a different text because you might even not be knowing that something has changed so what I will do is I will simply say some exclamation mark because in the actual output here we don't have estimation marks so now we know when things are changing right so you can see we got hello world and then at we are getting some estimation marks so how are you Paul this home that HTML so for that we have to do some changes because if you go to your browser and if you said it first nothing is happening right so the first thing you have to change is your setting file so if you go back here and if you say settings this is where you have to do some changes okay now what change so you have to change your this dirs file which is part which is actually directly file so you have to specify the path of the template because where you will search it there because the moment you load this application your Django should know where you have all the templates so let's specify the path here to do that you have to say OS dot part door join and in this you have to specify in the bracket if you specify two things first the base directory so you can simply say base dir and here you have to mention the folder name and you have all the files so you can say we have those things in templates and your job is done so you have specified the path now so you have to also change your views dot by file because here we are saying HTTP response and we are reading the text we don't want to do that we want to call the HTML page and to achieve that instead of saying responds HTTP response we have to say render because you have to render your template because template is just a file and it might have some dynamic content so you have to merge it right you have to compose your static content with dynamic content and that is for the rendering but we are not doing that as of now right we have we don't have dynamic content we'll do that but of course we have to use render because that's something works so in this render we have to first pass the object of request because again we will use this equation object later as of now let's pass a request object and then you have to also mention the page you want to call so of course we want to call home dot HTML and that's it your job is done so if I go back to my browser I hope this will work let's refresh can you see that we got a dynamic content we are calling that home that HTML and you can also see that we got exclamation marks there but hold on we are talking about dynamic content why what if you want to use dynamic content here so let's say show of saying hello world I want to print hello naveen here is it possible yes we can do that but I want this name to be dynamic so what we can do is instead of having this on this page let's go to view now this is your Python code right so you can have any point any you can do any operation here so maybe you can also fetch this name from database so if you want to do that you can simply pass the name here as well so you can say you can use a cutter packet here and specify the name give a colon and the name we are passing is let's say Naveen so I want to use this name in my HTML so we are passing some JSON format here all the data you can simply say go back to your home to HTML and here we want to use that stuff so to achieve that we can simply use two curly brackets and here we can specify a name now that makes it dynamic so I will I will talk about this what did those curly brackets means but let me just check if it is working and it's working kay so that we got Naveen the amazing thing is if you go back to your views and if you change the name again this name can be from anywhere it came from the internet it can be from live streaming so let's say if you are sending huge amount of data you can pick up any name and you can print it here as of now let's keep it let's keep it any name so let's let's go with given and now if I go back let's refresh so you can see we got killed and we are not changing anything in the home that HTML we are doing that in Python code right that's what when you say dynamic content now this cut is a package here it simply means that the code which we are writing here is dynamic okay so this is the ginger pattern what you say or ginger template now if you are coming from JSP or PHP we have the same concept there as well now this is only for the variable can be use actual code it can be do operations here and the answer is yes you can also do operations here but how to do that that we'll see later so I hope you are enjoying this we have just created some dynamic content using templates so this is your D reality which is Django template language also we can also use ginger and in fact we have multiple engines one is the Django template which is by default you can also use ginger but we'll see that later as of now this is working so till this point what we have done is we got this hello Naveen which is the name is actually coming from the Python code which is in views dot py but now what I want to do is let's say I want to print out hello Naveen but then if you make multiple pages most of the pages will have the same theme right the layout the color scheme will be same what will change is data or the logic for that rivet those particular pages so what if you can take out some unique thing and keep it somewhere maybe something like I will go back to my template here and I will create one more file and we'll call this as base dot HTML now this is where I want to put the basic code which will be common for all the pages and then in that block indeed body we can have our own code so what I'm talking about is I'd let me just create a basically out we can simply say exclamation and enter you can see we'll get a code the basic at least and here I want to change the title so title I want is the disco and then I also want to change the colors a big kind of changing colors ok so I will say body BG color and I love C and so okay in fact you can also I don't know if you know this thing you can also have your own name here so just type C on here and then that that could I want now in this body so all the pages which you will have they will replace their content here example if I talk about home that is tml this data should go inside this basis page HTML but how's that possible touch it that again can you write a code here and that too in detail format or you can say ginger format and to achieve that we have to write 20 packets and you have to enter two percentage sign this is what we normally do okay this is where you have to say block content so this this will be a block where you can put your content okay so when I say block we have to also end it right so that's a block and 20 block we have to say and lock ok now you can see when I type this code am I going to actually see the color so you can see there's a different color here that means my visual studio code is actually understanding the code which I am writing so the block and an block if in your IDE if it is coming in white color you might have to add the extension now this extension so you have to go to here extension you have to add at this ginger extension just type ginger here and say install and that will be done so when usage enjoy it would ask you it will give you an option of install just install that and reload if it is asking for that it will give you those things okay now once you've got your block here we have to also go back in homeless GML because i want to use this in my home to HTML because if you go back to my browser if I said if as you can see we don't have those color this yang telah so let's go back to the code now if you want to include that here again we have to use ginger code here so you have to extend that based on HTML so you have to say extends in single code base dot HTML and this part which is hello will go inside the body Oh inside the block and to achieve that you have to say block content and here we have to end it and that's it your job is done let's verify it is working refresh and can you see that record CN color and then we got this hello kitten now if I go back you can also have your name here let me say Riya I hope this will work ok dia comes black let's say bindi and I don't know how he's been D so when they has you can see that much and normally when they comes a trilobite I don't know why it's here so basically it works with the hash value we'll exam and you say it will convert your text into exact value that so it works but stick to see on and that should work right so this is how we can use the external files here in your code so that's how you can use explode now in the earlier video we have talked about how can we include the HTML in the new HTML with the help of Django core of course which is the extends right but then what I want to do now is I will do some operations because in this point we have not done any operation we are talking about dynamic content so when I say operation we will do well the simplest operation possible which is addition of two numbers I know we are talking about simple stuff but then important is we have to understand the concept of Django right how everything was behind the scene but not the actual code because that's something we can make it complex right so what I do is I will just go back to my homegirl HTML and here yes we want to plant hello kitten or hello Naveen let's go back to knowing so that we know to remember what the name we are going for so let me say Naveen so I what I do is I want to create a form using which I can add two numbers so the moment you say you want to get a form you can simply say form and you can say action that time we let me just keep it blank and in this form tag I want two text fields because I want to add two numbers right so let's say enter first number and here we'll say input type text and we can have a name to it we can say num1 in fact you can have any name but let's stick to num1 and we'll say BR so that it will come on new line so let me copy this code and say enter and then here we should saying first number we want to have it as second number and this one will become numb too and here we need a button so I will say input type submit and that's it we got a form and when you click on submit it will add two numbers it's not that simple right because this is a HTML code how can you simply add those two values here let's imagine this works and when you are saying hey 2 plus 3 is 5 but when you will print it so whatever it goes I will create one more page which will be used to print the result so I will say result dot HTML a simple page and in this HTML I also want to have this extended format so I will just copy this copy and paste in fact actually we should be saying that as code reuse right code reuse makes much more sense and here we just want to have the end block and now we just want to print this result dot HTML but will this work of course not right so whatever I do is I'll mention hey whenever that click on submit I want to add these two numbers now it will search for that ad dot HTML or something like that so you have to go to views and this is where you have to map it now how would you map it so or not here you have to go to URL and you have to map it here so the map would be so I will say path whenever someone calls for an ad because see if we don't do this if you remove this thing and if I go back to browser now since we are we have a form you can see it will give you the form and if I say 5 and 6 it will when you click on submit query we got the error will solve that but look at the address bar the URL which you are hitting here is added so way to handle this and that's why we have to add a path for the ad and then we'll save use dot we have to say add or we can have any method name or function name and here we'll say name and time we let's keep the same name as ad but unfortunately you can see we got error here or record we are missing comma you can see we got error so we it's it simply says if you go to views we don't have any function named as ad so we'll say def ad it will of course it will also accept the request and here we have to say return render oh we have not created the page yet but let's do that some say request and the page I want to create is or we have a page result dot HTML right if I go back to result our HTML I'm not printing anything here so let me just print result now let's see if that is getting called refresh okay it's still loading something went wrong I guess we got some invite syntax here so there's a problem with the part maybe have to restart this so is it okay refresh and you can see if I click on submit so we got the result but not the actual value because we have not added those two values right so what is happening till this point is when you say URL when you say added you are getting add here so for my thing is working it just went up you know that formatting as of now so when you say and it is calling this ad so in this ad what we are saying is hey call he says not HTML but we also want to add those two numbers right so how would you do that so to achieve that we just have to go back to our views and here we have to perform operation this is a Python code right so you can pop you can perform the operations here so let's go back and now I will simply say so we have to first find the value aside we have two values and those two values are five and six of course you can pass any value but that is it that is getting story in num1 and num2 to fetch that I will simply use a variable here we'll say value one equal to and to face the value we can simply say request dot so this is the request object we are using so finally we are using that object of course right because as a client when you send a request to the server you are basically sending an object and that object will have some values so the value which you are passing here which is num1 num2 is in that particular object right and when server send you value back it will be in a formative response so we can simply say get now we can have multiple value so I want to fetch the noun 1 and here we'll say value 2 this will be for request dot gate and this is for num2 now once you've got those two values I want the results so we can say RDS equal to value 1 plus value 2 we just have to add them and once you have added them did we want to send it to the result right and then you can send it you can simply give up comma here and you can use curly brackets we have done this before right so I can say result : re yes so our es is a variable in which you have a value the output value which I am sending with a name result so if I go back to result on HTML this is what I want to print it so I will say result : and if you remember we can use this curly brackets for the name and I can say result it's that simple right it's this it's all about that flow so if I go back to my page and if I said afresh click on submit and record the answer so when you add five plus six you will get 56 that's weird okay so what is happening is if you go back to your view dot PI you are adding this two values right but unfortunately by default the value one and value I text or string because that's what you're getting from here it will give you text by default we have to inform hey we don't want text we want that in integer format so we have to convert with the help of int function both the side so now it will be a because when you say string plus string it will give you string right so five and six it will be getting concatenated what we want to do here is we want to convey one to add them so we want numerical values let's go back refresh submit out straight is getting the wrong value so what is going wrong maybe I have to use a single quote here but that should not be an issue let's go back refresh oh that was the issue so you got to be put that in single quote so you can see we got the output as a 10 our job is done right so that's how we can add these two values but then we have one important concept here is of get and post because in this code we are actually working with get but what is good and how can we use post so we'll see that in the next video so I hope you enjoyed this video if you have added two numbers in fact just to give you a quick recap in the Hogan HTML we got a forum we are asking for those two values the moment you click on submit the request will go to add so the in the URL mapping it will check ok if you if the request is for add I have to call the add function and inside this add function we are simply accepting the request fetching the values adding those two values and calling result or HTML with the value and result of sgml we are printing value that's it now till this point we have added two numbers right and acto with a form and when you click on submit the request goes to the server that's where the processing will happen and you will get the answer and it works right but the thing is when you talk about this HTTP protocol it has multiple methods to work with so whenever you send a request or you get a response you are basically using HTTP protocol now when you send a request here by default you have a method which is get so basically HTTP has multiple methods the way we have GERD post port delayed so here we are focusing on two methods get and post now anyway you want to fetch a resource from a server so basically let's say when you visit a link when you say hey I want the image that's a get request because you are expecting something of yourself from a server but what if you want to send something to the server maybe if you are filling a form and then you want to submit your data that's where you're submitting data that's why we say post right so post is for adding the new data to the server get is fetching the data again we have another - we have put and in it put is basically to update the resource or the to update the data of the server and then we have delete and name itself says it's for delete right but here what we should use get or post now technically we are sending data to the server right we are passing two numbers so it should be post right but then unfortunately the code which we are using here is forget but before going the hell I have to switch to my virtual environment and I have to also start this server because just before the video I have restarted my machine so let's do that quickly okay so my server is up and running and now let me just enter some value so I will say four and let's say if I sent five if I click on submit the request ID which we are using here is get now in get what happens is you are actually sending the data on the address bar so let's say when you search for have invented you can see you will get a results right but look at the address bar it says WV google.com slash search and then you pass a query string which is Naveen ready right so basically when you want to face data you also have to pass some data server now when you search something like this on Google it's completely fine right if someone sees the data in the address bar because I'm just searching for something but what if you are sending the username and password from this form example here when I'm sending four and five it is actually going to the address bar right now since it is an address wise not secure we don't want to send our data in the address bar imagine you're using even password so to achieve that we should not be using gate we should be using post so that's one reason second one maybe you want to send multiple data not just one or two maybe you have the entire form of ten twenty fields so you don't want everything to be coming on there just bow and technically for submitting data always use post so here let's not just get let's use post but how would you do that so the first step is go to your form and say hey method equal to post so by doing that you are saying hey I'm not using gate because by default if you are not setting it it is get you're saying hey I don't want to use gate I want to use post so just do that but will this work just by saying post will it work let's try let me just go back to my browser instead of fresh here let's say seven and eight click on submit oh we caught an error at least in the address bar you don't have it right you don't we don't have anything at that does bother but what's wrong so it says CSRF verification fail engine now that's weird so what happens is in the world of Internet we have amazing things right we have amazing resources we have amazing services and then we have a huge amount of user data now yes we have some valuable stuff online and the moment you say something is valuable there we have hackers we have attackers and then there are different attacking techniques available so we have multiple attacking techniques out of which one is CSRF so will not be talking much about this attack you can just go to google and search about CSRF it's a type of tag you can just go search about it understand is very important for the web developer to understand this type of attack so to avoid this what django says is by default django gives you so if i go to my settings dot py you can see in django settings we have a middleware in which one of the middleware is CS vo middleware so it's it simply says hey developer by default I'm providing you this middle bail please use it and then in our code we are not using it if you can see HMDA HTML we are not using it here so what can be done since it is compulsory for you yet you could just go back to home page TM l and here we'll say hey I want to use that token here and the way you can do that is begin by using ginger code so we'll say cuddly packets and then percentage and here we have to say C as RF token so let's say basically you're using like token here to send it data okay now let's go back and this time it should work say eight and seven click on submit okay so we got a different error this time we are not getting that CSRF and now the problem is it says multi-value dictionary key error the problem is you are using post but in the code if you can see in the views dot p why we are using get so we should be using post here not get so we got post save this file go back here and it should work now say submit and it works and say the address bar we are not sending data in the address bar so basically we it is done with the help of cookies so be it we don't say anything in the address bar so that's how you can use post so basically when you what you want to fetch data always use gate when you want to submit data always use pose now there's one important concept in Django which is MV D or MTV now it is very similar to MVC on different web frameworks available but in Django we use MTV or avt now it stands for Model View template but why do we need that so let's start with a simple web page so of course right as a user you go to a popular website and you fetch a page now that page can be a static page because in a normal page we have two important things one is the layout of the page and then the data as well now data is something which we want right as a user we want to see a detail we want to use a data but with that we also need a layout of course you will not go to any website right you veget don't have a layout even when you go to Amazon and if you see your order history so you will see all the orders there but then you you get everything in a proper layout now that layout will be designed in HTML CSS or maybe front-end JavaScript and the data will be coming from database or maybe you can have static content additional itself you know everything will static but what if you want a dynamic content example as for the user example on Amazon if you co2 history you will see your order history right you will not see my order history so data on that page is different for everyone so basically when you visit a page let's say or the history on Amazon everyone will get a different data so that data is actually coming from database so yes there is important the layout is important and there is one important thing which is the business logic of course right when you want to do something on the website you become a leader for that as web application nowadays so in the web application some time you perform some operations you build your business logic example let's say if you go to again Amazon if you want to add a perk in a cart that's one process so on the Amazon server they will be doing some processing now we have to write that code somewhere so basically we need three things the data the layout and the logic and to write if we in fact we can write everything in one page so we can build a page where you will have the layout where you will have the data where you have the logic but you know sometimes it's better to separate those things from one another in fact we call them as separation of kinds so we have three concerns we are separating them and that's where in software engineering we have different software design patterns one of them is M V T so M V T is Model View template now as name suggests model is for data yes so the data is segments coming from database and that can be linked with the model object right so when you say models in your application you might be having different in entities and every entity will have its own model object now that can be linked with database again you will see the examples later and then on the other hand we have templates now this template will be normal HTML right in that HTML yes HTML CSS and front-end JavaScript but it will also have DPL which is Django template language so if you let's say if you want to introduce some dynamic data in your page that can be done with the help of DTL so we will be having that layout and the detail there so this data will be coming from the model object right but who will link this and how you will call all these things you know you have to provide this navigation somewhere so let's go back again so let's say as a user you want to fetch data so you are sending a request this request will go to your application your web application may be if you're using Django there so it will go to Django framework now in Django framework whenever you build a project you will get a very specific file which is URLs right we remember we have done that so in the you others you do the all the mapping right so from where you will get the request and then what will happen so that navigation will be sent to the views if you remember in urs you do that you save use dot something so it will go to views now what is view we have not talked about that so the business logic which we want to write will be done in views I know that's bit tricky because normally when you say view it should be a should be a page but that's not the case in views we actually write the business logic right and then this views will use the model object and the template so what data has to be sent on the template will be decided by view right and the connection with the models will be done through view and that's the importance of this model view template and that's why we say it's the MVC framework right so it's quite useful to segregate your concerns is separating your concerns model will work with data views will work with logic and template will work with layouts so that's about mbts so just to recap a user will send a request which will go to URLs in the urls it will check ok we have to call views because that's what we do in the core and inside this view you will write in logic plus we will also connecting your template and the model so you will see all this example in the further videos now you can also read it the same concept with MVC in fact in other frameworks like spring we have MVC and then we say we have Model View controller so whatever we is done in model in Django same thing happens in MVC which is M death model then we have view so that the worth of this template in those framework is done with view and the view job will be done with controller not exactly because in other frameworks we have to configure the controller as well we don't have to do that in Django because it will be done by the Django framework so they are quite similar but with this main difference which is in views we don't control stuff right that's the thing about MVT if you are getting confused just ignored MVC focus on MVT everything Model View and template now till this point we were able to create a Django project and then we have created an app a simple app which will add two numbers and then we were able to do that right but the UI was not not that good so if we go back to the browser you can see this is the type of UI which we are working with but of course when you are building a professional website you will be having some amazing UI right now there are multiple ways of getting a UI you can create your entire UI from scratch we have a different theme for that maybe you have a great designer who can create a good UI or if you are a full standard upper you can do it from start to end the back end and the front end as well but here I will not be building anything from scratch we will be using some existing templates so if you go to google there are a lot of websites I've been able which will give you templates for free or you can buy them right and they're not that costly but here for this example I'm going to use a free template so let's download a simple template so let's go to in fact I have already checked a wine template on the website which is travel Oh so if you search for travel Oh color late so this is a website where you can download this free template yes they will not allow you to change the photo and so the footer you have to use their name or something your photo crates must be remain in the place so will not be changing it so we will be using this free template so you can simply download that so we you can simply click on download and it will download in your machine as a zip file you just have to unzip it okay so I've already done the unzip so you can see this is the template which I've downloaded from the internet you can simply open this index dot HTML and this is how it looks like so they have this amazing UI available here so basically this is for the travels so you can simply go then it can book your travel to Bali Indonesia Paris if any way you want to go and then they will give you cost as well we want to use this page or we want to use the design but then you will say hey we are learning django right why we should focus on the static content see the idea is this is the UI right and then when you say you want to make a pointing dynamic this is the content you have to make it dynamic maybe the the images here the names the price because these are dynamic stuff right so let's say in future you now you have six places what if you want to have one more place and that's where you will simply edit your database in your database it will add one one more location let's a Mumbai and then you will say applies there maybe let's say thousand dollars and then you will set the data as well now all this data the image will be coming from the database so the link of the image or the price will be coming from database and tied to dynamically you're not actually changing your HTML file at that point so to achieve that it emits negativity will do that later but as of now I want to use this thing in my project but this twist here what happens is when you just copy this index dot HTML you have to also take care of the static files example images we have JavaScript files because this all these things are very important for this layout right the animation effect which you are saying there the images and then there are certain plugins there are certain styles we want all this in our project ok so what we will do is let's copy this file so let's copy this index dot HTML in our project oh but where maybe we should be getting a new project new app right I would I don't want to work with calc anymore so let's create a new app first so let's go back here in the new command prompt ok so in the new terminal I have to just move to telesco I have to work on tests so now I want to get a new app so the for that I will simply say peyten manage dot pi now we know how to get a new Apple ID you can simply say Python - dot py and then you have to say start app and you have to name the app so we'll go for a traveler because that's what we are building now I'm not sure that if they already have this website are available online I just went with this theme which looks suitable so you can see we got another app here named as travel oh yeah so this is what we want to use this is where I want at HTML to be to put that HTML I will put that in templates so let's get it here copy and paste in templates so you can see the templates we got it and now if you want to access this page we need to do some changes the first change is if you go to URL Oh in this in this traveler we don't have URLs dot dy ok so let's do that I will instead of typing it let's copy the existing URL so you can see we will be getting us dot py then certain changes let's this time let's go for index you know we can go for home as well but let's do for Thanks so we don't have add this time so let's remove that so we only have one path and tack two with views index and then we have to change the views as well you can see this views empty so here so in the travel overviews okay so earlier we were working with calc views and now just change so in the calculus we can simply copy it right so from the calc so ways that yeah so I want to copy this thing yes you can type it but I'm being lazy here so let's go back to the views of travel oh and paste now here I don't want it to be home I want it to be index and here it should be index dot HTML and we don't want to send any details of now let's keep it let's just call that index.html but will this work why two things let's go back to the browser and hit the home page okay so it's down so is not running so let's run this server as well right so say run server ok so I was running let's go back here let's say refresh and you can see we got a page but that's a calc page right we wanted our own page there the new page if you go to us dot py you can see we have so when you say homepage you are calling calc dot you are else we don't want to do that we want to work with traveler dot URLs that's that's why we have added it so let's go back to the browser say refresh so now when Sai saved the project you can see when i refresh we got index dot HTML of travel oh but something went wrong you can see we are able to get the page but there is no image there is no styling and there is no JavaScript in 25 I click here and if I say inspect element console you can see all these files are missing because we have only copied index.html right we have not copied the static files so basically in this video what we have done is we have created this new app named as travel oh and we got this you amazing UI from the website you can simply type raveloe and color lip you can just go that ok in fact you can download any library you want but just for this example you can stick with me once you have done with this you can try with your own templates and then we have input it only one file so make sure when you create new app you do some changes now okay this there might be one question why we are changing from Cal to you others why not create a new one a new path yes you can do that the only thing is I wanted to have traveler as my homepage right that's why I'm keeping I'm changing it but if you don't want to that you can simply say travel oh so what will happen now is if you want to get the traveler homepage you have to say they hope URL slash traveler and that's what you will get it in the last video we tried to put the static files in our project so it was a simple HTML file plus we wanted some supporting files as well like JavaScript CSS and images and then we were trying to make it work but unfortunately things are not working here so as you can see we are getting the output where you've got a page but then it's not properly formatted because to have proper layout to it we need CSS and if I just go to inspect and if I search for console you can see a lot of files are actually missing but do we have this file in the project it's very file so if you go back to the project you can see we don't have a folder but it has all the JavaScript or images so what we will do is let's create a simple folder and that will be done in the telescope so let's do that in the project itself so in the project that is go let's create a folder and let me just name that folder as static you can have any name doesn't matter it you can call it as assets or static and in this static folder what I want is I want to put all my files all my static files so let's go back to the place where you have a template so this is our template where we have four or four folders one is images then we have JavaScript plugins and styles okay so as you can see we got two folders here one is the template which is Traveler here where we have four folders and then this one is our project folder which we have created the project which is the disco and then we have also gated the folder which is static so let's go there I want these four folders there so we can simply copy these four folders and paste it here the moment you do that let me just close this we don't need this anymore close this and you can see here in the static we got all the files now it should work right because we have done we have identifies once it is copied let's go back to the browser and let's say refresh and you can see it's still not working because this door it's not that easy see trust me when you work on a project there are certain things you will be doing only one example setting up your static files you will be creating one particular folder you will be putting all your files but your Django should know where to look for those files and that's why we have to specify the path but not in HTML format or the but you have to mention that in a Django format okay what I'm talking about so first of all you need to go to Settings dot pi and you here you can see we have a static URL by saying static but then to make it work to use the static files we have to work with two more settings here so the first one is to specify where you will find all the netic files to do that you have to say static so we are informing Django now where you will find all the files so it stays static files underscore DI RS and here we have to specify the part it can you multi multiple parts I will be using a least and here we have to say OS dot part dot join so basically you are joining the base path plus with the telesco slash static path so to do that we have to first say base path and the base path is base dir and here you have to specify the place it is the Disco's - static this is where you will find all sonic files but then what Django will do is Django will make it simple so dang we'll say ok you have a static file or static folder where you have all the files so what I will do is I will pick up all the files in your static folder and I'll put that in my particular folder Django folder basically just to improve the process but what should be the name of that file so I have to specify that so we'll say static root equal to so we can give any name so we'll say o s dot path dot join and it should be in base directory so we'll say base di are and then we can put that in any folder we can have it name static that's your choice let's time when let's say assets so we'll put all our folders in fact Django will do that Django will put all our for all our static files in this asset folder and our job is done but then the way you can refer them is with help of static so this is how you can refer to the static files ok so this thing should work now but let's go back let's verify still not working what went wrong ok so what I'm going to do here is let me just restart the restart the server one not working so what we are missing first of all we we are saying Django will create a folder named as assets but you can see we don't have any folder anywhere here so we have to create that folder first but I have mentioned that you know Django will do that so yes you have to inform Django hey you have to get a folder which is assets and the way you can do that is by okay let me just pick up the Sigma some other CMD and here we'll do that so we'll say C less okay so first of all let me just walk on test CD that is core so we had to pass a command if you want to get at folder and the command is again you have to say python managed dot py we know for anything we're going to use this file so there's a specific command which is collect static they're going to do that it will collect all the files okay so we got an error okay so so it says there is a problem with the with the path oh okay so how could you the static folder inside telesco which is the base directory so maybe I have to remove this one it should it is not inside the disco and say enter okay now it is working you can see we it is it is working now and you got a separate folder which is assets you can see that and in this asset you got all the files this is what you wanted right okay now once we have done with that let's go back to our browser and run oh it's still not working so we are we are going step by step right so first we have mentioned that hey Django you are responsible to handle all setec files but the moment you say Django will handle everything we have to also edit a file here now which file now of course when you say you are working with index dot HTML you can see this is where we are specifying all the parts example if I go back here so you can see here it says it's not able to find this CSS file so it is on line up a nine so if you go to line number nine you can see we are trying to use a CSS but then it's not in a proper place so how do you provide a link here now any way you work with static so you have to change this URL so you have to change this edge left to the Django understandable language so just before every part you have to do one change which is you have to say curly brackets percentage static just before the path and all these things will be coming from the static folder so your path will be in a single code of static attribute or Sonic tap so we are saying this you will find this in a static folder right now so this static we have configured just before right so I know it's a tedious task but you have to do that everywhere so variable you have part you have to change this so once I change this one you can see there was a error on line number nine but I'm going to i refresh it but this time we've got a different error so it says invalid block tag on line number 10 which is static so it is not able to understand static so that's where we have to inform Jango hey you have to load this attic file first so have to say dollar Lord static the thing is you know when you as a programmer you spend less time in coding and more time in debugging right I hope this will work now let's refresh and okay so this this worked you can see there's something changed in the layout so that is the first it has find the first line so on line number nine they are gone now the next error is on line number twelve same thing can be done online but well as well which is here so this part need this thing so we can simply copy this and paste it here and we will give will end this with percentage and quality packets let's go back and say refresh and you can see every time you do one connection it will change something in the in the front end and if I go back you can see it is done with the line number 12 is line about 13 now the template which we are using has so many images so many styling so it will take some time but when you are working on it initially from start itself you will be doing all this changes right so what I will do now is I will complete the entire stuff so whenever I have plugins styles and I put all these errors I will put this thing just before that and then we'll resume with the video okay so I have done the changes everywhere so whenever I found Styles plugins JavaScript everywhere I have done with this but it worked code so now it's time to verify let's go back to the browser and say hit refresh and done can you see that once you have changed everything you got a page now this is a dynamic page and the got a price list and everything is working you can see there is no error but now you will say hey this is still static right what is dynamic dynamic here now since we are sending all this data from Jiang we can make it dynamic so if I go back to my cold wherever you have rice you can make it dynamic by sending the value from the views dot py but how to do that that we'll see in the next video so I hope you are enjoying yes there's so many things running here so just to go for a quick recap what we have done so basically we are copying a template from the internet where we are saying hey Althea is in the same template so it has some static files but Django need to handle the static files and to do that we have to create a folder we can name it anything you want maybe static or something and this is where you have to paste all the static files and then in the settings dot py this is where to specify from where you will get all the static content how do you refer it and then in which folder you want to put it so you can see we got that in asset start I'm an assets folder here you have all the static files and if you want to use them in your index.html or whichever page you are working with so have to prefix with this static tag and then on top of it you just have to say load static that's it it will work in your project now in the last video we have worked with a design basically we were handling the static files and then we were able to manage it you know so if you want to see the output this is what we have achieved right again this is not a design which we have weighted from scratch we got this template and then we are running this with a lock Django now all the data here which you can see is static which means you have this data in fact when I say static data I'm talking about the boys here you can see the images the the words like we have body here the price everything is static if you want to change something in future you have to edit your HTML files in fact nowadays you want to change the data continuously maybe let's say this this price here will be very dynamic so every our it is changing so can we just change this images after every one all without touching the HTML files maybe this data will be coming from database so that means you want to make this data dynamic and it should be coming from somewhere not from the actual HTML page yes the layout will you fix the colors and then again you can change that but I don't want to touch the layout but at least the words and the images so I want to pass this data from a Python code because pythons are programming language so you can do some processing there and you can fetch this data from anywhere as we have discussed before you can fetch it from database you can fetch this from the live stream from anywhere you want so once you have data in Python you can simply pass it here in the HTML okay but how first of all be to generate data in this view okay in this view start py so just to show you how we can do that we can simply give a comma so remember whenever you call in text or HTML so basically the request goes to the server and says hey we want a home page so this is the function which will get execute and this will render your page now when you say rendering it will give you the page with the data which you want so data I want is I want to change the price there so I will just give a dictionary here and I will say price and in this price I will mention the price as let's say $700 ok so in fact we have done this before so if you see I want to change this this body price from 679 274 ml so we are passing the data now from the views so here we have to change it okay so first of all I have to check well I have mentioned that price you can see the prices here I hope this is for Bali yes it's for Bali and here I will mention the price as $700 the moment I change that if I go back here you can see or we got an error okay kinds of seven to it I don't want to say 700 first of all there is an error here I should be giving a : but not the comma okay so I want apply some dynamics and shop saying 700 I would simply say so we have used this before right this is the ginger format so here I will say price right is that simple you just go there go back and say refresh and you can see we got everything we got a page but this time the price is 700 and we are passing it from the actual Python code but now I just don't want to pass the price I also want to pass all the data in fact the images the name from the Python code now think about this if you want to pass all the information so every destination so you can see if you have six destinations here right we have bali indonesia san francisco and this goes on i want to pass every every destination will have certain data it has a image here it will have a name like we have bali here and then we have a description to it and then we have a price okay so we have four fields we have images name description and price so we have to pass this for detail for each destination so in total we have to pass 24 data 24 fields so we can say first destination image first destination name first destination descriptions and so on second a second destination image so we have to pass 24 values at least now what makes sense is to create a class object so basically whenever you have this in a combination of data instead of having 24 variables we can have one object which will hold four data so we can have four or we can have six objects so we have six destinations so we can have six object and each object will have four values the image name this description and price can we do that and the also yes and that's the beauty of object-oriented programming right we can create objects but where you will do that so basically we will be using our very special cloud or special file here which is models ey this is where you will create models again the models which is available in Django is for very specific purpose to connect to a database and stuff so since we are not talking about ADA base let's stick to basic so here I want to get a plus and then we will create object of that so my class name would be destination so again we have talked about this everything in Python sessions so if you have talked about class and objects and here will create a class now so let's say class and we'll name this class what destination that should make sense okay so we got class destination and here we want to get some variables how many variables for right but we'll also add one more because in future we are going to connect this with database of course in every database table we'll be having a primary key so it makes sense to have an ID there so let's also create a variable ID we'll our type as int let's have a name this will be of type STR that's a destination name we have we can also have image because image is there so image will be STR then we also a description serve as a description is STR and then we need one more thing which is price right so the surprise is let's take two pink we can also have it flow it but then if you look at the prices now it's all eight so let's take two n so we got destination we got five feels there but how will you create the object this is only a model okay as of now this is only a simple model so it's a class which holds five variables so if you want to instantiate them if you want to get the object you need to do that in views dot P why because this is where you are calling this individual HTML so let's create those objects here so so basically we are not passing 24 values or 24 variables which I'm talking about we are passing objects right so what I'm going to do here is I will be creating object for destination so I will say destination once all its initially let's do for one at least let's change that body part so we'll say bondage of the first object and this is object of destination but as you can see it is not able to find at the destination it says undefined variable so basically we have to import it from models so we'll say from dot models import destination so we are importing a destination here okay this looks fun we are not using this object that's why we got a warning but as of now let's stick to it okay I will be passing this destination here so I don't want to pass a price I want to pass a destination so I will say single code I'm passing a destination let's say test one and the value itself is just one that's it so basically what we have is we got an object which have no values to it okay so this object has multiple variables but then none of them has a value but it will be having some default values we don't care that the name would be something but eyes will be something but it's an object so we are passing that object to the index.html so in the index dot HTML how do you access it so first of all we have to reach where the value is so you can see this is very Bali is now if you or someone on top if you I will try to share this file with you so that you can just copy it so instead of having this body here I want to have Mumbai or maybe let's let's remove this body I want the data to be dynamic so what we can do is we have to use that those curly brackets again because we are passing a variable and we just have to say test 1.9 because the name now is not Bali it's something which we pass let's verify if this is walking let's go back to the page let's refresh oh it worked can you see that there's no body anymore okay this is not what we wanted right we want something went wrong you know what went wrong so basically we are not passing the value for the name so how do we do that it's very simple you can simply say test1 dot this time we have to assign a name so this the name is so why to go for body we can go for Mumbai so let's stick to Mumbai so we are changing it to Mumbai now let's go back and say refresh it worked answer that we got Mumbai there okay so that means we can change name can we change description yes we can let's go back here and say desk 1 dot description so in the description we can have the city that never sleeps right okay so we have changed the description let's go back and refresh okay something is not working you know because we are changing it here but not in the index of HTML let's do that so what is that so with the description so this is where the description is so in the curly brackets we can say test1 dot the scripture let's go back and say refresh and you can see the code description as well so we got Mumbai we got the description now we want the price as well so what I will do now is go back to the views so let's let's set some more values we can set the name Dan price let's apply his 700 here ok just I'm going with random values here doesn't make sense we don't want to change the stuff so the values which I'm giving here is random so let's go back to index.html and here let's say apply it should be test1 dot price that's what the value is of price and you can say we go out 700 okay but I also want to change the image right we'll do that after some time okay so let's stick to values first and I'll do that for all different objects here so image is not changing because we have not done that yet but let's change the data for all different places here and let's stick to three places okay let's remove all the extra one let's stick to the first three destination just to make it easy so what I will do is I will go back to my destinations and let's stick to three and let's remove the other part so let's remove four five and six and that's done so you can see we have removed those destination let's verify wines before going ahead let's refresh here and you can see we got three destinations that's great it is working so what we want is we want to make these three changes right so we certain this point the got Mumbai but we have to also change destination for next to plus we also want to make the images dynamic but how will you do that that we'll see in the next video but before watching the next video I want you to complete this so what we can do is write the same code and then create two objects so the way we have done here you can see we got one object you can create two more objects one for the destination two and second for destination three okay change the value and then pass those objects from here accept it in the index or HTML and then try it out and then we have done that in Python right how to work with lists of objects so make it work now in the previous video we tried to make this data dynamic so by passing the data from the Python file we were accepting that data in the HTML and in the HTML we just have to use that ginger tag light and it works but now I want to also make this to the next to destination dynamic and the way you can do that is by going to your editor and here we need to create two more objects so I can simply copy it in fact we also wanted images right so what I'm going to do is I will before copying it let me just also take the image before the price of course I will set test 1 dot and here the image would be we have to specify the name of it okay so but what is the name of the image so if you go to your assets here you can have images and in the images you can see the image name is destination 1 2 3 4 and this goes on so I'll be using this first three images 1 2 3 so I will be saying the name of the image is destination underscore 1 dot jpg now you might be thinking do we have to write everything of the in the Python code so normally what happens is this data actually coming from database maybe this data has been updated by the users or the agent simply as developer you will fetch this data from the database and displayed on the page so this manual work is not something you have to do it but since we are learning now we don't have a choice okay so next a destination I'll just go 1 dot jpg and ok let's copy this code paste and paste but this time instead of having des to bond we say test 2 and here the data will change so I will say from 4 next will be Hyderabad but what should be the tag line in fact I have read it somewhere in Hyderabad biryani comes first I was a first biryani and then next share Bonnie ok and then dissention image will change let's set the price as let's say 650 so if you want to enjoy the entire Hyderabad this is the amount you have to pay and let's say next is Bangalore so we'll say this is this 3 3 3 3 and here also just 3 ok and then what should be a tagline of it I don't know maybe a beautiful city I have not read much about banner so let's say beautiful city also the tech Park or IQ park but let's say this is destination 3 okay three and done I don't know what type of images you will get look at the same images but we are just trying to make it dynamic so now instead of having 700 let's say it's 750 maybe it may take more money to enjoy that okay so we got all this data and then we want to pass this data in the HTML okay so we simply can't we don't want to pass the different objects let's pass it as one object and the way you can do that is by creating the list of destination we can say tests equal to it will be least of these destinations i will suggest one comma does too and that's three okay so we got this three destination and then we got in a list and stuff passing all the students in fact one by one we will pass everything in this one particular list done we are passing three data now you can pass thousands of data your choice let's go back to index.html and here let's make a change but what and let's try so here we are passing three data right so what I have to do is okay so we can do it manually also we can simply set the values but don't you think you got this three data because you are displaying it but what if the amount of destination you can see on this screen is depend upon the database so what if you have ten records that you need to short 10 destinations what if you want to show 20 destinations so in that case you can't simply make it static right because they never even the number of destinations is not fixed what if we can use a loop because in a loop you don't have to worry about the number of destinations oh I depend upon how much data you are passing from database evil is you can show them we are passing 3 data so it should run for 3 times I should show 3 data right but how can you use a loop here we can use it but we will be using loop on this particular one so Google repeat the same stuff so we don't need the next tool so we don't need des 2 and 3 to come up let's move that so we only have one now just to verify let's refresh and you can see we only have one destination and even the data is not shown because we have done some changes so I want to show three I mean I'm not sure how much data you will be saying here is because it is depend upon the number of objects you pass we know it now but what if you don't know it let's go back ok so here I want to run a loop so how do you use a loop here so we say percentage I get the Django ginger format and here we have to use a loop format so how do we use a loop so we can think they say for a test in destination so if you remember the variable this is what you are passing from the abuse tests yes you're passing it here and we need to also end of the for loop so we'll say for loop ends here and the way you can end a for loop is by using a keyword which is and for is it yes okay let's verify let's go back here and refresh okay so let me got three we got three because of loop so if you pass four objects in the abuse dot P Y you will see for the extensions here so now we are making it dynamic yay okay but but but we want to change data right we want to change these names I don't want to have this as Mumbai so let's whatever data is coming so it's a dest dot name because the variable name now is test out the object name so here as as well with said test and here as well we have to say test save go back it worked you can see we got Mumbai Hyderabad Bangalore price is also different you can see the first one is 700 next is 650 and next is 750 and look at the description it's also changing yeah there's one thing we went wrong you can see we got special offer everywhere I can try to solve this later because only one location need to have such an offer or maybe two but we don't want to give offer on every destination we will be in Ostend right we will do that later we'll change it to will make it one of them I special offer okay but before that I want to change the image as well you can see we have still not done with the image so let's make it work now if you go back to your views you can see we are also passing image in a variable which is image so all IMG so what you can do here is this is what we want to make it dynamic right so how do we use it maybe you can use I'm just trying out let's see I will say dest dot IMG or will that work let's verify go back here and say refresh Oh something went wrong the image is not loading up let's verify in the inspect element and if you go back to consoles refresh again ok it says image not found so the image it is to find is desktop IMG itself in selecting the error here okay that means the data is not getting passed properly the problem is this thing this logic here this this type of format works in the HTML but if you see this is itself is a ginger format so you can't simply use ginger inside ginger that that will make it weird right so how do you solve this there are multiple ways of solving this one way which I know let's use that so what you can do is what if you can remove this part then the problem will be solved right but how so what we can do is we can simply go back up on top here after load static and here you can say percentage percentage here so we can say static part which is images because it's very an images right and I will say as base URL now what will happen is anyway you want to use images you can simply his base URL and this base URL becomes available okay so so what I'm saying is if you go down okay when you ways that I don't know let's search for that's dot image okay this is where we have done it right so here we don't want to write this type now we can remove this part and we don't even want to use ginger format because that's what we are doing now so what we can do is in this double quotes we can say variable because this see what is available now so we'll say base URL so you can see we are not writing the desktop image inside the ginger tag it's outside now so this is your ginger variable this is your ginger variable and on top of that on top of your page you are making static images as base URL this works there are multiple ways of doing it whatever you feel better let's refresh it worked so that's how you can do this thing right it's it's awesome actually it's not just Django you can do this in different language available we can do it in Java we have different template engines there so one of them is free marker you can also use velocity that different different things available that as well in PHP different frameworks are available but this this thing is awesome the making page dynamic is something will make you a web developer okay not just image but in general content okay anyway so this is how you make the code dynamic content do we have change something here everything looks good or you can pass this data from database now but how we have not done anything with database at this point so let's do that in the next video but just to go for the quick recap what we have done we are trying to pass the data from the Python code so you can see we are hard coding everything in the Python code and we are passing it in the HTML to print it yes we will make this thing coming from database okay but as of now this is working you can see we can we got all the data here yeah okay so we just have to use a for loop to run multiple div tags and in every time it runs it will it will have a dynamic content right so first time it will be for mumbai mumbai data and next to it will you for highs above and then for bangalore now till this point we were able to get this laced here from Mumbai Hyderabad and Bangalore and then we were making the price and this stuff on the description as dynamic and then we were trying to solve the issue of images as well which we'll be continuing with that but there's one issue which we want to solve in this particular video so before hitting database and fetching date values from database I won't talk about one important thing you can see in the images we got three listings and then every listing has special offer we don't want to do that sort of all the listings we have we don't want to provide a special offer to every listing right or to every place we have so maybe I want to give special offer only to Hyderabad because you can see the price is less so maybe it's a special offer how do we do that how do we specify a particular special of a particular particular element because if you see in the code of what we are doing is we have these three objects and then we are simply adding them and even in the index dot HTML what we have done we are using a loop right so if you can see we are simply using a loop here and then it so it goes from the first destination logician is depend upon how much objects you are passing so here we are passing three and then everywhere we are saying special offer because if you remove that you will not get special offer anyway so if I remove this part if I say save let's go back to our display in the page and refresh you can see we are getting the same stuff but without special offer so should we kept it or not because if you skip that line it will give you special offered on every one and that's where we have to specify the condition in fact the even before specifying the condition we need to do one more thing so let's get back to our views dot py and let's add one more field here and we'll say that field okay not here first of all you have to change the models so let's go to mano start py and this is where you will say offer if you want to specify true and false you can use a bulleted type which is for boolean now here you can have a true or false so let's say for a specific destination if you are saying this is true that means you have a special offer that means if I go back to view start py here for the first destination if I say offer we don't have offer there so we can say false for the second the destination we have let's add s to dot offer here we need to provide the office I will say true we don't want it for death story ok yeah so we say that's three dot offer and here I will say again false so only for the second destination which is Hyderabad I want to specify that there's our offer so if I go back to index index dot HTML even if you do all the changes in your models not be Y views dot py and if you still refresh you can see we are getting offers everywhere and that's where you have to specify the condition but how so when you say condition one thing in a pops up which is offense and that's why we will be using that so how do we use if-else here it's quite simple so just before the line you can say because you want to execute that only when it is true right but what is true so we say if the destination dot offer if this is true then only I want to print this so when you have true and false you don't even have to check with true right because that's it will give you true so it will execute that in fact if you really want to do that manually so you can also say test off like whatever the true then execute that part but when you have this scenario you don't have to mention that simply say offer and then you have to also end at this block and you can do that with the help of a block and we'll say and if and your job is done let's go back I hope this will work let's refresh ok scary so that we got special offer only on Hyderabad so if I go back to my code and if I let's say in the views I also want to give the special offer to Bangalore I would say true for Bangalore as well and let's refresh and this is how you can make stuff dynamic now imagine this thing coming from database so you don't even have to change anything in the code just go to database there will be a field offer so from Crewe just make it false with SQL query all maybe with the help of admin panel and we will be doing those things in the further videos will be working with data base so basic understanding is you can use if else in the views as well okay not views dot P Y but index or HTML and that's what makes anger so powerful we have also used for the right so yes it is powerful now what next now what are things coming up now we have done all the things which we wanted to do we wanted to have data dynamic we wanted to have special offer only only one particular place but now I really want this data could to be coming from data base so let's imagine we have a data base maybe Oracle or poses in fact we have we will be using Postgres here so the post Chris I want to create a table I want to be a data base what we want to do is we want to connect or we want to migrate all this thing Sarris migration it is like creating tables in database with the help of your models and that's where we have this amazing concept which is o our M object relational mapper so we want to map the objects and the table so tables you can call them as relations now orang stands for object relational mapping now if we talk about Django framework we have over them there as well which is object relational mapper but the concept remains same so what is our M now think about this when we talk about the virtual world we have two different stuff here one is data because of course we want to work with data information and on the other hand we have application so what is dynamic and what as a user videos is application to access the data actually we want to use the data but we cannot do that directly right so even if you want to face some data from Facebook you need to use the Facebook application so let's imagine as a user you want to interact with a database and database is sitting somewhere else so if you want to interact you need application in between so that means someone has to build that application will they talk about that but think about database now so when you say database database if you expand it I am talking about the relation at a base here so if we expand your database tape database will be having some tables so imagine if we talk about accounts if you talk about dwellings or shopping mall so you will be having a product table you will be having a couch table and you'll be having customer table so we talked about customer table what it will have customer ID customer name customer address maybe phone number so if we talk about this for details you will be having a table with these four columns on the other hand the moment you say application if that application is built in any of the object-oriented programming may be c-sharp Java Python it will be having a class right that's how you create an object so basically to create the object you need a class now how do you define this class here so of course you will be having a customer class and that customer class will have four fields customer ID customer name customer address and customer phone number so in database the customer table has four columns the class here has four properties now if we try to relate more we can have multiple objects of this class right so customer can have let's say five objects or maybe ten objects your choice depend upon how many customer visit in your in your shop so let's say if you have five customers every customer will have different name address different phone number so those things are stored in different objects so every object will have its own data or maybe we can say every object has a different state that's important right so state is basically the current values so every object will have a different value if you want to store this in database in database as well you'll be having a table we have talked about that customer table so in that customer table one object represents one column right so the first row will be our first object data the second row would be the second object data the third row will be third object data and how do we achieve that how can you push this data from the application to the database and that's where we have this amazing quonset SQL so we have to use SQL query okay when I say you have to use SQL queries I'm talking about a programmer so as a programmer you write the code okay so you write the SQL code now if you don't want to do that if you say hey I don't want to work on SQL this may be some good language but maybe I want to focus more on my application not on the SQL queries here so you can simply say I've got a class here I don't even want to create a table there that table should be created automatically is it possible and the answer is yes so the framework which you are working with may be if you are working on Django if you are working on maybe hibernate in Java it has a power to look at your classes and say okay this is a class I want to create a table for it so look at the class name so class name let's say it's customer the table name would be customer the class has four properties let me create four columns there this class so you depend upon how many objects you create maybe if you create five objects I will have five rows there the moment you create more objects and if you try to save them it will create a new row in database automatically and that's the power of Oh R M now this constant is not specific to any language you can use it with Python we have Django the Django ORM you can just use it with Java we have hibernate there and maybe in some other language we will be having some more frameworks so the important thing is o R M is an awesome concept where you can directly create your tables with the help of the classes which you create and you can add the data with the help of the objects you create so that's Warren inne general now till this point we have talked about how can you pass data to the view but then from where you will get this data and of course that's what you want a database so how will you create a database here so first of all if you want to say database you need a database engine right now that different database engines I believe well what you can call them as DBMS a DBMS to be specific also we have Oracle we have mask you have Postgres we have db2 there's so many TVs available right which one could go forward now first of all when you say Python what makes more sense to work with Python is MySQL Post ways and SQLite because it gives you a better support to it and for this series we are going to use post quiz so what we will do now is we'll install a software which is post with DBMS so you can search for post qs download and this is the official website you can simply click here now based on your OS if you are using Mac Linux or Windows we have a different setup so you can see we have an option here since we are working with Windows will go for Windows here and then you just have to click download the installer the moment you click on this it will download the installer for you and you can simply follow the steps so we will be using that but then when you install post quiz it will give you database posture but we also need a UI using which you can use it right and that's where if you have to install one more software which is PG admin so it's a post quiz tool available so you can simply click on download here just go to google search for PG admin and click on download so this lesson latest one is PG admin for so based on again here OS you can select one so we are using Windows so let us click on Windows and normally I don't go for the test version because it has some works let's go for one more but for this video we can do it so you can download 4.6 let's see that works so I have post quiz downloaded let's install that first so click on this setup so we have to say yes we don't have a choice and let's see how things looks like so you can open your post OS and it steps are very simple actually with some configuration so it will take some time for the progress bar so to complete ok so there was some additional dependency on the Microsoft library so it was and now when you click on next it will ask you for the directory so let's skip it default let's keep everything default and say next next ok so it will ask you for the password for the database and you can see this is important here super user remember your username which is Posterous and the password I will be keeping for this machine is 1 2 3 4 let's do that here as well click on next and this this is the port number if I remember 4 different services we have different port numbers and that too for MySQL we have different port number which is 3 0 6 4 postgis we have 5 4 3 2 just remember this port number for our post quiz nothing specific here let's keep it default click on next click on next and I guess done so now it will do the actual setup because initially it was just handling the prerequisites so we are done with the setup here you can see we got a finish time it took a long time for this setup to run I don't know why maybe on this machine something went wrong so just uncheck that bill just tag and click on finish and your post waste has been installed now if you want to access it you need one more software which is PG admin so let's click on that so let's do a cleanup completely so we can send next we have to accept the equipment we don't our choice will send lags nothing here so let's type it PG admin click on install so it will also take some time to install let's wait so that's time to set up for PG admin also done let's click on finish it will launch PG idn't for you so you can see you got a PG admin page on your browser so that's how you can handle it we don't have a good UI tool basically it opens in a browser and now on the left hand side you can see we have an option of servers now by default you've got a server here I just asking you for the password so the password we have to mention which we have configured before which is 1 2 3 4 in this case click on also I will simply say safe password click on OK and you can see it is starting your server and you can see we have some databases available here so you can see by default it has only one database we can use it or we can create our own database maybe you can do that later and in this you might be having some schemas by default so if I say schema basically tables here you can see we have tables and you can see we don't have any as of now so we want to get some table so that you can store data in the database from the page which we are working with or you might want to fetch data from here in fact you can also write it as Cal query here so I could just go back to SQL and you can create a new database here you can create tables but then we don't we will not be doing that now so we'll be doing that in the next video where we will be writing the code for with post waste and we'll connect with our application and finally we are reaching to that point where we are connecting our application with our database so basically we want to fetch the data from database so that's what we are doing now in the last videos we have talked about post ways and ORM and then we have done this setup with the post waste as well so if I try to open my PG admin that's how you can access your post was using some IDE or some view and you can see we have a server option here so if I expand server you can see we have database and unfortunately or fortunately we only have one base which is paused waste now let's create one more database here and double you can do that by right click on your screen right click on your database and say create database and let me just have the name of the database as the disco post waste will be owner of this and let's click on save nothing to specify much so you can see we got a database which is tedisco and in this if I see the schemas tables there is no table here so you can see record database but we don't have any table now so let's create some and add to those tables should be coming from the application it's what we will do that so if you want to connect your application with this Postgres DBMS you need to do some configuration so let's head back to visual studio and here we need to do some settings so let's go back to the disco project this is where you have so installed py and now let's do setting for database so if you scroll down somewhere you will find databases right and by default it says it will get connected with SQLite 3 hold on we are using Postgres here so we don't want to specify sqlite3 here right so let's make the change so here we'll say backends it should be paws with SQL database name is the disco so we don't need to specify all this stuff we can simply say it a disco that's my database name let me give a comma here now we had to specify something more because if you want to access your pose because we have to specify the credentials as well the username and password so let's do that so in single code I will say who's the user so if you remember we have talked about user as well and that is yard postcode so this is what we have seen while installing pause girls you have to also mention the password here's we'll say password in fact we have specified the password which is one two three four and then we have to also specify on which machine you have your database it is possible that in your network you have another machine in which you have your DBMS or post-course install so you can specify the host and this is where you can specify the address I mean the IP address of that machine time being it's the same machine so I will be using localhost so the other thing you have to specify here to connect with database so this configuration done okay but this is a this one problem post quiz being a difference of Django being a different software how do we connect so basically we need a connector in between and the connector name is if I go to Google and if I search so the connector we are going to use is Sybok - so if you see it's it's basically a database adapter so pause go setup is a doctor which connects with Python so you can see it says it's a connector or the adapter between paz luis and python so this is what we wanted so how do we install this so we have a simple command which is p IP install and then you can specify the name so let's head back to our prompt here and we'll say p IP install this offer name so to say p IP install name of the package and say inter and this will get downloaded it will take some time and it's done it was quite fast so you got the adapter as well now what your next step now basically remember we have talked about o R M so Django has this amazing feature of ORN it was create a database tables for you so example for authentication if you have your own models it will create database there so let's try to migrate back back but before migration we need one thing right we need a model so the table which you want which is destination will be depend upon your model and you will say hey we have a model file here right so if you see we have a model dot py this is where you got your model but no actually this destination is a simple class you want to convert this into a model this will not work so how do we do that so it's very simple actually so if you want to convert a class as a model if you want to give that more power we have to specify modules dot model so basically you are inheriting the features of models there now will this work no still there it will not work because see when you say you are cutting that table table will have a type of columns as well right so if you see the column name is name the type would be very cat that's that's what we do in in SQL right character string or the character in bracket you mentioned the size so here you can't simply say STR and ain't it do not work in that way and first of all you don't even have to mention ID in your model because in database it will automatically ate a primary key for you the ID column so let's remove that so I want to change this instead of having name I want to specify the type of the column there now how do we know that so let's go to google again and search for Django so if you search for Django model fields in their official documentation they will help you with this you can see on the on this side so we can see we have field types the field types is auto filled big out of field and then binary field we have character field that's four four string we can also have email field we can also have image if you want to upload an image so you can see if you have different type here and how do we use each one so if you just scroll down they will also help you with the format so maybe yeah so you can see we have Auto field this is how you this is how you should be using it they also have the examples here so if you want to use character field you have to say character field and you have to specify the attributes as well the max length let's use that so here the name would be characters so we say models dot can't field and in here you have to specify the maximum length so I would say max underscore length and the length would be let's say 200 or maybe 100 will do nobody has a big name more than hundred right will do something for image later but as of now let's stick to description and in description you will say again model start ok but what you'll be using for description description might look big so we'll be using text field here we don't have to specify this size for price it should be int so I will say model start integer let me have integer yeah of course it should be so it is a field and for boolean you can Street right we should be having boolean field then job is done so simple right but then when you say boolean field by default it should be something right by default there should not be any often on the only places so by default the default value here let's say false anything else here you're going to specify what image as well like we had missing for image now so in the image you have to upload the image right it will not be strata database so when you upload an image it will be stored in a folder and you have to specify the path here that's where you have to specify the path right but it's important so what I will do is I will say models dot and you will say image field so for the image you have to use image field and in here you have to specify the location you want to upload to so example if I go back and if I say image field so you can see in the image field we have to pass upload to as the attribute so when you will upload this so I will say upload to and let's say the name I will say fix there's a folder named test named as specs I will upload that everything there so there is one particular problem which everyone does in fact I eat that in my first project in Django and the problem was normally when you specify the phenotype you give a colon field type but here now since you are working with models you have to give equal to because our sending the values here so this is important because if you miss this it will not create any column in your table if you don't specify equal to so that's done that's I think it should work now but how do you verify this now first of all if you want to create a table you have to migrate your models to the general database and for that you have to pass a command so what is that command so let's go back here and say a Python of course you have to use manage dot py the command is the first thing you have to do is you have to you have to make a migration because if you see a folder here in your traveler you have a folder which is migration and it is empty yeah we have one init our team in it py but we don't have the migration file so let's get a migration file so we say make migrations this is the command have to pass say enter and it will create a migration for you and the coordinator ok so you can see there is an error and it says the traveler model destination is not available in the installed apps so if you go back to settings dot py remember we have talked about installed apps or maybe not so you have to mention your application name here whatever you're working with so let's do that quickly so the app name is so traveler dot apps dot travel or conflict this is what you have to mention here so your project should know what apps you're working with see this is important so if you don't do that it will not do the migration let's do the migration again I will so see you this let's do migration again and we got an error again we are missing a comma can you believe that let's go back okay let's say CLS and if I say migration ok there's another error now now this this error makes sense I was expecting this error now anyway you want to work with images in Django and since you want to upload them so you should there should be some library to handle that and that library is pillow so you have to install this as well so let's do that quickly so we'll say apip install I know that so many surface you have to install but everything ripped down on the wines right so let's do that quickly so it's installing pillow now and that should be done first right okay finally we can make migration I hope this time this will work let's say enter and it worked can you see that we got a migration done and in your migrations now so if I expand this time yeah so you can see we got one more file which is zero zero zero one underscore initials dot py and if you open that file this is the migration you are doing so basically you are doing a migration which is create model and these are the fields you have and you can see ID even if you have removed the ID but if by defy it will give you an ID which is Auto increment field and you got name image description and offer this is what we wanted so everything looks cool here till this point but what do you think have you got a table there unfortunately no we have just created a migration file we have not actually migrated something so if you want to see what's SQL is you can simply say Python manage dot py SQL migrate and to mention the package name which is travel oh and then you have to mention the migration file name which is 0 0 1 in this case so if you say python is dot p by SQL migrate the app name and the version number or the the magazine number enter so this is the SQL query it is going to execute create table travel destination the primary key and then the columns you don't have to write SQL query right yay ok now let's do the actual migration so I will say Python managed dot py and simply say migrate simple command migrate say enter and you can see done no errors that something amazing let's go back to our browser in fact PG admin I hope we will be getting tables now let's refresh or maybe I will simply say right click here and say refresh expand this yes we call tables so all this tables has been given by Django we don't even need them for as of now we wanted this travel destination and you caught it okay we got a table but if I want to show the data here so if I say all rows okay this is empty because we have not entered data as of now but you can you see that we got a structure now you got a table from a class that's the magic of ORM right so this makes sense you got this setup and everything is working as of now so we have done the migration but what's more important is we want to add data maybe with the help of some admin panel or maybe maybe with the help of some page in the last video we were able to work with PG admin so we caught our database and tables as well and those tables has been created with the help of Jango right so we have not even written one line of SQL query to create tables but then if you look at the tables it's empty right so if I go back to my PG admin if I look at the table it's empty okay but then we made one mistake in the last session so I have made some changes and that's why you can see price here but what we missed is in the model we have we were working with integer field and we have we forgot to give a round bracket if you have done that that's great so you don't have to worry about this error but when I was checking my database price was missing and then I've done some changes to add it but how will you get it how will you add that price so first of all we have to make one change we have to make it integer field and then another way you can do that is go back to with the SQL query and you can alter the table so we have tried SQL query you have to say alter table and the table name and you have to add one more column which is price in this case that's one way the another way you can do that is by doing the emigration so again you have to make the migration again you have to show so let's try that so we will say python managed dot py and here we'll say make migrations and if i say enter you can see it will do the migration for you so it says we are you are trying to add an on the label field price to the destination without a default value so one way you can set a default value here right that's one way otherwise you can pass the default value while you are creating one so instead of changing the model you can pass it here so let's say i want to add you fall values we know we don't have any rows in the database but still let's let's say i want to add the default value are zero done right we don't have any could also it will not affect much by doing this if you go back to your PG admin to refresh your table oh sorry we are missing we have still not migrated right let's do that so it's a python managed or py migrate enter my kitchen done there is no issue and if i refresh so you can see we got price yeah but in my case you can see it says no migration to apply but in your case it there will be a migration so do check that so that's how we do REME i Gration or what what you say making migration again and you can see we got two files now one is initial migration and second one is destination - price so that's one more migration record so that's how you can do multiple migrations if you want to so let's say if you make some more changes to the project and if you add more files then you might need to add more migrations now tell us find we were able to work with database okay so when I said at that base we only caught a database and a table no data so of course I want to push some data in the database now basically we can do that by two ways one by creating a page where you where a user can push data or we can have admin page so normally admin page is normally access by admins or the super users and then when you say users let's say when you talk about Facebook you can push data so you are a normal user and you are able to push data but here we are working with destination page right so this will be post by the agents or the admins so let's do that so let's create a admin page okay the moment you say we need to create admin page it will be a complex task loyd we have to design a page and then we had to do some authentication stuff as well since we are working with super users it will be critical right let's see how that works so let's get back to our page and here so if you want to access the website this is how you are doing it right and if you want to access the admin page you simply have to say localhost colon 8080 slash Atman and the moment you say enter maybe it will not work so because we the server is not running let's get back here and let's run our server first so you can see the color page where it is asking for the login now we have not designed in this page now this is given by Django so that's great so maybe Django only gives you the design not the actual working let's try first of all it asking you for the user and password and now we don't have our username pass with us now since I am working on this laptop in the same Django framework with the same browser that's why it is able to pick the name but for you it will not pick that so it will be blank for you so we need to create a super user how do we do that so for that we need to go back to your visual studio code obvious code and here let's create a super user but how so to create a super user we can simply say Python manage dot py and this is where you have to pass a command now I don't know the command so I will simply say help the moment you say help it will give you a lot of options you can see we have used one server we have used collect static and then migration migrate here we need to use create super user service a Python - dot py and here we'll say create super user the moment you say enter it will ask you for the name of the super user now since I'm not doing this for the first time and that's why I'm getting this username option but if you're doing this for the first time it will give you use an option and it will say do you want to go for default name whatever it need default name you select so how will I will go for Naveen only this time I should go for something else I would say Kiran and the email address I will be using is connect at the rate that is calm I will Center it will ask you for the password I will say one two three four enter now this is not a password anyone should keep as a super user but since we are just trying out let's try now it says the password which you are using is not good it's not strong it's too short it's too common it's entire day numeric we don't care I was say why and done you got your super user okay but what's a username it's killin and the password is one two three four let's go back here I will say Quran and one two three four click and login done okay so that we got a admin user here and we'll say ok save when I click on users now since as I mentioned I'm using this for the second time so we already have a user Naveen here so you will get only one user if you are doing it only once since I have done this for the second time so if we go together as well and you can click on Kiran and you can simply specify the values here the first name last name and then you can specify if the user is active you can set the permissions here you can see we had a lot of options available and that's done let's go back to home so we got users we can add more users we can change the permissions all this stuff by we have options here in fact you can also create groups but we don't want to add users we don't want to add globe as of this at this point we want to add more destinations we want to work with it up base destination part how would I do that so I want to create a way to add destinations in the database that means we have to get a page but do we have to so if you go back to your visual studio you can see apart from all these files in your app we have one more file which is ey here we just need to resistor the model and automatically it will give you the page you don't trust me right let's see so first of all we need to get the model here so we'll say from dot models and we have to import destination and then once you got the import you just have to a stir it today stir we have to say admin in fact the function name is restrain itself but it belongs to admin dot site dot register and in bracket in that function that I could have to pass the model name which is destination in this case and I guess job is done so just by doing that if I go back to my browser and if I say refresh you can see that we got a destinations as the tab here if I click on destinations you can see we don't have any destination now let's add but before adding because when you click on add it will ask you for name the images folder description and price we can do that and it you can also specifies it to offer or no we can do that so when you say images now this images are coming from the users it doesn't matter as it admin or normal users we have users who are passing the images and the earlier case we have worked with this static resources and for that we were having a different folder as assets but this time we have to go for a different folder because this will be users data I want to do that so we'll see that in the next video how to work with media and how to push the media pointing from here in the media folder and how to access that now the last video we have talked about Bandon and how can you access that in Django so we need to create a super user it was quite easy to work with right in fact we also got a page where you can add the destinations but then the problem was with the images right so when you upload an image it should go in a particular folder not in the static content so how do we do that now there is one change if you're following this place from start the vs code which we were using was in doubt theme and now it's in white theme or light theme but why okay so because we are switching between the vs code and the browser and then I realize when you say browser we have a white background and here we have a dark background so it might affect the video quality plus the way you watch it because if you're it because in the brightness for the browser you have to increase it for the dark theme so let's take the white theme at least for next few videos okay so what we have done is we have added the destination it is working right we need to work with that media file or the media files or the images of the gears whatever you add so how do we achieve that so for that we have to move to settings dot py and here we have to add the path for the media so what path so you have to use media underscore route so this is where you have to specify the location of the media files and we'll we'll use a base path for that also so we'll say OS dot part dot join so whatever the base path is first of all let's pick that so we'll say base underscore directory comma and now we have to specify the path or the name of the folder you can have any name doesn't matter by django naming convention says you know let's stick to video phone itself so let's stick to media folder we have to also specify the URL which you are going to use in your views or the the templates so for that I will say media underscore URL equal to so we have to specify the path which is media in this case and done and that's have to mention here way to also change the URL of the folder so we have to go to us dot py and you can see we have a particular URL pattern here so basically to add URLs there are two ways of doing it one you can actually take this URL and you embedded so let's do that so we can say pattern equal to URL pattern plus and you can specify the part so basically you have to also specify the media URL here okay so we can say you all patterns plus and you can add the path otherwise you can simply say plus here and you can add the part you have to choice let's go with the old way so let's add the part so in the path we want to add a static file so we'll say static so have to pass two parameters one for the URL and one for the route so say both are coming from settings so the settings dot media underscore URL comma and then you have to specify the documents route so it's a document underscore route and here you have to specify settings dot media underscore Road that's it just two things you have to mention but you can see we are getting others letters is for static and settings it is not able to find static and settings so we have to import it so how do we do that let's go back here and say from Django dot conf import so from comp you will get settings look it done and when you will get static so for that you have to save from Django gone thought you are the URLs now if you are thinking you have to buy hard this not actually you can just simply Google it since I was working on this I remember from studying you have to import studying and that's it so you have to import this to thing settings and static your job is done I hope this will work now once you have I did your media file let's verify if this works no let's try let's go back to a page and here we'll add our destinations now so we'll click on destinations and let's add let's grate some your destination okay but for that we need some images right because I'll be adding four cities here and for that you need four images so let me just quickly go to Google and download four images for four cities okay so you can see I have downloaded some images from the Google randomly and we got four cities in fact I have searched for this it a name and we got it now so let's add this images and name as well so let's go back to name so the first city I will add is Mumbai so let's choose US image for Mumbai so let's select that and let's add descriptions I will say the city that never sleeps and then the price so let's go for random let's go for 700 I guess that what we have used before now click on save it will add the city for you let's add some mode click here I'll say this time this will be let's say how to bad choose Hyderabad and let's say this is biryani city and the price would be let's say 650 and let's keep Hyderabad in offer because we want to provide the offer to it so let's click on save let's add some more so this time let's go for Pune and we say the queen of dickin this time for Pune will say again 600 but then input it will also be in offer safe and one more last one which is Bangalore to the file and the description would be the Garden City okay and then price let's say 750 and it's not in offer let's click on save so basically we got four destinations and our job is done so we were able to create multiple destinations and you can actually see them in when you click on each of hiv-1 and you can see them but one more way you can verify all this data just go to PG admin and now if you refresh if you say I want to fetch all the data look at the database so you got the IDs you got the names of four cities you got the location where you have all these images and then you got description as well I hope yes and you got the offer so we have offered on Hyderabad and Pune and record the price as well everything looks good but I want to show them on the screen now because if you see the page we are getting on the static content so whatever we are passing initially from the page we don't have Pune and then things has been changed in database it's not reflected here you know why it's because we have not done any changes in the code to fetch from database now to achieve that we have to go to views dot py and you can see we are sending static content now first of all we don't need all this content Dilek okay so basically you are passing tests and but we don't have that here let's create do what you think will be difficult let's try so I will say that's equal to so we want to basically access destination here so destination dot the way you can fetch the data is by saying objects dot all and that's it so this command will go to it will face the data for you and it was stored in tests okay we are getting error here is it because of the spelling mistake oh it says class destinations has no objects member okay this is not the problem with the Python this is maybe we just showed you is not able to fix that let's see if that works so let's get back to our page refresh the page can you see that we got the data we got Mumbai with the tag line because Hyderabad with the tag lines density and then quit queen of taken and the data as well the price has changed and we got four cities we call special offered on Hyderabad and Pune what is missing is image Oh something is going wrong with image but we have a put it uploaded the image as well how do we verify that if you go to visual studio you can see will be getting one more folder here which is media and if you expand that in pics we have all these images so images are there so what is going wrong one way to verify that is by going to inspect element or inspect an equal to console you can see it is not able to find the image okay let's see what what is going wrong and to see that we have to go to index.html and here if you can see we are fetching the image from the base URL it's not there now so how do you fetch so you have to say dest dot image dot URL because we have to go for the global you are there I hope this time this will work okay you can see there is no error and you can see we got images as well it's that simple right and it's it's so dynamic now if you add more images in fact it means do that quickly let me also take Surat so I did one more image from the internet and let's use that to add one more data and let's let's see that reflects on this page so we got our admin page here let's add one more destination and this time it will be Surat file so dot and the tagline would be something I don't know need to search that and this lets it applies is again 650 it's not in the offer let's click on save and the moment you do that we have not changed anything in the code but if you refresh your page you got one more City which is Surat and you can see that it's that simple this is how you work with you French 22 from database and the part of Django now till this point we were able to fetch detail from database and then you are able to display those destinations on the page but then we are missing one big thing and that is the login and registration of course right when you build an application that application will be having a lot of users now some of the users will be admin and then we have worked with the admin user details as well right so we have created the admin now admin can add data to the date to the website from the backend of course but what if you want to work with normal users yes you can create accounts for them as well right so let's say for your application you have 10 users so what you will do you will manually create accounts for them now that is possible and then you can give a login form to them they can simply login to your application ok now that is one way the another way is you can have a resident form for users so that they can raise to themselves now that makes much more sense right to have a login and registration form for your application but if you know that you will be having limited predefined users admin will add all the users but here let's create two forms one for login one for the installation but initially we'll start with registration there are certain things you have to change now first of all since we have restarted the machine so have to make sure that we are working in the environment so if you go back here first of all I have to say work on test and then we need to run this our work because if you go back to the browser if I say enter you can see server is not running so I have to run the server first I will say Python so if you have to say Python - not be wider and server and then this will run this server ok so you can see we other in the server now let's go back here and we caught our page ok this is what you wanted right so what we need here is we want to say login and registration now for that where you will put it so of course right in your form this there it should be a way where you can keep your login and register some button so now instead of changing the existing design since we don't have a predefined form for the installation so we'll change it itself so let's have hope about us we don't want services and news will remove that and we'll change that with login and registration if we invite you can also remove contact but then if you want to have those features of course we'll be having two forms as well now as we have discussed in the previous sessions that whenever you want to create something different example we have to work with a calculator then now we are working with a cloud application now if you want to have the user registrations you know login logout registration you can create a separate module for it you have a choice you can still continue with the same app that makes much more sense while you're learning but what also makes sense is to to learn something new right why do we get modules now you can have two different modules here right we have a station model we can have a traveler module so that we can reuse the modules so let's say if you want to use this module for some other application we should be able to do that right so let's create a separate module here and that will be so let me just click here and let's create a module for accounts so how do we do it it's very easy we have done that before so we can simply say python managed dot py and then we have to say start app and then we have to mention the name which is in this case I will say Commons you can go find it it doesn't matter actually so we go for account and we got an other Oh okay so we have to make sure that we are walking in the environment so I miss that let me just do that quickly now since we have using a new command prompt so we have to say work on test and now let's again hit that same thing and now you can see we got the app named as account so if you go back here there should be account so you can see that we have accounts here we don't want to work with media anymore let's use the disco templates is required ok so you can see we got accounts here and if I expand accounts it's a new app now and that's why you can see if we don't have you I just got py so we also need that so first of all let's create it so I will go back to the accounts and we need our urls dot py because we will be working with all these three links login registration and logout so let's do that here now i don't want to type it from scratch we will be copying it from travela so let's go back to Travellers URL let's copy this and go back to our URL and paste this is the new us dot pyb I'm creating so what will change the first thing is we have to say pattern yes path let me just get that on new line anyway the moment eyes safe it will go back to its previous position but let's change it to now so the URL which we need here it should not be blank because that's for the main application which is for travel Oh so what will be the URL here now first one we need three right so let's start with the illustration and then we can add login and logout later so it's a register and in the index we have to say register of course you can go with any name but let's go for illustration and register so you can see we got our URL mapping for Easter say if someone is calling register will be calling this but you can see we caught an error now it's obvious right we are working from a long time now we know what will be going wrong here the envious dot py now the view is dot py of the new app which we have done so if you go back to views dot py you can see we don't have anything here so basically if you have to get a function which will be having a name as register ok so we will be doing that but do you think it will work if even if I do that actually not the moment you create a new app if you remember every time you get a new app and if you have your own users dot py you have to map it with the original urs dot py and we have not done that so let's do that quickly let's go back to the URL of the disco this is the main URL mapping we have and we have to add one more here so we'll give a comma that's always there so we'll say path and this time we have admin now it's time for accounts now here we have to include the URLs of accounts right so you have to say include and in blanket we have to say it counts dot you are as the same thing you have done for travel remember but traveler is the main module which is working with this slash or the home you waddle but if you want to access accounts will be using accounts slash ok so whatever you are like login logout will be account slash login account slash logout ok so that a makes sense we have done with this part as well just to finish things quickly ok but now it's important to work with this abuse dot py but now what so basically what we have done is we have created this new app which is account and then we have mapped the URL so whenever you was comes it will come to the views dot py so he gets a depth of register and we have to accept or the quest okay and then we can't keep on Laing so we'll simply say pass basically if you have credit a function but it's not doing anything now but then if you want to make it work of course you need to call a URL right and that will be coming from the index dot HTML this is where I want that button of registration so basically we need three buttons login logout and registration as of now let's only talk about registration because that's what important so I will go back here and let me remove all this about and the services and news dot py so let's have index.html and context there and in between I want to have the in situation or maybe you can do it afterwards and we'll see copy this and we'll paste now this is where instead of having contact dot HTML we will be saying register but if you remember register belongs to accounts now so we can't simply say register here so we have to say count slash waster so let's change this contact to register and our job is done let's verify it is working so let's go back to the home page and say refresh and you can see we got home contact and register the moment you click on this it will call the function which is a store which is doing nothing can you see that we caught an error it says what it says a view accounts dot register didn't return or HTTP response but that's important right we can't simply say pass that should not that will not work so we have to do some programming there so let's do it so basically you have to go to views dot py and here you have to call the page which is registration so I will say what do we call that so it's a return and we have to render a page by passing the request object first and the page name is register so we'll say register dot HTML but now you will say we don't have this page and you're right we don't have this page so we to create early storage tml so we will do that in template here and let's create click I will say register dot HTML now we can have a way simple page here nothing complex maybe in our template actually we don't have a resolution or the HTML so that we can get a good view let's create a simple relation form again you can make it I mean you can have an amazing UI after that that's your choice but let me make it simple so I will say I want a basic HTML sample first of all and in the body I want to create a forum so first of all let me say the title as a distillation in the body we have to get a form and form action now what it will call I would say it will call resistor and since we are submitting data now we have to say method equal to post so we got a form and then we have to find some fees now first of all we don't know how many fields we require here maybe we need two fields three fields five fields now first of all when you say you want to register a dieter now this registration will go to this server right and I'm on the server side we have database Oh first of all we don't have a database here so we need to create a database first so that this data will go there now what if I say you don't have to kata debase if you remember when we said migration remember when we talked about migration it has created a lot of tables in your database one of the table is for users ID it's so simple let's see if that works let's go to PG at me just to verify if we have database available or table available so when I open my PG admin if I go back to the database which that is it post ghost 11 yes in that we have the history database and you can see we have a table here with which is auth user right and if I save you all data in fact we have used it when we were working with super user and you can see we already have two users here we got Kieran and Naveen but both this users actually super user you can see we are saying true and true so basically they can login through the admin panel as well but now we want to create a normal user not super users so we have this table already and that in this table you can see if if I show you columns we have ID we don't have to worry about ID that is auto-generated we have to worry about password last talk and also something which it will take that off so we need password we need username right we also need a first name last name in fact those are optional but let's let's use that we have email will ask that from the user they join you it will pick up the system date so the fields are password username first name last name and email so basically we need five fields let's do that let's go back to our form and let me quickly use it but since we are getting a form you have to remember one more thing we have to use the ID of token right we have talked about it before so let's take so once we go it says out of token now we have to create those fields let's do that quickly so we got input type text and then we want to have a name for it let's start with the first name I would say first and this code name that's what the name in the database is so you are so first underscore name and then I will have a placeholder and if placeholder will be first name this is something which will be shown in the text field of course you can also have a label here but just to keep it simple I'm going for first name there and job is done let's have a br tag I'm just trying to keep it as simple as possible copy now how many fields we need here so basically we need five right so let's do that we got five in fact we need one more when you say password remember when you penny when you go to any website for the iteration we have to password field one is passport and second is confirm password we'll do that here as well so we'll say six fields so the second one is the last name here as well as the last the next field will have username and here we'll have username and the next field is email id in fact what we'll do for email let's keep email right so type will be of type email for next one we'll say password or maybe I will say password one because we have two passwords here right so this will be again password password - and this is confirmed password okay and then the type would be password done we got our form here right but how will you verify this let's try so I will save this code in fact we have done all the coding required to get this form at least let's go back to our browser and say refresh and you can see we got our form and we also got placeholder we got a first name last name user name email password and we got a confirm password the button is missing can you believe that okay so we need to also get a button there what's the input type is equal to submit record of something with as well let's go back here the efficient record button as well now let's check if this is working from the home page but from there we want to call this page say enter and you can see because register click on register we caught the form but then this code will not work even if you submit the details here that it will not save the data in database because we have not done the actual coding as of now so in this particular video we have created a special app which is for account and it will be doing login registration and logout and time then we have paid at the page for registration so that user can register itself but this column not work because the coding is so demeaning in the last video we have started working with the history inform and then the moment you click on submit the request will go somewhere oh we're right so if you go back to a tional HTML we are saying when you click on submit request goes to register but what is raised to here so if you go to URLs you can see whenever someone calls for register it will call the method or the function which is a straight cell from the views but we are using the same function for both requests for fetching the page which is a tional HTML and for sending data as well and now that's where the gate and post make sense so basically when you are calling this registered or HTML you are sending a get request when you are submitting data you are sending a post request so even if you are URL is same what is changing is the type of request so here based on what rick type of request you send you will call that particular page right or the feature now in this case we want to work with simon this should be executed when you send a get request what if it is a post request in that case you will say if so how will you check if the request is get on post you can say if request dot method if that is equal to post now how will you check that so we say if that is equal to post then you will do something otherwise you will say else you execute this part right is that simple we are missing a colon there so if it is post then what you will do so if it is suppose it's very simple you can simply fetch all the values which is coming from the user ok but how do you fetch all those data so it's very simple you will create some variables we will say first named as the first variable and you will say request dot now there are multiple ways of fetching data one is if you just get you will say request or get if this post which is the quiz dot post in fact we have seen this when we were adding two numbers and that's why that example was important so you will say request dot post and in this you will specify from where you're getting data so you're getting the data from first name and this first name is same as the name of field in the HTML file right so we also need last thing so we can simply copy this again we need six I guess over here 6 2 3 4 5 6 ok and here we say last last name this this has to be username and this will be possible but password 1 because we need two passwords password 1 and password too so we say password 2 and this will be email ok we have to change some stuff here as well so this is last this is user this is password 1 password to email so that's it we going to data from the user but how would you save this in database now if you say you got the value now you want to hit this data with to the database we need to write SQL query right that's what we do in normal projects we have to use SQL to interact database but that's not the case because we are using o RM once you've got your data you can simply push that Delta in database provided you have a model with you so if you remember if you have a model object you can set this data there and you can save this data in database directly but do we have a model object for the user so you don't have to worry about the user model object it is there in the Django framework we just have to use it and the way you can use that so first of all you have to import it so you will say from Django dhadkan trip toward auth dot models and you have to import two things the first one you will import is user and then we'll also be using for login which is auth so what will be used for the login part so let's take it as at this point itself once we got all the data let's save this data now first of all we need to create a user object so he will say user is equal to now since we already imported user so we can say user dot objects that's how you handle the database so he will say user dot objects dot now we have to create a new user so we will say create underscore user and in blanket you have to pass all the parameters the first one you will say username you have to pass user name password ok now we have to pass only one password not two so let's pass password 1 and we have to pass the email ID and we'll set the email ID as email so this data all these fields are available in the model object of Django for the user so we say first name and we'll say first name so this this user is of the model and then this user name is what you are passing same goes for the all the fields here and last name would be lasting and the most job is done once you got the object oh okay we have not saved it yet we have got the object with all the data now once you've got the object it's very simple you just have to save the data and the way you can do that is by saying user dot save now I know you don't trust me okay but let's see if this if this works in fact I want to do one more thing once it is saved I just want to bring something on this on the console so that we'll know something has happened I will say print user created that's what I want to say and then we also want to call a page maybe I want to call the home page again once the issue in turn I want to call the home page service return so we have to rewrite to the home page will say redirect slash that's how you go back to the home page okay but as you can see did I really like this not available let's go back to render I mean the first line and we also import we die and our job is done so we are it out into home page I'm not sure this work let's verify let's go back to our home page and we'll say register I want to register the user and this time I want to register Manoj Tiwary the user name is Manoj email id is man at regional calm and the password is let's say one two three four let's set the password is one two three four click on submit we got the home page yeah so you can see if I go back to my console it says user created but the actual verification will be done in the database so let's go back to our PG admin and we'll say right leg view all data can you see that we got a new user and this user is not a super user and that's why it says false we got user name first name last name and then email ID what else we have is it a staff no is active yes and last login is not done that's that's fine because we have not done the login yet they join the current time everything is set and your password is stored in the secure format done right we are able to register the user but we are still missing some things here so what exactly we are missing we are missing three things the first thing is we have not verified if the password one is match with password - that's the first verification we have missed the second verification is what if the current username is already used example when you create a account on Gmail or anywhere where the username should be unique we are not checking that third we are not even checking if the email is already exist or not in database because if it is exists you can't use the same email ID so that's what we want to verify before in fact this is not a good practice we just verify first but since we were excited we have done decode it's working but we have to first check that so how would you check so even before doing this we have to apply if condition so you have to say if the password one is equal to equal to password two then only you should proceed even all these things should be done only when it is true else what you will do is you will print else you will print user nod or maybe password not matching okay this is what we did so if you go back to the a station form let's say research the issue again and this time let me just and this stuff let me enters any random data here and you lined up user name random email ID oh it should be verified and then the password is one two three four four the first I mean password is one two three four the password is one to click on submit and you can see we got the homepage again but let's go back to the console and he console says password not matching and this time we got we have not got the new user so it says you can see no way it says user created so we have not paid to the new user but that was the first checking the second checking you have to do is if the user is already exists in a database even if it is same password is same we have to first check for the user so let's do that here so if user dot objects how would you check so it's a user that objects dot filter in this free type so we say username not user name don't exist now if this will give you true it simply means the user name is already taken so you can't use that so we'll simply print here user name taken right and this part the actual thing should be done only in the else part so now again we have to use tab okay so basically we are taking two things so ID username taken in fact wait to do one more checking here which is for I will say a live and this checking is for the email ID so it's a user dot service check for email the same thing have done for the user if this exists we'll print email taken and then the entire stuff will be available in the else part simple right nothing complex and now let's let's try this once again let's go back to my browser and if I said Easter okay let's go for a random value again so we say Manoj random value and then I will be using are usually which is Naveen which is already taken and password and password will be anything not pop email you should be anything not password let's click on submit and it should ok so we gone tration again but let's when you find the console you can see it says username taken you can also try it for the password so make sure that you have a password and retail again it will print in write password ok so that's how you handle the variations here we have checked for username we have checked for the email and if everything is matching then it will save as a new user ok so what we are missing now of course we have not done login and logout as of now but maybe we are what we have to also work with the messages part because the messages is coming in the console right we don't want to do that we if something goes wrong I want to print the message that itself in the raishin form in the last video we were able to do registration so basically if he was sending data to this server and then it was responsible to create a new user and that was getting stored in the database everything was working we have also done some validation where we are checking if the password - password which you're sending is same we also checking if the users already available there in fact the username is exist and same goes for email as well but then if something goes wrong well we are printing the error message we are printing that in a console right so let's as a user if you are doing that stuff and if you are using a username which is already used where do you think we should be printing that user or the message it should be the same form right in the HTML form not on the console because you as a user don't have the access to it so I want to bring this message which is user name take an email taken on the page how do you do that so first of all I don't want to print this message like this I don't want to say print I want to send this data to the page the way you can do that is by using the existing feature of Jango which is messages so we can say messages dot info we can send the info in fact our different levels here we can send info we can send errors so at this point let's say in info in info you have to also pass the request object and you have to pass the message which you want to print so here the message is username taken that's it but it should give you an error yes so you can see we got an error here it says messages is not available there the problem is since messages is not there in the import we have to input it as well but from where you will get it so you have you will get it from so we will say from Jango dot country and you have to impose messages that's it so now you have imported your messages it will send the data on the client side all on the page the same thing can be done for the email taken let's do that so we'll copy and paste it here okay and then here we'll say email taken now we are sending this messages to the page but then nowhere in the page if you go back to your it register dot HTML we are not printing the message right you should be also printing the message what do you think how it will work now first of all it's very simple actually let's say you want to print that message after the forum or maybe I want to do that in a do tag so here I want to print that error and that dough in a boy maybe boy will boil will not doesn't look good so we'll go for x3 so I want to print that message in this three tag here how will you print a message now first of all you are sending messages on this page so basically you have to use that ginger tag so we can simply say this curly brackets and you have to say messages but will that work let's try let's go back to our page so let's go back to our page and say enter let's I hope this always running saw is running if I click on register oh you can see we are already seeing a message here it says messages store fallback storage okay something vid is coming up so let's print some data here so we can see in event ID and then the email username I am going to use here is Naveen and the password is something and something if I click on submit okay it is registered that that's weird okay something is not running the way it should work so let's use same username here so let's go for kiddin I hope get on is already there in database it should give me an error now okay we are not getting any error what went wrong let's verify if the user is getting registered because I guess I mean it made some mistake oh we have made a mistake here so if if this thing goes wrong we need to call me to redirect it to the home page right I guess we have we we are missing that part so we have to return to home page only when we got the registration done here we need to return it to the register page again so this was the mistake so you have to make sure that after failing maybe I have done some changes before the video was a copy and paste here as well okay so let's go back now this time I hope this will work we were expecting error and should print on this page so if I use the same username and some password let's say this one click on submit so you can see it says password not matching the given username password okay I have given the wrong password so even when I give the wrong password I should be calling the same page okay so the other changes we have we require here so every time you make a mistake you have to call this same page right raised up page I hope this time it should work the way we expect okay so I would say Naveen Naveen as my username again and some weird email id pass oh he's 1 2 3 4 pass 1 is 1 2 3 4 click on submit and this time you can see we got the same page but then we are not getting the proper message there so what is going wrong so the problem here is so yes in the other video also we have to make this changes I have to make sure I hope you are watching this video after that so here you can see we have to print the message so this is not the way you have to print the message so basically messages has lot of messages there so we have to take one one message and for that we'll be using a loop so for loop what I will do is I will say cut it back it's percentage and then here let's run a loop so we say for message in messages because we are lot of messages and we'll pick one by one message and we'll print that if we if you are sending module messages and here let's end default oh that's it so basically we are printing all the messages which are coming up and now let's run this code I hope this time this will work okay it says username taken case that so now when you've asked a fish it says username taken but why three times okay let's try again and click on submit and you can see required the output as user taken I don't know why it was coming three times so every time you make a mistake it will print the message there itself and that's how you can send messages from the views to the actual page and that's how you can display now you can create a good UI and you can display the message the way you want maybe you can have a pop-up or you want to print the user taken just next to the username that's your choice so you can do the same thing for you Emily you can try that and the same thing can be done for password okay so in fact I am not sure if we are doing for the past what we should be doing that so here as well will be saying messages dot info and then we have to pass the request object comma and then you have to pass the message which is possible not matching so that's how you can send messages from the views to the page so I hope you got the idea how thing works here now we have docked with registration and that we were also able to send the messages from the views to the page but now okay so data is getting stored in the database but now how would you log into the system but before login again we'll run the code just to get a new account and this time we'll go forward let's say Praveen ready username is praveen email is praveen attitude is calm and the password let's say zero zero zero zero four zeros and then same goes here click on submit the moment it's done you can see database in the database it should be there let's verify if I say right click view all data and we got a user which is you can see we got priming here so this time we'll create a login form so that we can login from this particular account but how would you do that let's get go back to the IDE and here we'll work with views now okay but we don't even have a page where a user will enter username and password so let's do that so we'll go back to our templates so this is where I want to create login dot HTML okay so if the moment you do that you have to also be the form here and let's create a simple form but then I'm not sure if I have done with the mapping here so in the u.s. we have not done the mapping for login so let's do that so we say path and the path would be for login it is views door login we don't have that function as of now let's create that and then we also need a name - it will say login or we have done with the URL and the views we need login dot I mean method for login right so we'll say def and this is for login which takes a request object ok and then so when ok we'll say pass till that point ok so if you go back to login HTML here we need two things like you will ask for user and password so let's do that and that too in the form so we'll say form first and form action and when I say action again I will go for login the same thing we have done for the a situation right we have get and post here as well use get and post so this form submission should be of type post and we have to also handle the token let's do that ok now let's create those two fields input type text now this will be your username so I will say username and then we also had a placeholder the name we need a br tag the same thing can be reused only changes is the password and the username I mean the name should be also password and the placeholder will be also password that's done and then we also have my 10 here right so how can you miss a button sir mine that's it we go on a forum and the moment you click on submit it will call login but in this views you're not doing anything for login right so let's do that in fact what if the login is not right of course you have to pin the messages as well right we'll do that for that in fact we can copy the messages part from this registration page why to come back again we can simply print a message right okay let's say save it should be done okay now go back to views and let's complete the login part now first of all this same function will be called for both the request the get request for login and the post request for login so for forget we know what to do I agreed to call login dot JSP and the way you can do that is in fact we'll check here if the request dot method is equal to equal to post in this case you will fetch the data and you will check but what if that's not the case you will go for else part and you will call in fact you will render it right so we'll copy this code so you will call the login to HTML file that only in if it is not post right so here we'll say login dot HTML now what if it is a post request in that case you will fetch the data first let's do that quickly in fact I will copy this time y2 type every time so I want these two things here paste the only change here is I don't want the password one I just want password now it's done I got two details now how are you verify now what do you think again we have to fight SQL query no because we don't do that here we'll use the existing objects of a safe use or equal to but which object now remember we have also imported one more thing which is auth so using this auto can verify so you can say auth dot so it has a function which is authenticate which takes two parameters of course write username password so we'll say username equal to username and password is equal to password so basically it is just expecting these two things from you so the same username and password exists it will give you this user object that means if you got the object it's not none that's why I have to check so you will check if user is none if that is the case that's how you verify if the you if this is the wrong username password it will it will give you users none and that's what you're checking if it is not none then you will say auth dot so you have to give the login access to the user and you will simply say login and you will pass request for which user for the current user that's done and then you okay what you will do now so once your login is complete which form you will call will you call the iteration of course not when you call login now I want to call the homepage so you will read Ike so you will say return read Ike in this case you will call the homepage by saying slash it should be done okay else in the else part because I also want the as part of it right what if the what if the user is not available in this case you will print a message that's what you're doing right so you'll say messages dot info enjoy you can also use messages dot error that also works but in this case I will use info I will say request comma and here I would say invalid precios that's the error message you get on this screen right but I also want to call the same page again because if the your username is wrong of course you want to call the same page so you will say return redirect and this is where you will pass the name debate which is login right I hope the flow is clear now so after log and it will call the home page if the login is not right it will call the login page again but to make it also work I also want to complete with a situation because the in relation of what we have done is in this if the user is properly getting saved I don't want to call the same page that I want to call the login page of this this is done so we'll set it turn let's go back to registered in the views and here we'll say redirect I want to call the login page this should work now let's go back here I will say register oh but what if we already have a registration here okay there is something we are missing we also hit a log in there right how will you get log in here so let's go back to index dot HTML and we also need a login so it's a copy and paste because we have already registered this time I want to go for login and this will be log say go back refresh and now you can see we've also got login then I click on login if you got login from that's great I will say Praveen and 0 0 0 so that's the password click on made cases that it works let's do login again with a different user this time I might be wrong username password which doesn't exist any database click on submit but you can see we got invalid credentials so it is working right but then still of how do we know it's actually working even if you've got the home page in this case you've got the home page and the user is logged in how will you show that the user is on a logged in because if I if you are logged then that means you should not be showing this register and login again you should be saying hello chlorine or hello Naveen and then you should also get the option of logout we don't have low but as of now so that's something we need to do in this project okay we'll do it we let me just also verify that you stopped once with a new account I will say both rich and so donkey username is BS okay and then password is one two three four one two three four click on submit okay so you can see after a situation we got a login page this is what you wanted in fact you can also do this the moment someone registers you can also do auto log-in that's your choice but we want to do this two-step so I will say is Solan key and then here I will say 1 2 3 4 click on submit it works right but then there is one only one change you want to change this register to log I mean register and login to the user if he is logged in now we are remaining with one important step which is logout of course right when you say login and waster and after the user has done with his work of course you will want him to love her from the system but how would you do that now of course you need a button then as well so somewhere here you need an awkward button but then having a login and logout a the same time doesn't make any sense so I think it should be login or it should be logout in fact you should also remove the registration from there so how do you do that so let's do that switching first so I will go back to my code and here in the index dot HTML this is where I want to do switching so I want to print this too I want to show registration and login when our users not logged in and the moment you log in it will remove this too and it will give the option of logout so basically we have to check for the conditions so let's do a condition here so the way you can check what the condition is very simple you have to use a ginger format again right and here we have to apply a condition say we'll say if the way you can check that is by using user dot and so we have to be a special function here which is is underscore authenticated so this is the angel function of enable you don't have to do the coding for this now if the user is authenticated which if it returns true in this case that means you are logged in at this point I want to show logout so we can just copy this code and paste it here ok so this should be log out okay but then before logon I also want to print the name of the user who is using the system right it should be hello Naveen and then logout option so how would you do that how will you get log out here so again I want a least and then here I will plain hello and the name how would I get the name I can i can't simply send a win because doesn't matter who logins everyone will get the same name we don't want that we just want it to be dynamic and that's why I will fetch it from the user so I will say user dot let's let's print first name why do you pray user name yeah so it will print the first name so it would say hello Naveen I hope I win something like that so this will be printed when you got when you are logged in but what if you're not logged in so in this case you will use else part here so we say else it's like liquid this part and then we also we also have to end it that if condition so we'll say end you that's it I guess let's verify let's refresh and you can see I'm only logged in and that's why it shows the a name to it so you can see it says a little bit but raise because that's what we have done and then you can click on log out so it will perform the Lord operation the moment you click on log out it should give you the same page but with the help of log in option the moment you do that record an error it's because we have not done with the log out part yet so the way you can do that oh we have made one mistake it should not be kept it to log out it should be small one okay so basically we have to do the mapping first in the URLs we have to say part we have to also hand a log out now what's a log out and here we'll save use dot log out comma name okay that's the thing we need we need here but we don't have a function which is log out in this case let's do that let's do it here at the end so say def logout which takes a request object : and here we just have to log out ok now you might be thinking that there are multiple steps to do that actually not you can simply say ought the same object and auth dot log out and drag it up just have to pass the request object and your job is done you have basically logged out the user from the system but then after logging out i want to call the home page again so you will say return redirect and this is where you is call the home page done let's verify let's go back to the page so you can see we are logged out now so you can see this user is logged in click on logout we call it the home page and it says register and login I was to log in again and this time it will ask you for the name I will login from Naveen and submit you can see am logged in but my name is not getting printed maybe the delay is not story database properly let's go back let's use a different account which will work properly I mean you 0 0 0 submit and you can see we got hello Praveen so some maybe my name is not stored in the first main section of database but clubbing and though this is working so that's how you can simply have login registration and logout in fact you can have one more thing let's say anyone can access the home page when someone comes here what if you don't want to login and still you want to explore you can the moment you click on Pony let's say we have a page which will show the details about pony but I don't want anyone to see the pony Paige if you are not logged in so it should call the login page automatically and that is something I want you to complete I know we have not done that and we will not be doing that that's my plan but what you can do is create a page for the pony in fact for for all the cities call the specific page based on what request you are sending and then before showing that page you have to check if the user is logged in or not if the user is logged in you have to show that page otherwise you have to show the login page that's your assignment so that's it from this video where they have talked about all the stuff inside login logout and registration now that's the first section of Django okay that's the end of the first section I will try to make some more videos in future but that's not something was planned before I was planning for the basic course and that's done so I hope you enjoyed this it is still now [Music]

Channel: Telusko

Views: 1,341,784

Rating: 4.8941956 out of 5

Keywords: telusko, navin, reddy, tutorial, java, python

Id: OTmQOjsl0eg

Length: 189min 20sec (11360 seconds)

Published: Wed Jun 05 2019