Django 2021 Course Session #1 | Views, URLs & Templates

just made a note it's in the questions channel so you can be listening to this stream and go into the text channel it's called questions and any questions that we're going to have during the meeting you can ask there if you have a mic i will ask you to raise your hand and you can speak if you want so i totally understand if you don't want to actually speak up it may be intimidating for some people to speak in front of an audience so ask questions there we'll go through that and then we can we can go with the audience here too so you can ask them directly here by raising your hand so i'll just go ahead and get started i see we have 10 people in the audience awesome to have everyone here so the main thing that i wanted to do here differently from any previous course that i've done is create a way for students to interact with each other and not just to interact with each other because i know a lot of discord servers can just kind of appear and then disappear really quickly because there's no engagement so the objective here was to create engagement between students and teachers assistants at this point you're seeing praveen and abi in the uh in the chat here so you're seeing them and those two are official tas here so there'll be tas we can work with i encourage everyone to try to assist each other as we go through their projects but know that it's physically impossible for me to to get to everything so they're going to be assisting everyone they're not here to help with homework they're here to kind of moderate and make sure that people are having questions answered and that these meetings go well so questions can be answered by them by me and so on and then eventually i will bring on more teachers assistants so moderators teachers assistants and if any one of you want to become a teacher's assistant at some point if you just want to help out you absolutely can that would be amazing we are looking for help praveen and abby are officially on staff though so at some point maybe if your django skills improve this can be a paid gig for you so we're looking forward to that so i put out a question i wanted to see where everyone was at at some point i'm trying to figure out if we should create some kind of form i would love to see like a profile on each student and what we could do is even create an option to do that on dev search just for just for the students in here because i would love to see where everyone's at and where uh where you're at in your django journey what you're trying to accomplish your career experience and so on i feel like that would be a good way to gauge everything here cool so everyone's mics will be muted automatically we're going to have praveen and abi take care of that so okay here we go we have okay i guess i'll i'll give that a second while the rose mics are being muted so we have our introduction and the basics i'm curious on where everyone's at i i think where people were responding if you can tell me where you're at in the course how far have you gotten in here oh i'm not sharing my screen wow my bad give me a second so i'll share my second screen i'm gonna try making sure the resolution is good and i'll zoom in too so if i'm too zoomed out let me know so yeah yeah we can hear you so we're gonna we're gonna mute everyone's mics uh unless you request it in the questions channel and then uh abby or provine will approve you and i see shuvo here so shivo is a is the awesome designer that built the template so everyone uh shivo you're gonna become a celebrity in here soon because he did an awesome job and looks like he's gonna be learning django with us because he's a reactant css person okay so if everyone in the questions channel can tell me where they're at in the course let us know if you if you started it at all if you uh if you're on a specific module just let me know but it'd be cool to see where you all are at here so in the course here we have the introduction and the basics this is what we'll do right now i'd love to see where this at so while you guys are responding let me just get started so i guess i could run through my slides here let me pull those up so with the introduction to django i'll just go without slides i'll stick to to to the basics here so while everyone's answering i'll start with what is django and we'll go from there if i'm at a two beginner of a level let me know i just want to make sure everyone can follow but uh as mentioned in the course if you haven't seen that video django is just a back-end web framework and it uses the python syntax so if you don't know python before this i'd highly recommend checking python out just to understand the syntax it's going to be helpful one thing about this is i've actually seen people learn python through django so that's a kind of an interesting thing i wouldn't recommend it because i think the issue occurs or the issue that occurs at this point is that people run into python issues but they think they're django issues because they don't know the difference but i have seen people do it so it's possible but i would highly recommend picking up bolts so yeah it's basically a back-end framework for python some people ask questions like why do we even need a framework i think a good answer for this is kind of like the idea of building out something completely by hand if you were to build it completely out by python or with python you would have to be writing a lot of code yourself importing a lot of custom modules and so on so web frameworks make it very easy and they kind of configure everything for us think of it as any other python module that you imported there's things for data science for machine learning all that's built in python but you have very smart developers before you that came before you that build all this out and basically make it easy so you can focus on the good stuff because if we all started from scratch we would be if we can mute some mics here by the way i see someone had a horn in their background uh that's mine i think okay so yeah it basically makes for development a lot easier now front-end frameworks are different from back-end frameworks so we're gonna go all the way back here there's front-end frameworks like react vue.js angular these are not needed but they make for production they also make production very fast and they kind of force you to follow good architecture you absolutely don't need a front-end framework but they are are good to use too so they are different from back-end frameworks they take care of the front-end portion of things now i know a lot of django developers hate the idea of javascript or even using the front-end framework and that's that's fine in the beginning at some point we're all probably gonna have to learn javascript if you're a web developer unless you find yourself a position where you're just working with databases and apis but javascript is gonna make your website a lot more interactive we're not gonna be using it in this series we use it at like one small point but it's very very basic now a front-end framework and why you should use that even though that's out of the scope of this tutorial but i just wanted to cover that uh it's kind of like the same reason in why you would even use a back-end framework so why do we need django we use django or we use back-end frameworks because we would have to code out a lot of stuff by hand with python i think justin mitchell has a video on his channel where he's actually building a website completely from scratch and it takes like 40 minutes just to render out a simple template with python so with django you can do that in five minutes or less than that so a front-end framework when you get to that point there is a lot of javascript interaction that will make your website a lot more seamless i guess like things like if you're looking at an instagram clone let's say when you click the like button or when you post or when you put out a message you see this data instantly you're able to toggle certain things like a drop down menu and so on this is stuff that javascript can do for your website so a front-end framework is going to make that a lot cleaner it's going to make it a lot simpler if there is a learning curve but it could get a little bit challenging for beginners so yeah that's kind of the introduction to django there's also flask that's really i would say the only competition to django and even that isn't really competition in my opinion i think django is just so advanced and so powerful even though it is more opinionated in a heavyweight framework uh that just means that more stuff come with it i still think it's highly customizable and it's absolutely the best framework for python i guess best isn't the best thing to say or the right thing to say because there are scenarios where flask may be good but it's just extremely powerful and i think we are you're gonna be good with that so uh let's see i'm seeing the questions here or the people responding with their status yeah a lot of people here are saying that they finished installation and setup you know they're beginners basic sections i i guess it's it looks like so we'll get things going there's a github repo we won't get into that i'm going to start it from scratch i see people have finished the introduction or installation and setup so we're going to run through that pretty quick here in the course at 17 minutes long but we'll just get through that and then we'll move on quickly so i just want to get the basics complete here so again keep asking questions along the way absolutely love it maybe try to keep them more focused on where we're at here right now but if they are out of the scope a little bit i'll still try to address them so when i'm live coding or when i'm doing a tutorial the funny thing is i have to zoom in like crazy so for you all the screen probably looks pretty normal but i'm zoomed in at 175 so let's go ahead and create our first django application and this is where all the questions are probably going to come in this is going to be good here i'm going to start with my command prompt here i'm going to drag this into frame and the first thing i want to do is create a virtual environment so i think we're all familiar with virtual environments that's in the tutorial if you're not you can ask the questions but that's more of a python thing we're going to create a virtual environment just to separate out all of our installs so i'm going to create my project on my desktop and i'm just going to cd in there and i want to create that virtual environment and to do that if you haven't done this already this is in the course we can just pip install virtual env so that's just a module that lets us create a virtual environment so let's see not sure did i misspell that virtual env i have it installed already but you can just do pip install virtual env and that will get that set up and we just want to create that environment so i'm just going to call that env that's typically what i like to call it so we can just do virtual env and then the env name or the environment name so this can be called whatever that's the way i like to call it so one second so this is the problem with live coding is apparently it's not installed so pip install virtual env there we go okay and then we can do virtual env that's probably a misspell yeah that's a complete misspell okay so that's working and i'm going to call it env here so that's going to be my folder name so this is going to create a folder for me and this folder is going to be on my desktop here so that's going to be my virtual environment and i'm going to install django into that virtual environment so i'm going to go ahead and drag that into frame here and that's going to be on my left side here let's get these files out of here so that's going to be on my desktop because that's where i ran it from we'll drag that in here and there we go so that's my virtual environment to activate it we're just going to do env because that's the name and then backslash scripts and i'm using windows by the way so on mac it's going to be a little bit different and we can activate it okay so the environment's activated we can see that right here so if you see the parentheses in env that means you're ready to go and to install django and get the latest version you need python so that's what we're using for pip here that's kind of like the prerequisites so now we can just do pip install django so pip install is a python thing we're going to give this a minute here to install django we'll get our project set up here so i'm not going through notes so if i miss something let me know like if you're confused on how i did a specific thing okay so we have django installed so to do that to make sure it's all good here just go ahead and just do django dash admin and this is going to give you a list of commands here so these are all commands this means that django installed and we can run all of these and we're going to be focusing on a few main ones here so this means that django is successfully set up here so for some reason my terminal looks weird but we have like the star app command there's gonna be a command called start project uh run server this is how we activate our server and then run our migrations here so django is successfully installed and we're ready to move on to the next step here so what i'm going to do and this is where a lot of people got confused in the course here i'm going to go ahead and close out my terminal and i'm going to be using vs code so you can use whatever text editor you want i'm going to use vs code but if i use vs code vs code has an integrated terminal into it and it should activate it right away so this stream is recorded by the way so i'm going to go ahead and open up a folder here we'll go into my desktop this is where i have my project try to zoom in here a little bit how's my screen size by the way yeah it's good okay gotcha so i i realize we have not created a django project so that's the first thing we want to do so i'm actually going to open up my text editor again yeah i have something to add to the what to alignment like people in the beginning uh sometimes gets confused like what the hell is going on with virtual environment thing so if you're a beginner you can totally skip that part like you are not going to use uh any type of like different versions of django uh any means and yeah like you can totally get rid of that virtual name and you can just start uh like with just pip install django and start creating project yes 100 so it's great to have a virtual environment you should have one but if that confuses you don't let it stumble you if this is your first install of django yeah just do pip install django you don't need a virtual environment it's just it's good for production once we're separating out our code we'll get to it later but it's not going to stop you from continuing so we did the django admin command we installed django and using the django admin command and i misspell a lot when i'm live streaming using this command we see and we see we have access to all these other commands here to start up our first django project here we're going to use this start project command and what this is going to do is it's going to create like these boilerplate files for our django application so it's basically just gonna get things prepped for us and uh we can start building stuff in there so it's gonna give us pre-built code just like you would when you set up i guess any more any heavyweight framework like django there's a couple of packages and modules that can do this in a different way too so we won't get into that okay so in that case we'll do django dash admin and then start project and then you want to give your project a name so in this case the project name is going to be i'll just call this dev search and then we'll just do live like that because we're doing this live so that's going to be the project name so this is going to create a folder on my desktop because i am in my desktop here so now i can close out my terminal and i'm going to bring in that folder here so let me find this on my desktop here on the other screen i'm on a dual screen here one second did we answer this question advantages between virtual environment pip environment and python virtual environment if you have an answer go ahead and do that i uh i've never like looked into that i know they all work oh yeah i'll take my take on this um you know functionally they really work the same but you know if you're like a techie and like you're working on a really massive project uh the you know each you know um virtual environment tool does work a little differently for example with hip environment it's actually built on top of virtual env so that would mean that you know you're using a lock file to maintain the the packages and and the libraries that you're using for your project um virtual environment they really work the same way you know do you want a lock file do you not want a lock file but you know it doesn't really matter in the beginning it just matters really big projects good answer yeah that's an answer i probably couldn't have given i haven't looked into that but thanks for jumping in there cool so let's jump into the next section here so we started our django project we ran the django dash admin start project and now we have this folder called dev search live so we did start project dev search live so that's what we called our project so if i open up this folder and right now by the way my virtual environment and dev search live are next to each other so i typically like to put my virtual environment into my django project so i like to keep it in there because i don't lose it that way so the django admin start project command gave me these boilerplate files in here we're gonna see a manage.py file and then we'll just break down the other ones in here and inside of the dev search live project we're gonna see another folder called dev search live and inside of that subfolder we're going to see a couple of files in here so this is what we have set up so we'll go ahead and run through all of these but before we do that i'm going to drag my virtual environment into my django project so that's where i like to store it so this is where people got confused or that person got confused last time so i'm going to open up vs code and i'm going to open up my django project here so that was dev search live here and this text is probably really small here so i'll zoom in so i'll just open that up and now i have no that's the wrong one okay so give me a second dev search live that's the one i needed okay so here is my blank django project here so in here we have a manage.py file don't touch this file that's something that we can run our commands from we're going to be using this a lot but never modify this file unless you know exactly what you're doing which in the beginning stages you will not then we have our virtual environment which we just dragged in and then we have our django core files so the main file in here is going to be our settings.py i'm not going to go through all the parts of it because we'll address these one by one throughout the course or in the live streams here but this is like your project configuration file so if you know um if you know node.js this is going to be like your package.json file where you have all your configurations basically it's how we set up what database we have so if we go through this we have our apps in here middleware templates and basically all our project configuration here's our database which is going to be an sqlite database and so on so settings.py very important file the next one in here is going to be our urls.py and this is how we configure our url routing so i'm going to take out this comment here i just want to get rid of that so this file is how we decide what a user sees and what routes are available on our website so because of vs code i'm just going to run that install really quick don't worry about this so this is going to handle all the url routing by default we already have one path here this is just a python list here and that's how we configure it now wsgi here this stands for web server gateway interface this is our server right here and then we have asgi so we're not going to touch these two files asgi is going to be for asynchronous server gateway interface so after django 3.2 i believe or 3.0 django added in async capabilities which i have not used but that's what asgi is for then we just have our init.py which basically just makes it a python module and that's it so django dash admin set this up for us the main two files that we're going to work with are going to be settings and urls here okay so what was the next step in that series so after we set up our virtual environment by the way i had people help out with some timestamps i don't know if we got these ones complete so that was set up and installation i think the last step in this process i think my video was going to auto play there the last step in this process was to create our app here so in django this is the concept of apps i know a lot of people struggle with it basically your project functionality in your database and all that is gonna sit inside of something called an app that's where your core files are really going to be this django project that we set up this is like your project configuration so it just gets things set up and registered for us and then the actual apps is where we're going to store the logic so i actually want to pull up the diagram that i used in the video or in the course here i'll pull this up here one second i have the picture somewhere here okay so this is an unprepared stream so here's kind of the concept of it no that's not apps i think i actually deleted that uh that picture from my desktop so i think of it this way i guess bucky roberts that's actually the person i originally learned django from and he said it this way if you can't describe what an app does in one sentence it needs to be its own app so let's say we're using facebook.com and facebook.com has users they have a feed they have groups there's like facebook marketplace they have all these components of their project that makes up facebook.com all of these projects sit in the website so instead of bundling up all this functionality into one big project and getting it all mixed up here we would put that into its own app so users would sit in one app groups would be in another app and and so on so we're just basically separating our code so now that i'm done with my ranting let's go ahead and create an app here so i'm going to open up my terminal for vs code i can just do control shift and then tilde with the back tick there and this is what i was talking about when i open up vs code my virtual environment turned on by default it activated it because it sits in my django project so just go ahead and activate it if you don't have it activated just do env or whatever you called it scripts and then activate and that will get that active for you okay so now that we're in our django project so if you're using a simple command prompt cd into your django project and we're still recording right everyone can hear just want to make sure i saw a comment so we cd into our django project so make sure you are now in that folder that you created big or just make sure you follow that a lot of people try to create their app outside of it now from here you can do python manage dot py start app so it's kind of like the start project command and this is why we have manage.py here and then in this case we're going to call our app project so we're going to have two different apps one for our projects and one for all of our users when i run this command we see a folder called projects now and this is what an app looks like so let's kind of run through these files models.py this is our database this is where we design it in this case we build our database tables using python objects or classes so we're going to use these classes and these are going to represent our tables we have views so this is where we're going to handle the core logic when whenever a user goes to a certain url so it's going to trigger a view and this function will return a template it can return a simple http response a json response or whatever we need it to do so very important file here so after that we have our admin dot or admin dot py this is our admin panel and how we configure things we'll get to this later and then we have our migrations so migrations is how we configure our models to our actual database so now that we have our app the last thing i want to do here is configure our app to our project and if we go into settings.py there is going to be a variable or a list here called apps here so apps are simply the apps inside of our application and you can see some by default here by default there are actually apps we don't see here configured in django by default so these are what django has set up for us but to connect our app to our new app which is called projects we need to go into the projects folder so we're going into projects and then we're going into the dot apps file so right here this is the dot apps file it's the configuration for the app itself so we're going into projects.apps dot project config because that's the configuration class right there so we're just gonna connect to it and does someone have a question sorry i didn't catch what that was okay so yeah so our our app is now configured so now django knows about this project's app so this is our setup that's video one we just ran through all of this and set up our django project and an app if anyone has questions go ahead and ask them if not we'll move on to the next section so i'll start prepping for the next one write your messages here or request to chat and then your mic will be unmuted so i'm just going to run through the course here the next video in this process was going to be oops okay so the next video was going to be our views and urls so without the explanation this would take a couple of minutes to set up this application or this project was pretty easy to get going all we did was run django start project and django star app now this is where a lot of flash developers kind of crack me up here because they say flask is very easy to get set up well you can set up a flask application but it's going to be a really crappy application it's not going to be good so there's still a lot of configuration that has to go with it so what we're going to do is create some really fast views and urls and we're going to compare this to what a flask developer would do or something like that so inside of our urls here we want to actually return some data to our users so the first thing is i want to turn on my server so i forgot this step in the last part here but to start our server in our django project it's simply it's as simple as doing python manage py run server so this is one of those commands so when we do run server let's see projects config something went wrong in that setup here and what i call my app i called it projects projects.apps.projectsconfig so i forgot an s there okay so we're not going to worry about these unapplied migrations just yet our server is now on and it's running on poor 8000 so i can copy this and i can just paste that into my browser what i recommend is you go into your bookmarks and just book it bookmark it so that way you can just open up your browser and then click on that port and it'll be there so this is what django gives us by default now we actually want to return something to our users something that's going to be real i guess something they can actually see that we made not the default jingle stuff so let's render out some data really quick to our users so in here inside of our urls here we have our urls and we just want to trigger a function that returns back a simple http response http response which later turns into a template or will be a template or api data so this will be from django.http import http response okay so now let's create a function and a function is simply going to be a view we get into class based views later on in the course the only difference is one you write as a class one you write as a python function so we're going to create a function here and let's just call this projects here so we want to just get all the projects and return them to our user so inside of a view in order to actually make this a view and not just a simple python function we have to we have to import or inherit from not inherit from but we have to pass in the request object so this is a django object that django provides us and this helps us handle all of our http requests uh get header data from those requests and so on so this makes it a view so create a function pass in request into that and then we just need to return and here for now i'm just going to do http response and we're just going to say this is our projects page okay so that's a view right there now we want to return this back to the user so what i'm going to do here is i need to create a route or a url path here so this is a list here and we're going to use the path function and this function takes in a few parameters the first one is the actual url that we want to go to so let's say whenever a user goes to our url and then forward slash projects what do we want to do when a user does this so let's say someone goes to our browser and they just go to this route so here i'm going to mute someone's mic here okay so when someone goes to this route we want to return back something to the user so in this case we're just going to add in a comma into the path function and we can just do projects and we can trigger that function we're not going to instantiate it like that we just need to throw it in there and then the path will actually trigger that function for us so that's it at this point it takes in two parameters the route and the function if everyone's following let me know i just want to make sure i'm not like going through redundant stuff or boring anyone okay so why am i not doing this in views.py good question i'm gonna i just want to show you how a view works before we connect it to the app and also a lot of flash developers brag about how fast it is to set up a flask application and i'm showing you that it's not much slower to do that in django so it's going to be the correct way to do this inside of our views.py file but i just want to get it set up here show you how it works and then we'll we'll actually move it so great question actually so this is where django being opinionated is actually a really really really good thing like i cannot stress that enough because they're teaching us better structure than sticking all of our routes and our urls into one file so okay what's going to happen when someone goes to forward slash projects this function is going to trigger and there the user is going to see an http response that says this is our project's page so let's save that my server is running so now if i go to this route forward slash projects it officially did not connect let's see what's going on here projects let's make sure my server is on so my app is installed projects to apps config no that wasn't actually needed let's take that route here the hand flash yeah okay so there we go so now when a user goes to projects this is what we're seeing so that's all it is that's an http response to the user so what if we created another view here so let's copy this one and this will be to like a single project so i'm just going to take out the s it's not going to be plural and we're just going to say project page so now we have two functions or two views and we're going to have another url here so i'm going to copy this one we'll throw in project here and that's just going to be project for a single project and we want to trigger this function when a user goes to project so in this case let's get rid of that s here so now this function will trigger this or this url path will trigger this function this one right here will trigger this one so they're correlating to what they're activating here what they're actually triggering so now if i go to projects or project without an s we have a project page and if i add in the s there now we see the two pages so i hope that makes sense now i want to make a dynamic url here really quick so let's say we want a single project but we want to pass in like the project id because that's typically how you would get it in the url here so typically you would have like a route called project and then it would have like the idea of like 45 or 24 whatever that is and you would add this value in and this value would be dynamic can you all see that it's kind of small my screen i don't know how i can zoom into that so you want an id like that so to make this dynamic we're going into our url here and into angle brackets and then close out with the forward slash we can add in a dynamic value by simply giving a name so this value could be an integer like that and then we can just say pk here and this value can also be dynamic which i'll explain in a second this would mean that this value here has to be an integer we can also do slug so that can be a slug field and this can also be a string i'm going to leave it as a string because later on we're going to use uuids i believe there is actually an option to do that i think we can actually do uuid but i'm not sure so for now we'll just do a string so this value can also be dynamic so we can call it cookies it doesn't matter as long as we call it here that's going to be the name of that dynamic path here so for now i'm going to call it pk for primary key and then inside of the function we just need to pass that in as a parameter so pass that in here and pass it in here so now what i'm going to do here is just render that primary key so i'll just do project page and then we'll just do a colon and then we'll just append a string here and that's going to be the primary key so this is how we can query data and render dynamic values out to a page so now this project route won't work unless we pass in a dynamic value so if i click on that now we have project four i can pass in any number and this number is going to be rendered out so that's how we get certain objects and query the database anyone have any questions give me some kind of response if it's all flowing decently if you're understanding it i'd love to get some feedback so what we're going to do now that we covered our urls and our views is we want to do things that jenga way remember django is opinionated and django wants us to do things a certain way and that kind of creates a good structure so as somebody mentioned uh that was ramsey ramsey i believe or no that was andrew asked why are we not putting this into our views.py so this is how you typically want to set up your project all this was done inside of our django project but remember anything to do with projects needs to go into the project app we want to separate our code is it necessary to declare a data type inside of our urls yes we do we have to specify that if i'm wrong correct me there but i'm pretty sure we have to specify what kind of data type that has to be that's a good question by the way so let's go into our projects app now and in our projects app the first thing i want to do is go into the views.py and i'm going to take all these or these two functions here including that http response i'm going to copy that delete it and then we're going to put that into our views so now all of our views are going to sit inside of a views.py file and this is going to separate our code make it a lot cleaner so we'll put that in here now we need to connect these so praveen is saying most likely not as python is dynamically typed so typically yeah that's so praveen is basically saying let me pull up the question so everyone can see praveen is saying that you don't need to typically in python but in this case for the urls i believe you need to okay so that's more of a django thing okay so we put our views into our views.py now what we need to do is configure our urls to these views so in our app our app is actually going to have its own urls app ui so we're going to have several url files in here so if we look on the left side we're going into the app which we call projects in here we'll create a new file and i'm going to call this urls.py and in here i need to set up my urls so the first thing i need is that path function so we'll just do from django dot urls and we're just going to import path here so we have path then we need that list here so we're going to do url patterns and then that's going to be a list so we'll set the variable and in here we need to write our first path here so i'll go into the root directory so the root directory is my django project we'll go in here we'll go into the original urls file and we're going to take these two paths here we're going to copy them remove them and we're going to put them into our apps views or urls.py file again ask questions because that's the point of a live stream because i say this in the course so instead of just re-hearing this i would love it for you guys to ask the question so i can actually i guess address those right away if you have any doubts ask them so we just put our urls into our app's urls.py file and now that my urls sit inside of views.urls here so here's the structure these two routes i'm going to go into the urls.py file and in order to actually use those views i'm just gonna do from dot and then import views so i'm just importing this entire file here now for the actual functions i'm just gonna add views here because those are in my views folder so we'll just do views dot projects and then we're going into views dot project oh i already wrote that out okay so now we're going into that file so these two routes will trigger these two functions i hope that makes sense so to actually connect all this because we are this is actually not going to work at this point what we need to do is we need to go into the root directories urls file and we simply need to include this url pattern into this route so this is like the core url pattern this handles all the urls for the entire application so what we could do is we can import a function here called include and we can simply include this file into here so we're going to create a path here and i'm going to set that to an empty string because i want this to be like my home page here and we're going to set this to include and we're going to put this in a string and we're going into the projects app and from the projects app we're going into that urls.py file so projects.urls so now if somebody goes to our root domain they're going to be sent in here and this page is going to take care of all of that routing so if i save this let's just go ahead and refresh that it's still working perfect now my urls are in a different file but they are still working but what happens when i go to the home page so right now because i have some urls configured it's telling me hey i only see the admin route i see projects and project so to actually make this work because we're sending a user to an empty string which is the home page or the root url we're just going to go ahead and set the projects page to our home page so now if somebody goes to this route here so if they go from the root directory into this file if they go here the home page is going to be our projects okay so let's refresh that and then let's go through some questions so now it's all working that's our homepage pour 8000 and then project and then whatever we want to pass in so now that that's a string so we did a string for the data type so we can pass in whatever we want here okay so i see a question uh say if we have a function related to an app rather than creating a different app in the root in the root directory can we include a new app handles sub function inside of the main app folder i'm not fully understanding the question let me see if praveen and abby if you understand that let me try to reread that if we have a function related what's that yeah i'm reading that uh you can continue okay okay perfect yeah if you can answer that in the chat or even just speak up now that'll be that would work so everyone can hear it um but it's also gonna be in the chat too so okay so let's move on here so we set up our urls and views and we put them into different apps now and what did we do next in the course here so we configure that and now what i want to do is actually render out some templates so this is kind of the interesting thing i actually got a comment from someone yesterday talking about django in 2021 and basically saying that it's so outdated to use html templates why not just use django for apis and then configure configure the uh the front-end framework or whatever you want to use that's totally a possibility like in theory if you don't want to work with the django templating engine you can skip the entire templates section here you don't need to do this this is one way of doing it i teach this to beginners because it's still a very valuable thing to know like the thing that that person said ron in the comments section was no one uses templates anymore i can think of so many templates and i can point out so many companies that still use templates and don't even have an api think about a dentist requesting some kind of application just to store customer data or patient data there's a good chance that you won't even need an api for that and no front-end framework so build out to the application that you're trying to solve rather than just following a structure because that's what everyone said so templates are still useful that's why we cover them and we're going to talk about the django templating engine right now so let's go ahead and set this up so the first thing i'm going to do is render out some templates so i need to go ahead and go into my root directories file there's a few ways to configure templates in django the first one is just to create a folder inside of the root directory so ron folder basically in here go ahead and create a new folder so in the same project as your django project and call that template so not into a specific app so if i were to show you that folder structure here we go it's sitting right here with all my other files here so we see dev search live my virtual environment my app and a templates folder so that's the structure here so now we need to add in some templates and uh just curious how is everyone's html and css i'd actually be curious to get feedback on that so yeah write that in the chat section that'd be cool to see so for our templates this is where we're gonna store all html templates or at least some of them actually so in here the first thing i want to do is create a projects.html and let's just say something like projects we'll worry about the html structure later we'll just say projects here and let's create a single project html so we'll just do single project.html so now we have two templates and just to show that this is a template we'll just say project and then i'll just add in a p tag and i'm not using emmet so i'll just look up some lorem ipsum text emma is just a plugin that helps you create some text faster and helps working with html easier but for now we'll just get some dummy data i just googled up lorem ipsum let's take this right here and let's stick that into this paragraph tag okay so i just wanted to show that this is a template so now we have our two templates we have one for all of our projects and one for a single project now to render a template what i'm going to do is go into let's close these out actually let me save that so it doesn't make that noise okay so let's go into our views now and instead of returning back a simple http response we don't want to do that it doesn't really do anything for us we're going to use this render method it's a shortcut that django gives us and we're going to render a template so in return let's go ahead and remove http response and we'll just do render so in here i just need to specify the request object here so we'll pass in request and we need to specify the template so the template we want to render is going to be the projects.html template i'm going to save that and now what i need to do is tell django where to find this template here so templates are configured inside of our django project in settings.py second time we're referring back to this file now so in templates there's gonna be an attribute called durs so that's directories and we're going to use the os module so i'm just going to import that so we're going to import os and we need to set a path to our templates so this is actually more of an old school way of doing it but i know a lot of people for some reason have an issue with django's new file path system so i'll just make sure no one has an issue with it so we're going to import os and then we can go into our templates here and inside of this templates directory we can actually add in an entire list here and we'll just do os dot path and then we can do dot join and let's render the template so in this case we're going into our base directory so there's this variable here baster that's just going to tell us to go out here into this root directory so we'll go into that root directory and then we want to get that templates folder so we're just telling django we have templates here so we'll just do base underscore dir and then we're telling it go into this folder right here that's where we store templates now django knows where to find templates so when i trigger this function it's not going to throw an error because it's going to go into that folder and look for a template called projects.html so let's go ahead and refresh that page here and let's see what we have so there we go we have our projects that's not an http response that is a template so if i were to go ahead and grab this text here so we'll go into single project i'll grab this paragraph tag so let's grab all this and i'll probably have to put out an html and css tutorial like something short just to make sure everyone's caught up if anyone's lost here so now if i refresh it there we go we actually have a template so we can actually customize it now we can actually load information into our templates here so that's why we want to use templates and not a simple http response probably more beginner but i wanted to make sure to cover that so we rendered out our templates and in that in that project here or in the tutorial we also talked about template inheritance and including so template inheritance very powerful thing we're able to create like components of our application and we're also able to inherit from like a main theme so one example would be like this navigation bar so imagine every single page in this application imagine having to take our html code and paste this or rebuild this nav bar in every page what happens when we change the logo or when we change a link here we would have to go into every single page and we would have to update the html which would be absurd to do that there would be a lot of errors it's a lot of work so what we want to do is we want to create one file for our navbar and simply include it into our application so we're inheriting it's like a parent-child relationship so let's go ahead and take care of that and by the way there is another way to render templates so let's actually get into that first sorry i actually forgot about that so with django instead of storing all of our templates inside of the templates folder this can get messy too again when we add multiple apps when we have over you know 50 templates in an application that's totally possible this file will get very messy so to do things the django way which django recommends that we separate our code into different applications and different folders what we're going to do here is we're going to go into our project here or into our app and inside of our app we're going to create a new folder and we're going to call this template so this is where our templates for a specific app is going to be stored so when we create a users app any app that has to do with our users is going to be stored in here so the weird thing about this is django already pre-configures it for us so we won't have to go into settings.py and let it know about this file django already has this built in so what they do is they just tell us to build in a folder called templates and that spelling has to be that way and then in that templates folder we need to create another folder with the app name so in this case our app is called projects if anyone has questions here do ask i know this confuses some people so if we go into the project here we have our app right here then we have templates and then projects and then all those templates will be stored in here so let's go ahead and actually move all of those so i'm going to go into my project again and i'm going to go into the templates folder and we're still going to use this folder but we're just going to move these html files into the projects page because they have something specific to do with that application or with that app and this templates folder will be for any template or part of a template that is used in multiple applications so i'm just going to copy this and we're going to move this into our projects app templates projects and we'll paste it in there and then i'll go back into the root directory and we're just going to remove these files from here so just to make sure everyone's no one's confused here we took those files out of the templates folder and we put them into projects templates and then projects so now they're in here some people get confused there okay so if we do this we have to do something different with our views because now if i refresh it we still have the templates but this is going to throw an error so now it tells us hey a template doesn't exist this is a common error you'll see this a lot a lot of beginners see it it just means that it can't find the template or that that template truly doesn't exist as far as django knows it doesn't exist so what we need to do now is we need to point the route to our app here so we just need to go to projects and then take project.html so that's why django is asking that we name a folder inside of our templates folder called projects it needs to know where to find it so we need to do the same for this next one so let's actually save this and make sure it's working so there we go so now it's pointing to the template but it's in a different folder so let's just render this one out first so we'll just do render we pass in requests so you pass in request into the render function and then we're going into projects forward slash this was single dash project dot html okay so i just want to make sure both templates are being rendered let's do forward slash project and then we need to pass in some kind of id okay so there we go single project something went wrong with this template let's see so it looks like it's rendering the wrong template when i go to a project singleproject.html doesn't exist let's see single project okay so that was just named wrong so i'll fix this naming okay so i'm seeing some conversations going in the chat let's see if those are relevant to me okay so let's that looks like it's just praveen looks like it's between praveen and someone else okay so we have the templates we also have two different ways of rendering the templates the first one is to create a templates folder connect that inside of settings.py so inside of our project and settings.py we connect it right here or the other way is to put it inside of your apps if we put it in our apps we put into a folder called templates then the app name and then we simply have to change our routes to that render method so now let's talk about inheritance so a navigation bar is going to be used inside of every app we're going to use the same nav bar across all apps so that can go into the root directories templates folder so let's go ahead and create a new template and this is going to be called navbar.html and let's just create some kind of navigation bar we'll just do an h1 tag let's just say logo and then let's just create an hr so some kind of line break just so we can see it so this is what our nav bar is going to look like long term here so we have that set up so we have our logo and we want to make sure this nav bar is inside of every page so to make sure this is all in all of our pages we can go into our templates here so i'll go into my projects here and we can include it and we'll talk about the django templating engine syntax so that uses jinjo and we'll talk about that later but just write these curly braces if you're following along and we're just going to do curly braces two percent symbols that's called a tag and then we're just going to say include and this is a specific tag so this is the tag name so we're saying include and then because i used or in here i'm going to do single quotes in here i just need to point to the template we want to use so in this case we're going into nav bar.html like that so now what's going to happen here is this code right here will be included inside of my projects page so if i save that and refresh it so in the projects page there we go we see our logo so that's not actually in the html code we just included it and now we can use this anywhere if i wanted to put this down here i can include it multiple times in a page just copy and paste that a bunch and look at that so makes for things or makes things pretty cool here i like doing that that cleans up our code a lot we're not repeating ourselves so now let's talk about template inheritance so still seeing the conversation it looks like it's still between praveen and someone else so template inheritance means that i'm not going to have to include this code inside of every template because if i wanted to reuse this i would still have to go into my single project page and then i would have to put it in here and that works it still makes it easier because now i'm not having to update the nav bar in every page i just have to include it but what if i just wanted to create one template that all the templates inherit from and then maybe include this navbar into that main template so for this we're just going back into our templates here this is going to be a root directory template and i'm going to create a new template and i'll call this main.html so all our templates will inherit from this so in this i'm just actually going to create my html structure so if you start typing in html in most text editors it should give you the boilerplate files i'm just going to modify this so don't worry about the details so this is typically how you want to make an html page and let's just configure this so i'm just going to comment out my script tag here and my link so what we want to do here is we want to take this nav bar and i'm going to take it out of projects here so i'm just going to remove it copy it and i want to put that into my main template so now the nav bar is included in my main template now if i want other templates to inherit from this template i need to specify where that data will go because that main template is pretty much gonna wrap all this code inside of like a block tag and it's gonna put this code inside of that if that makes sense it's like a parent-child relationship so let's try to explain here so in order to actually inherit from this template we need to use block tags so block a tag a block of code can go inside of these tags so we'll just do block content and then we need to close it and we need to create a closing tag so we'll just do end block so we're letting that it's ending and then we're specifying the content that's going to be closed up so every single page that we add will go inside of here so it's going to fit in here and this will almost like wrap it it'll be like a parent too it's almost like object inheritance so to actually inherit from this template now that we have these two tags all we need to do so we have to do this if we want to inherit from it we have to go into our template that we want to inherit from or the template that we want to use this main template or the the page i guess and we just need to use extends so we're saying that this page is going to extend a template then we need to specify which template and this is going to be main so main.html so let me try something here so the first thing is i'm just going to go ahead and save this and check out what the page looks like so we extended it and now this template is going to be inside of this page so if i refresh this we see our logo and that's it why do we see our logo so our logo is here because we included it in the page here so what about all this content why don't we see this so that's not showing up because we don't know where we're putting that child content we haven't specified that yet so in our main template we said put all child content in these two block tags so in any template that we inherit from or the child template what we need to do is wrap the content and tell it where it's going to be so we can just do block content and we're just wrapping all our html code that's all we're doing and then we're just doing end block so just like we did in the main template so end block content okay so if i save that now all this content will appear inside of here inside of these two block tags and for some reason i'm not seeing the closing paragraph tag so i'll probably just add that in manually before that gives me an error so we'll add that and here we go so this is all being wrapped around with these two block tags and we're extending from this template so now if i refresh this there we go so what if we want to go to our single project page let's just quickly create a link here so we'll just uh add in two links here we'll create a tag here and we're going to make these links dynamic later i just want to show you how to do this so we'll just say project and that's obviously only going to go to one project and we'll just create a href and this is going into project four slash and we'll just give it an id of like four so that'll be that the dynamic route and i also want to go home too so what i'll do is create a home link here so we'll just go to projects and then we'll say home everyone following along not putting you all to sleep how are you doing for being a nabi all right so we have our two links here so what happens when we go to the project page so when we go here and i just hard coded the value it looks like the link's not working give me one second so that's going to the home page like that and then we're going to project okay so let me remove the nav bar from the project page and let's try that one more time so i'm going to save everything here save the nav bar the main template need to revisit okay so still the conversation you guys keep throwing me off okay so so we have our homepage and we have our project page so you notice how the project page doesn't have this navigation bar well the whole point of extending is so we can reuse code there's something called dry which stands for don't repeat yourself it's a coding term for anybody that's not familiar with it we don't want to have to rewrite our code here so in this case what we need to do is go into the single project page now and we also need to extend the template over here so we'll just do extends and then this is going into main.html that's the template we'll extend and then we just wrap this in here so we'll just do block content close that up here and block content all right so now this page should extend it so there we go so now the single project page why does it say projects i'm a little bit confused here i see an issue so it looks like we have a bug here single projects okay so that should say single project that's why it's confusing me it's a single project we'll save that and let's check it out so we have our homepage which is the projects and then single project and they both extend the main template now the cool thing about this is that if i want to add some styling let's say i want to make my background color like blue or something like that we'll just use some ugly color but that's obvious in the head tag all i would do is just add in a link here or a style tag which later on will be external cxs and we'll just do body and inside of the body tag i'll just say background color so background color we'll just set this to blue so we'll save that so now i style the main template i'm not adding styling to projects or single project but any kind of styling that i put in here all the child templates so anything that inherits from this template will take on that styling so if i go to this page i styled one page and that looks horrid right now but if i style one page all the pages will have it so let's try to use a color that's a little bit more visible or let's just say color for text here will be white so we'll just do fff that should give me a white hex here and we'll say gray for the background color or maybe use a less aggressive blue okay so now both pages have the styling so that's the beauty of that so we don't have to add styling into every page okay so that covers the templates and template inheriting i think that was it i probably should look at my notes here but let's go ahead and move on to rendering data in templates so now we want to actually output some data so what i'm going to do here is just change the colors let's just take out styling i'll just remove it we'll revert back to where we're at how are we doing feedback will always help me let me know give me a thumbs up ask a question um if you want to speak up to by the way just request it in the chat so go to questions and say i would like to ask one in the voice chat and we'll unmute your mic and you can ask the question so while that's being done let me pull up some notes here i just want to make sure i'm not missing anything so i'll actually go to my video notes the ones that i use for the original tutorial and i'll just make sure i'm not skipping any important parts here praveen abby you guys uh can y'all hear me are they still in here yeah no we could hear you praveen uh got to leave he's in vocal oh i see cool yeah abby if you have to go too let me know i don't want to hold you here oh i can stay i'm just uh losing a little connection but uh i should be good in a couple of minutes i'm just fixing my internet gotcha okay cool if anyone else is losing connection let me know too i'd love to make sure we're not just going with that connection okay so i'm just pulling up some other notes here what's up did you see the portion of did you see the question in uh the uh about the best way to organize your templates whether it's inside a factory i mean took a uh like a stab at it but i just wanted to see if you had anything to say too sure yeah good question okay so the question is what's the best structure was that the question right which trying to find it exactly where was that who was it asked by let me pull up i'm sorry if i'm wrecking your name but the question was what was the best practice to keep the template inside the app or the root directory okay so really good question so the way i would follow this i would say is if your template or that portion of a template is going to be used across multiple apps put it into your root directory so if it's not tied to a specific app put it inside of here so put it into the templates folder and configure that in settings.ui i've seen people put templates in here and again you can in theory deal with however you want this is the cool thing about django is they're trying to give you that advice django is saying that any template like main.html which is going to be used across multiple apps and so is a navbar put them in here any template associated with a specific app at this point we only have one we have the projects app but if it's specifically associated with this app like it's a projects page or a form for a project put it into this file now in theory what you could do is you can go into templates and then you can create a folder called projects and you can say this is where all of my all of my templates to the projects app will sit that's totally fine too you'll just have to go into the views and configure that routing here but the best way to do it is to separate it this is how django recommends it is to separate your code into main templates and then anything to do with your app put it into the app's templates folder good that's a really good question actually okay so i'm just pulling up the notes here give me a second i'm also using this to take a little breather usually when i'm recording i give myself a minute to breathe in between sections but now i'm just having to rapid fire everything okay one second here i almost feel like i deleted the note somewhere oh okay never mind now i found him i just had it named ron okay so we just did templates and template inheriting now we're going to talk about rendering data so what i'm going to do is pull up the github repo and let's just go to github.com and then we're going into django 2021 so this is a live github repo so if you want to use this this code you can so in here in the resources folder i talk about this in the introduction video we are going to render some projects into the template and before we do that we're just going to use some static data so we're just going to go in here let's uh move this to the left here so let's go ahead and go in in here so i'm not having to type all this out and let's just get a list of dictionaries so we see one dictionary two and three so these are going to represent like objects so let's just copy that and let's bring that into my code here drag that in this screen so let's just bring that inside of our views so we're just going to use this temporarily so we have the variable name called projects list and then our data in here so before we get started with this i want to talk about tags in jinja and i feel like this is where we're going to start getting some more questions so tags in jinja let's just pull this up so let's just do django templating engine or django templates that should work so just google up the documentation use this link right here so i'm going to paste this in the questions here that's the documentation and for those of you that don't see the questions chat i just pasted that in here so that's in my screen so zoomed in but that's in the chat section or the questions channel okay so here's the templating engine so jinja this is what django uses it just customizes jinja a little bit it's using jinja 2. this is a templating engine that allows you to i guess to sum it up write logic in your template so you can pass in variables you can create uh if an ants or if statements for loops that kind of stuff so in our case it's customized to write python like logic in our templates so there's two things we have in the syntax the first one is we have variables which are going to be these double curly braces so in this sentence right here you'll see my name is and then first name and then my name my last name is and then the last name variable so if we use a dictionary we pass this in all we would need to do is pass in the values like this and then you would see my name or my first name is john my last name is do so if sally were to put in her name here it would be my first name is sally last name is do or whatever so it makes things dynamic so that way when you render your profile that's why you see your own profile name you're using these variables to output that so just variables there and then if we're accessing a dictionary we can still use the dot notation so we can do like object dot you know attribute so it'd be like person.name and values like that now there's also something called tags tags are these things with these curly braces and this percent symbol and tags basically allow us to write python like logic and there's also built-in tags that we're using for example we used the include tag or the extends tag right here so we see the tag there and then the actual tag name we see the block tag and those are the only two we used at this point so these are tags so an example would be like this if a user is authenticated you want to say hello to them so if user is authenticated say hello pass in that variable name and the weird thing about this is you have to end if or you have to close out your tag so anytime you create a tag you typically have to close it not for all of them but for statements like this so if we write a for loop you'd have to do four write your loop and then do an end four so django needs to know or the template needs to know where you end it so in this case we won't go into too much more here we'll just start writing this out there's also something called filters where you can do a pipe here and then write the filter name there's some built-in ones so yeah that's the django templating engine it uses jinja so take a look at that look into the documentation so let's start adding that so let's go in here and the first thing we're going to do is we'll start with this projects list here so i want to use this and i want to pass this into my template so before we actually start with that i'm going to say name and i'm going to say dennis so we'll just test this out so add my name and to pass this in the template we need to create something called a context dictionary in theory i can just create a dictionary like this and i can say name and that will be the name variable so the key is how you will address it in the template and if all this is familiar to you let me know i pretty much repeating what i'm doing in the course so i don't want to bore you here but we have a dictionary here and what i'm going to do is i like to just name my dictionary so we'll just do context and that's like context data in the template and that's how we're going to use it so we'll just take this variable and we'll pass this in here yeah we are getting a recording on in this or i am recording this right now i'm just making sure the recording yeah it's still recording we're good so i'll upload it uh this is also in the course obviously too but uh okay so we have our context dictionary so we create the dictionary we pass it in so it's a third parameter in the render method let me know if you have any questions so now to actually use this in the template i can go into the projects template so let me close out my files here we'll go into project and let's actually just get rid of all of this so we'll say project and we'll just say i'll just add in an h1 tag and then we'll say name and pass in that variable so we'll just say name like that so now if i go into my template let's go into projects here so there we see there we see name is dennis ivanov if i change this to let's see back in the the views if i change this to john it would update it so we'll just do john really good picture praveen i like that actually so i'm guessing that's answering the template's questions so there we go that's our variables now what if i added in a name so let's write in some conditions so we'll just say or an age so we'll say age i am currently 27. so we'll pass in age here so it's just a dictionary we'll say age and then the value and let's just go ahead and output something so we'll just create an if statement so anytime we're creating an if statement we're just doing uh if and then we pass in the condition so we'll just say if age is greater than 27 and now we just have to create an end if so that's the weird part and if and now we're writing python-like logic in our templates so in here if age is 27 we'll say with a h5 tag here or h4 we'll say dennis is older than 27. i really want to know if this is useful to everyone because it's like i'm repeating what what i'm doing in the course i'm trying to elaborate this is where i love the questions because i can elaborate but if i if you feel like this is redundant let me know we wouldn't want to do something if uh if it wasn't valuable so right now my age is not over 27 uh so we're not seeing this so we're only going to output this if my age is over 27. so if i were to change the age to let's say i turn 30 here if i refresh it now we see it so let's continue this so we can write in an l if statement so we'll just say alif so python elif statement l if age is equal to 27 we'll just say dennis is 27. so just like that and then we can write our else statement so the l statement will just go right here we'll just do the two curly braces the percent symbol else and we'll just copy this right here and we'll say dennis is under 27. okay so let's try that so if i change the age to 27 let's see what we get there we go dennis is 27 if i change the age to 26 let's rewind back to 2020 and there we go dennis is under 27. so we have some conditions and now we want to loop through some data so what i'm going to do is get rid of all of this we have our variable we have our conditions our if else statements and now we want to create a for loop so what i'm going to do is take these projects we have this variable and we're just going to pass that into our context dictionary so i'll just remove all that let's just comment that out and we're just going to get rid of all this and i'm going to say projects and we'll pass in projects list so i pasted that in here that was from the github repo so you have the link here if you have the course you have full access to that that's in the resources folder so now to actually loop through this let's go ahead and create a table here so we'll create a table and we're going to create a table head in that table head we'll create table row now in that table row we want some table columns which are going to be header columns and we'll just say id and we'll create three columns here so we'll do id title and then description okay so to output this content dynamically now we're going to create a table body so t body close that up and what we want to do is on each iteration of the loop we're going to create a for statement so on each iteration we're going to create a new row so we'll just say for project and we can call this variable whatever whatever we want we can call it i so we can do four ion projects or four project in projects so we have access to projects because we passed them into our context dictionary which we got from this variable so we're going through this and we're simply just going to output these so and four and now what do we want to do on each iteration well we'll take that table row and we're going to create a row on each iteration now this right here is going to be a variable so we can actually pass that in here and access each one of these keys so we're going to access the id the title and the description so we'll just go ahead and create the variable that's double curly braces we'll pass in project so this is how we can output dynamic values so the project.title let's take this right here paste that in and we'll just do description let's make that a lowercase d okay so description was supposed to go here title's supposed to go here and that's supposed to be id so we just accessed each one of these three attributes on each iteration so now if i refresh this there we go so we can see that i'm a little bit zoomed in but we see the id row the title row and the description i'm not sure why everything's centered but that doesn't matter we're not worrying about html okay so that's a table header so that should be a table row or that column should be td inside of the rows so that's why i was bolded okay so unimportant stuff but we see it so what's the question no not a question i just wanted to add something with the if statements and with ginger i guess like everyone here could kind of like infer you could be like dennis mentioned very dynamic like for instance if you're building something like airbnb you could you know add the super host tag if you know they have a certain number of reviews so you can get really dynamic with the data that you're rendering with you know ginger syntax i mean that could be it could be just as basic as that is just all i wanted added yeah good point so let's uh let's think of an example let's actually try that so uh let's say let's say this was a let's just do let's create a attribute inside of this projects list and we'll say top rated and i'll just camel case that and we'll just create a true or false statement i really like that point so top rated this one will be true the portfolio website let's just say that sucked so it's not going to be top rated so we'll just say false here you need to add in a comma i'm really glad you brought that point up so i want to show you how to do that in a loop so that needs to be in quotes here just a dictionary and then whoops and then top rated for this next section let's also say true okay so now we have two projects that are top rated one that is not so i can go in here and i haven't thought this through but it should be pretty simple so what i could do is add in a true or false value or how about this anytime a project is top rated we'll just add in a little note here so let's just do this we'll just go into the title here or after the title we can write a condition directly in here so after this variable we'll create that if statement so we'll just say if project dot let's see project dot top rated so that's just a true or false value so if i just do project on top rated and that'll render it out based on the value of it so i can just do and if then i can just say top rated so we'll just create like a strong tag or something like that and typically this would be like a star or some kind of icon that you want to give this user and we'll just say top rated okay so let me refresh that so in this loop right here we check if a project's top rated so we just do if top rated which is true or false and then we have an end if statement if it's true we say top rated so it's a little note and typically that would look different in styling but if i refresh that let's go ahead and try that again looks like i'm getting an error okay top rated true something happened here that needs to be like that i thought that looked funny wait hold on what am i doing here no that's not right okay so i'm missing a comma right here yeah that's what it was okay i'll often do that in tutorials where i'm like oh that looked funny to me and i completely messed it up even more and just looked stupid okay so the beauty of it is i can cut it out okay top rated true i still left this one okay so that should get rid of those errors so now if i refresh this the page just broke so here we go this project is top rated this one is not this one is so just conditions inside of the actual loops here okay so we passed in data we went through conditions loops variables let's see what else were we going to cover here so the next one is to render a single project so what happens when we go to this project page so what i want to do is show you how to get a project from the database so before we actually move on to building the database which we'll do in the next section let's actually render a single project so when i go to this page i want to get a project by its id value and render that out here so in this case we're going to hard code this because we don't actually have any data yet in our database so we're just going to access this dictionary here and we're going to put that out into the template so what i want to do is create a variable and i'm going to call this project object i just don't want it to be the same name as the view so we'll just do project object and we're going to set that to none by default so it's just going to be a true or a none value if there's nothing there and we're just going to loop through the projects list so we'll just say 4i in project list so the list that we imported projects list let me fix that let's go ahead and find a value here so we'll just say if i and then we'll go into the id value so we're going into the attribute so if the id keep doing curly braces so if the id matches whatever we have in the pk value so whatever we pass into the url we're looking for a project that has this id so if we have it then we'll actually get it and i'm going to make that a string value because i believe the url is going to pass that as a string because that's how i set that data type and then we're just going to go ahead and say if the project id in this loop matches what we passed into the url here let me just separate this then let's just go ahead and set the project object to that specific instance of it so i so that's going to be the actual object that it finds here so we're just getting that value and something's off here so for i in projects list we check if the id matches what's in the url if it does then that's not going to be none so now i just need to pass this into the context dictionary and here i'll just do that just like this so we'll just do project and then we'll pass in the project object so we throw that in now if we have a project we can reference that in the template so in the template we'll go into singleproject.html and let's just do this let's take this h1 tag and let's just say project dot title so we're passing in data and then this is going to be project.description so inside of a variable here we'll do project dot description okay so let's try this so right now if i go to a value that doesn't exist so if i go to a project that has an id of four we don't have one here so it's not going to give me anything so if i refresh it right now we're passing this id in i see nothing but if i go into the value of three we get social network if i get two we get portfolio website and so on so what's happening here is we pass in the url which is passed into the urls.py file we have this dynamic value that we called pk then inside of the view we get that from this pk parameter so that's going to be one two three four whatever it is we go through the projects list and we find a project that has that id later on we'll actually make database queries but that's how we're gonna get it for now so does that make sense to everyone how we how we did that because we're about to move on to the next section just give me a thumbs up if that worked not if that worked but if that makes sense here if you're following along so let's close this out the templating engine so i guess we're done at this point do you all want to continue i guess this is where i really need your feedback i can go ahead and i can actually go into the next section i can go into building the database and rendering out some data from the database here so let me just open that up if you all have energy if you're not tired of this by this point we can move on if anything we can save this for a for next week we can do the stream then or maybe even later into this week i can't hear you abby i think i may have disconnected my audio or maybe no i'm not saying oh okay yeah no i'm here i just i'm just i'm muting myself that's all just waiting i see a couple people typing so i guess we'll okay we have one person that said next week um i think next week would be best yeah it looks like we got a lot of content from you cool all right so the recording at this point is going to be an hour and 50 minutes of content cool so we'll save it uh i really if you all have feedback in how i can do this i would love to see this in the general chat and this questions channel i really want to improve this my goal here is really to to soak in all this information and make sure you're all getting the most value out of this so questions that i can't answer in the course i don't want to just rebuild a course i really want to go back and forth with the audience so maybe if you have questions ahead of time send them to me i'll be going through the comment sections remember that in the course there is a chat here so if i go to framework a specific section here there is a comment section so i'm seeing people commenting we see i'm replying to people here so add something here later on the admins will be responsive in here too we'll add them to the project here but if i see stuff here i'll know what to address so yeah i really hope this was helpful we'll end it now i guess i'm getting a little bit a little bit tired here we'll start this next week and i'm even thinking about live streaming this on youtube and uh basically only letting the premium members anybody who bought the course interact here but we'll see we'll figure out how to do this but yeah any feedback would be great i'd absolutely love it thank you all for joining i'm going to end the recording we can keep chatting after but for now i'll end the recording unless somebody has a question specifically related i just want to say we do have one question that said um what is exactly the relationship between urls and views so i mean okay so i tried to explain that earlier but views and urls so what happens when someone goes to a specific view so that or sorry not view but urls or a url here so for example in this course you're seeing this route here it might be a little bit small but someone's going to dennis ivy.teachable.com four slash courses and then this route something needs to occur if we have no if we have nothing else we're just typing in a url and nothing happens so the relationship here is that a view is simply a function that tells the application it tells the server what to do when that endpoint is hit so the view is a function that that actually returns something so in our case we see we see uh we see a template rendered later on we'll have to query the database if we want to run a calculation let's say we're building out a social application or a social networking application uh the user will get back a feed so the view is basically like the business logic of what happens when a url is triggered now if you're coming from any other framework like flask or there was a node.js in express they have like these they're not decorators they just have functions that basically already associate the url in them like in node.js you do something like app.get and then you type in the url path so the function in the url are actually like configured together django does a really good job of separating our code into components so later on when we have all these urls here so let's say our page is gonna start looking like this that's the thing here we're gonna see our routes our url patterns get really busy the file here is not gonna include any of those functions we're not gonna have to build those indirectly so it keeps the page clean so i don't know if that answers your question um but they're associated with functions to trigger some kind of response for the user to see yeah let me know if that answered and i appreciate the comment too i i i think um okay cool yeah he said it answered that's good oh yeah i think in my opinion we should kind of close it off here and then we could answer questions through our chat and then throughout the next live streams that are down the line i guess cool alrighty sounds good i will end it i'll uh see everyone later then see you next week and uh just when you're talking to each other remind everyone that there is the stream i'm trying to send out an email but i also don't want to blast everybody's emails so yeah we'll go ahead and disconnect it take care thanks everyone thanks for coming out

Channel: Dennis Ivy

Views: 34,762

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: -qUoCBExAvY

Length: 88min 19sec (5299 seconds)

Published: Wed Jun 30 2021