Mastering Django: A Step-by-Step Guide to Building a Production-Ready Project

hey everyone it's Bobby from decoding here and today I'm going to show you how to build a Django app from the ground up that is completely production ready let's jump straight into it [Music] okay so this video will be relatively long compared to my previous videos it's because we are building from a blank canvas to the point where the Django app is quite literally ready to deploy so everything from starting up a project creating models views forms wiring up to a template everything so this website is for a local charity which is a preschool in a village where I live they've approached me to create this website so I want to show you how I go about working on a project such as this the very first thing you need to do is install and activate a virtual environment on your machine for this project the reason we do that is because we don't want to be installing things globally on our machine we want to keep them within the confines of this virtual environment it just means that we can install a whole bunch of stuff that is specific to our needs on this project okay the way we do that so let me just backtrack this into vs code I've got a new terminal open I've got a project on my machine called preschool you can see I've already got a directory in there called front end I have already purchased and downloaded a template it's a HTML based template from themeforest so we're not going to be designing any of the HTML CSS we will be doing some JavaScript but essentially you know this is straight out of a template it costs like 17 um and uh yeah it's it it just speeds things up right and it means that we've got a beautiful website and it costs relatively nothing pretty much nothing so that's why I've got a front-end um directory there right so virtual environment so we need to call python I'll go at about and it will install a virtual environment in the directory where the terminal is active you can see I'm active in users Bobby's development preschool right it's done that we've now got this file here to activate it on Windows you would you need to put v e and V Scripts yeah and then backslash activate keep doing that activate dot bat tip AIDS there you go my type into grade there you go so the reason I know this virtual environment is now active is because v e and V is in brackets on the left hand side there okay so what is clear on this CLS there we go so I've got an active virtual environment if I now go pip freeze show me everything that's already in there which is absolutely nothing so the first thing we need to do is install Django because Django is the web framework that will be using for this project so we need to go pip install Django they'll go ahead and that will use Pi Pi obviously the package manager to install Django into our virtual environment and only take a couple of seconds and as soon as it's gone ahead and done that it should allow me to put pit freeze and you can see that it's installed Django and a couple of other bits and pieces there we go so um hit freeze happy days so now we've got Django we can call Django or Django admin from our terminal because it's in our virtual environment so the first thing we need to do when starting a project is to call the start project command from Django admin Django Dash admin start project and we'll call this pre underscore School that has for words so what have we got we've now got do you know what I'm not going to do that delete I'm going to say same command will appear it at the end and there we go um now it's just the reason I've done that is because how it installed it previously it created directory within the directory then had another directory called preschool and it just got a bit Scrappy I wanted the directory setup to be like this so the preschool essentially the conf or configuration directory is in my root directory okay and then I've got a manage.py file in there as well okay so let's keep that clear so what we now need to do is to set up before we start creating applications we need to have a look at our settings and um configure it in a way that allows us to deploy to production so straight out of the box if we look in a preschool directory now this is our conf directory it comes within any dot py file nothing in there got an adski whiskey settings.py file and urls.py okay so that's straight out of the box we've then got on manage.py file this is the command that we would call Python manage.py and run a whole bunch of management commands that come out the box of Django such as create super user such as collect static things like that right so that comes straight out the box but that's great when you're working locally it gets a little bit Scrappy when you're trying to deploy to staging or a production environment so I set up my projects in a different kind of way so within preschool we will set up a new directory called comp and to make this work you do need to construct a file so we need a Dunder init file okay so that just tells python that it will instantiate this directory and then we'll have a new file in here called common dot py so this will be our base settings file we'll then have a development file a staging and a production file each of them will have different settings which becomes really really helpful when you're trying to deploy it saves having to have a whole bunch of if statements and things like that so if debug is true then you do this that way it's explicit and it just stops the risk of messing around with settings in different environments so we've got a common dot py file let's go ahead and copy all of our settings dump them in there so what I did down I looked at sentence.py which is here copied everything so Ctrl C control a sorry copied it and I pasted it in common so what we now do is we will have a new file in here called Dev death.py and one second I've got a couple of instances of vs code open on my machine here I did have one of them has my notes so throughout this video I will be referring to my notes because as much as I like to say I've got a great memory I do tend to forget certain things and it's not always ideal so what we do is we now need to inherit from oh man or a star so what we're doing there so from.com which is this file here we're importing everything so dev.py which would be our development settings We'll Inherit from everything in common and don't worry we'll mess around with the commonwe file soon we'll add some apps and middleware and everything else but we're just constructing the setup right so Dev copy change the name we'll call this stage I'll do it again and we'll call this Broad Okay so now all of them um the the settings files that come straight out of the box of Django are pointing to a settings.py file we need to change that okay because what we don't want to do is we look in a file that doesn't exist what we need to do is look at the new conf file so what we're going to do so I'm just gonna look at my notes Here we are going to change how the whiskey file manages this so this is whiskey.py py you see this is looking at preschool dot settings now what we want to change that to is preschool .com.dev okay you want to copy that paste that rename and this will be whiskey dot stage and Stage we want to be looking at the stage.py file and lastly create one for product now these are just things you want to do it now rather than messing around later it's you know for the sake of five minutes work it just saves us a lot messing around manage.py it's doing exactly the same as looking at settings file I can't dot Dev rename it's been manage.stage now when we when we move this to different environments what we do um we would just simply change the name of manage.stage to manage.py when it's in the environment now you can use any CI CD type tooling like Circle Ci or GitHub actions and packages to do that so you can just use scripts to copy over manage.frod.py over to your production environment and then change the name of that file that way it all fixes itself Okay so [Music] so did we change that no we didn't so in stage we want that to be staged not.p Watcher stage there and then in this one we want it to be prod Happy Days that's everything we're not using this ASCII file we no longer need the settings.py file delete that what's your URLs doing uh it's all good no worries there in it just double checking everything great so we need to save all of these because it looks like it didn't bother saving them no there isn't typical I thought I saved them all right let's close all of these down there's nothing worse than having everything open at the top there cool okay so that is our settings file that is our so now so what we've just done there is we have installed Django into our virtual environment we've started a project then before we went any further we just changed the way that Django configures everything so that this allows us to push the code to different environments in a much easier and Slicker way we've done it now we don't need to go back and change any of that it's good to go so what we now need to do is um create a requirements directory to do the same sort of thing so if we go in here you know hit freeze I'll give a list of everything we've got installed in our virtual environment we then go pick freeze tell the word freezer too we can go requirements Dot txt and that will save it into a file here called requirements.txt which is great but again we're going to have certain requirements in it for in in development that we don't need we don't want in production so what I tend to do is I create directory called requirements uh and then in there I have uh this is base Dot txt [Music] rename oh doing that it's not working rename that to stage rename that to prod again these are just little things that if you get it done now you just don't mess around at a later date so now if we change this command here and say um change that I want an s on that so requirements foreign txt should there we go we've now got it all added into our base.txt now what I didn't do is add this so at the top of the dev where it's we're basically um we're basing we're we're extending from base.txt that's a sensitive so we're going to add some common requirements we're going to have requirements that are specific to the environment so now um the requirements for Dev would be requirements slash dev.txt and anything that we put in here so it could be um pillow for instance pillow would only appear in the dev environment it wouldn't appear in broader stage okay that'll make a little bit more sense as we carry on with this tutorial okay right so that's the requirements done next thing we need is environment variables let's look at those so um what I tend to do is I tend to have a file in here called dot EnV okay so just be careful if you have ease and get we're not going to be prisoners to get in this tutorial but and the dot EnV files you should add it to a git ignore file because you don't want to be pushing your environment variables too get up all right so just pre-warn you there okay so how are we going to construct this so let's start with one first one nice and easy so we have this line here so it's bash file and then we use the syntax export space and then the variable in this case it's going to be debug and it's a Boolean so it's a one over zero or two on a false and this is equals one so in development we want to be in debug mode so Django when there's an error it will show in a year in a browser a um a URL not a URL a a UI of the error that's occurred it's really really helpful when debug is set to zero you won't get that you'll just be hitting 404s and 500s and things like that okay so debug is one of the environment variables that we'll be using so now if we go back into preschool and go into conf and go into common let's have a little look at this okay so you've got a whole bunch of gun for the top here I tend to delete all of this then we've got the base directory so what that's doing so base directory variable becomes kind of the root of of um what we're looking for here so at the minute it's set to parent.parent okay so that would have worked if we didn't create this comp file but because we've created a new layer of directories we need to go parent.parent dot parent you might forget to do that if you do forget to do that then don't worry too much you'll get the print out on the uh on the logs or in the terminal or if not in the uh in a browser itself Okay so we've got this here debug equals true so what we want to do my notes again where are we Okay so what we're going to do is in our Dev environment yeah this is specific to develop so we're going to go from dot EnV we'll install that in a second we want to load dot EnV and so this is python.amb I think it is and every time you want to install a package this is the Django docs by the way what you can do is you can go pip install python dot EnV I'm sure it's called that python.env there you go so this is Pi Pi this is a package manager this is where we install things from using pip so okay so when you install python on your local machine you get access to people pip3 um you can uh copy this this will install the latest version however if you need if you're using an oral version of Django or older version of python you might need to go through the release history and select the right version for that is compatible with your local environment this is why we have the virtual environment right so if you're working on 10 projects you might use one that's on Django 2.7 another one that's on 3.2 another one has some 4.0.1 just check out the release notes because not all of them are compatible okay so we'll copy this go back in here I've got a terminal again PIV install python.env now we'll freeze That Base always remember to do that because if you don't um if you close this down or install it on a different machine it just won't install all the correct packages we're going to requirements now you'll see that we've got python.env in it okay so all is good so we have we now have access in Dev to from.env you see that's now no longer got a problem with the uh the import I'm using visual studio code it isn't an IDE but it acts like one with the extensions so if you're using um Visual Studio code you've got extensions here just install a whole bunch of stuff that I've got all sorts of stuff in here Django Django templating python I've got Docker all sorts of stuff if you start installing really really popular packages it really helps you out when you're trying to code so um I won't go for the docs of python.inv but essentially you've got our import load dot EnV and then you need to call that function that way we have access to an EnV file in the root directory which is really really important okay and then we will go ahead and we will do this okay so we will say [Music] debug in this project is equals to [Music] we need to import OS it's a python package called operate system it allows us to access a whole bunch of um well OS is a really good library that allows us to access environment variables so we can say OS Dot and wire run get we call this debug okay so what's happening there we are now accessing this here if I was to change that to zero and then run the application debug would be turned off we want it turned on okay so that's all good the next thing we want to do is add a whole bunch of other envs so I'll go ahead and do that now so what we'll do is [Music] secret key equals and we will have this just as preschool by the secret key in production um actually in common you'll see what secret key is looking like so you know we've got all of this going on um which is which is fine you view something more secure than just a single word in production because we're in Dev it doesn't really matter providing we've got a something as a secret key that's what's used when we're creating passwords the hashing of passwords we use the secret key to to do that so um it's quite important that you have a much more you know a good secret key a good solid secret key production so what is it called a preschool no dramas there um we'll have Django allowed hosts in development we want localhost and the IPS 127.0.8.1 and just keep this all in now this is how we want to have it in export and I'll show you how to bring that into the settings it's written differently in here so a loud host is just an open list and in which case you would just manually add localhost in there but like I say this is a production ready um app that we're trying to build here so there we go we've got Django Hoster is there anything else that we need no no no no no no no no no no I don't think I think that's it so [Music] let's have a secret key and allowed hosts you need to learn slowly different way showed what that looks like there we go so allowed hosts again we're looking at Environ using the get method and we've got Django allowed hosts but in this case we're using the um so it comes through as a string so we're using a string method called dot split and we're looking for a space so this will create a list with each of them broken down by the spaces into a list sorry a list with localhost and netlab 127.0.1 in there so that's all good so now with common what we can do we can go ahead and we can delete the secret key we don't need that anymore don't need that actually what we'll do copy all of this drop that in prod and drop that in there as well so staging product now identical Dev and just making sure it's big enough for you to see we don't need allowed hosts anymore do is right um I normally create installed apps slightly different to this I like to break it down into Django installs third-party application installs and then project uh install apps okay so it just breaks it down it means it's a lot easier to read so we'll go ahead and do that so first of all copy that down so rather than installed apps I've got Django apps now you can see here we've got admin auth content types sessions messages then I've got static files but then we've got sitemaps and sites now the reason we've got sitemaps and sites is because when we deployed um it's good to have an XML sitemap for your for the SEO of your site so just add that in there straight away we will need it uh because we've added sites we're going to need a different variable in here as well don't worry about that but third-party apps don't worry about those for now some apps that we install using pip require us to add that third-party app into our installed apps for it to all activate and have access to the URLs and the models and things like that [Music] and then we have the last one is just called [Music] we'll be adding to that in a second now installed apps looks like this so installed apps still needs to be in our settings file but now installed apps is just joining three lists together to have like a Mothership of of lists okay so installed apps is now in there as we've added sites we need to add a variable in here called site ID default that to one okay that's exactly you need that when you're installed in Django contrib sites don't forget to do that what else have we got uh middleware we won't change that for now yes we will we will install package whilst we're messing around the settings called just Google Django debug toolbar super helpful there we go going to Pi Pi and if you copy that go into your terminal so I'm trying to make sure this is all big enough for you to see there we go we'll freeze that to base and then installed apps what we need is come on I need this in there so debug toolbar that means we can activate that in the project and we can then we now need to add some middleware so if you look at the Docks it tells you how to install right so um I'll read the docs just that install process what we got so install debug toolbar you need to make sure you've got static files you need a static URL we'll come to that in a second we need templates um with Aptos equals true so we need to make sure that this this is standard in a Django app but if you're using a notable version it might not be we need debug toolbar and installed apps which was just done and we then we need to add some bits to the URLs which we'll do and then lastly we need to add some middleware so we're going to add this middleware and it needs to be um is mostly implemented in the middleware add it to your middleware setting I normally add it right at the top I don't think it really matters it can go anywhere else let's take a look okay that's the middleware are you single you can use double but are you single okay so debug toolbar is now installed we will add some bits and pieces to the URLs comp file which is this one as per the docs but we'll do that in a second let's focus on the settings for now back to Common well we got the root URL conf used URLs that's pointed to this file here okay so that's where all of the URLs from applications will be channeled to the URLs conf file which is this one here that's how we get access to all the URLs in a project okay we're going to set this project up with um the normal Django syntax um is that with templates so HTML templates that are rendered and they fall within the applications in a certain format you need to have a directory called templates within that you need a directory called the same name as the application and then your templates I find that a little bit convoluted so I tend to create [Music] a directory called templates in the root directory so let's go ahead and create that now [Music] as well type there we go so now this does which is a keyword key value pair it's a list and then we name where that templates directory is so now templates as a directory it will be included when Django is searching for templates okay all of this is good um let's add a context processor so if you're new to Django when you render a page into a browser Django will create a context dictionary that is accessible in a way of variables in the HTML now we can add to that so we can make sure that context always has certain variables accessible which is really helpful if you have things like Facebook URLs or or contact emails and things like that rather than passing them through on a view I like to add that to the contact processor so it's accessible in every single template so let's go ahead and create one [Music] processor as a processors that I'm looking for that doesn't really matter what we'll do is we will create in here [Music] project context password request [Music] and we will have contacts equals dictionary turn contacts okay I'm just trying to see if there's anything fancy we need to do in there okay so what we can do is let's just add something in there my email [Music] okay so my email will now appear in the context in the browser and I can access it in the HTML when I'm wiring up the front end and my email will always be in there provide and I wire it up to the context processors in the templates variable in the settings that's right so templates variable was a list and in here we've got options we've got contact processors so now we need to tell context process is key value pair where to look for our content processor let's go ahead and find it here so I'll be called preschool dot context processor Pro so projects and so contact happy days so now we can keep adding to this it's really really helpful because if you just keep firing contact in certain views you can get a little bit complicated um I mean if using class based views you can pass them through in the way of like an abstract or um oop but essentially if it's something that needs to be accessed on every single page like a header or a footer context process is the way to go forward okay so where are we let's go back to Common okay with the application remember we um change this so preschool whiskey application what that's looking for is this one here okay so that is basically that's how we're handling the whiskey um and then we've got database so we will pick this up we'll drop that into Dev the reason I'm doing that is because when we use a different database in production of what we're using in development so in development Straight Out of the Box Django unity's um sqlite3 in production we can use MySQL postgres ql um a whole bunch of different kind of object orientated or relation relationship based databases SQL databases so but we're going to be using sqlite3 in development so we will dump that same configuration into production for now just like we've got a databases variable in there but when it comes to deploying let me close all these down stage when it comes to deploying we'll change that right so and the same goes for the next setting that I'm going to be looking at so don't worry about I've yet to change any of these auth password validators and only keep them pretty standard um let's change this to engb I'm in the UK I'm going to have time zone I'm not UTC I'm going to go London I saw Europe London and then keep the rest is true again change them as appropriate to yourself and I've got static URLs right okay we will be using static files in this project and there's a you I always set them up in the same way okay so I'm going to just drop in some static files static file stuff in here I'm going to delete that from common because we don't need it in there but we do need it in Dev production and staging okay I have it like this so you need the static files does dip a list and within there you then um detail where your static and media um directories are you need a static URL and a media URL variable and then you have to stipulate static route in a media room now I'm going to do a debug on static files but you need to get them set up correctly because this is how we do things like run the collect static command um this is how when we render a page in a browser this is how we find static files such as CSS JavaScript and this is how the website interacts with it so it's important that you do a little bit of a read up on what static files are all about how they work but this is my setup okay so we need static files does static URL media URL static group Media Group we set it up very very differently in production if we're going to be starting to wire up things like um digital ocean spaces or AWS buckets S3 buckets and things like that because what we you can use packages such as white noise to do it all in-app but I tend to wire up things like spaces like I say so we need to point the root directory to AWS or digital ocean spaces okay so but for the time being let's drop the same configuration in prod and Stage we'll worry about that later okay [Music] common uh and then as from was its Django I think it was 3.8 or 3.9 they introduced this default autofilled if you remove that I think it still works but it comes back with all sorts of warnings so don't worry about that so that is our settings file sorted we've now got a Dev settings file that extends from common and we've got this other stuff going on here such as the secret key debug allowed host that we have stored in our DOT EMV file which is there and the way you if you do add that to a git ignore file what I would do is I'll create an EnV template I would drop all of this in here and if I had something such as export let's say strike key what I would do I would just have add yours make that as a string add yourself right okay so when somebody blames down a repository on a local machine they know the first thing they need to do is to go through the ENB file or create a new DOT EnV file from EnV template and then change and add their own Keys into that file okay so that's what I would do but this isn't going to get just yet so okay what now what now what now so I've gone through settings um but we need right so we've just pointed our static files set up to these directories that don't exist so let's go ahead and create that right so new folder call it media new folder call it static okay now whilst we're doing the static files right you know I've downloaded the template with that template comes a whole bunch of assets okay um depends what you buy what you have created these can be constructed and go into a directory called assets followed by CSS fonts sometimes you don't have the assets directory and the CSS directory is in the root but I'm going to keep it exactly as is so I'm going to cut that no I'm not going to copy it and I'm going to drop that directly into my static directory I've just created okay that'll all means something soon enough so we've now got a media and a static directory um the a static group media root we call static files and media files if we were to run python manage.py collect static it would create those but we won't run that media and static are the roots they it will default to the route before it goes sorry it will default to the URLs which are the pass before it goes to the static group okay they're the setting files let's now look at the URL conf file so what are we doing here let's look right okay so what we need in here is ADD include after Euros par from Django doc I know this one these all the time oh still can't spell it though from django.com import FYI I've had a lot of comments on my YouTube channel that um copying from one screen to another doesn't really explain what we're trying to do my feedback and response to those messages always is that my typing is really poor but look I'm giving it a go so bear with me um so important settings so this URL com the URL patterns so straight out of the box we have this admin Euro so it'll be localhost Port 8000 slash admin uh takes you to the admin URL which comes straight out of the box of Django now you can change the url you can call it admin Dash page you can call it what you want but essentially Django will allow you or give you access to a built-in admin page which is really really good so the next thing we need to do is uh uh cards um handlers I'm just trying to like this as simple as possible okay right so we're going to leave that as no we're not we're going to add this [Music] I think that's it no we're not I'm gonna add this as well right okay so we don't want to stir do we so I I'm looking at another screen I do normally add let's go ahead and do it right okay so in here I normally add another one another variable in here called production the reason I have this is because debug is Boolean true or false now we can have uh three environments so in the staging environment you might want to have like a VPN access to it um so you can only only certain IPS can um access that environment but you want to still display a debug the debug from Django uh you definitely don't want to do that in production because it displays a whole bunch of sensitive information so um what we want is debug true but production zero would signify that they're staging does that make sense so debug one production zero is Dev debug one no actually right so debug um what am I trying to say here so production debug so what we want is always in production right now so it is for the starting static file so if the only time we want to be serving up our static files from the AWS bucket is if production is true that's why we've got it in there so it's one of those Legacy type uh variables that I don't do much with so in Dev here what we'll also do is We'll add [Music] add that there we will add that there so I've got a coffee here I'm going to do a marathon video about any Cuts so bear with me I need to keep hydrated there we go now good production there if we go back to the euro comp that will now make sense so setting stock production got access to that and what we're saying is adds to the URL patterns list and we will uh basically append or add to the list the static URL the static static group okay so that's how you need to construct it it can't find static because we haven't imported it yet as one of the Imports I needed to remember I can never remember it so let's go ahead and add that there okay so now we have the Euro conf working we've got settings working next thing we're going to look at is just looking at my notes is we've got debugging Happy Days that's it for now um I'll add logging but I'll do it I do logging um I'll add logging in a little while another one I'm doing it sorry this is a well thought our world planned out video so bear with me right so what are we doing here this is easy enough to add or do it now but if not well we'll do it later if there anything else I need to think about here no we're not we're not going to add login um thus now we're not gonna add login okay so this is like I said this is uh I'm doing a favor for a local charity so um I'm gonna get something live and then I'm gonna expand on it for instance they want to implement an e-commerce uh app later not straight away so I might do a second video to this which expands on this project adds e-commerce things like that and what I might then wire up is Sentry to do app Health um and make sure that login is wire wired up so if there's a 500 error I get notified things like that we won't be logging for now it is an important thing production but when you've got a very basic website it's not a necessity it's a nice to have big complex microsites logging is Paramount right um let's have a look what we got so this is all good right so if we now we've got a setting set up I've got envs everything's working there's not the app's not going to do much we might have an admin page but that's about it right so what we now need to do is uh we need to say python manage.py I never remember um we will make migrations if it works that's great no change is detected okay so what we're doing now make migrations so models so models in Django are a representation of a database table okay so if you create an app and create a model when you make migrations it stages those changes into a migration file when you run manage.py migrate it then migrates those migration files to the database it's kind of a two-step process whoa whoa okay there we go we're going through and you can see by migrating it might get a bit bigger by migrating um there's a whole bunch of tables um models that come built into Django so their authentication so you get a user model that's straight out of the box we'll have a look at that shall we um yes let's go ahead and go python manage.py run server that should work there we go now this was saying the server is running locally okay so we're now going to a browser go to localhost 8000 because that is in the allowed hosts there is no home page we haven't got like URL wired up but what we do have is admin forward slash admin I'll take you to here [Music] okay toggle theme dark theme light dark oh dear that's not looking good well ah that might be because I'm not incognito so basically uh CSS is already cached from some other project that I'm working on let's have a look is this gonna there we go happy days but Okay so we've got light dark that's obviously so that's a new version of Django in the old version you didn't have like dark so the old version just the CSS won't work so gonna Incognito which is control alt n it will give you a completely blank slate and it will load all CSS from the static files okay if we go back in here actually by running the server and getting it all config I know it's just coming from the app don't worry about that it's if you collect static it'll be in it right let's go back in here no we won't what we need to do first is need a new terminal environment is running we need to create a super user python manage.py create super user what I'll do it'll ask you for a username probably a big D part don't worry about email banging a password happy days will create a super user now we can sign in sign in with the same username and password you just created with brilliant this is the admin page right it's the reason I wanted to show you this is because within we've added sites into the installed apps um but even if we didn't do that the other installed apps that you should and always use brings in a groups model and a user's model so if I clicking users I've just created this user Bobby right so I've used that from the CLI so python manage.py create super user however you can create it directly in the UI that's what I really love about Django right so we can call Bobby two so you don't need to do it from the CLI you can once you've signed in you don't need email active so you can give them staff and super user um statuses it's active is really good because if your Market is inactive when it's created you can then send an email verification link when I click it it activates the account so it's really helpful so we're going to click save we'll have another one in it called Bobby two the sites is great if you're using multiple sites right so we're not but we've got sites included uh uh you need it for General toolbar uh toolbar debug toolbar you will need to change this just call it localhost 8000. that's it okay so the the Project's working the fact that we're looking on here says that the project is working everything's installed we've got no errors the configuration is good so let's go ahead and create our first app the way you do that is in here you go python manage.py you don't need to call Django admin anymore because Django is already running we've already got it installed the application's there so now we can just call Python and then we point it towards the file we want to use as the manager and then we use the command in this case it's start app and why is it one word it's probably one word start app give it a name we're going to call this core so give me a bit of background about this this project um it's a website She's gonna have a home page and about us page they want to publish events um so we're going to need to capture events in a model they need they've got a whole bunch of policies they're working with children they have Charities so they've got terms of conditions privacy policy gdpr working with children loads of policies so we're going to need a policy all of these I mean you could create different apps so an Events app cause app thinker I'm going to bundle it all into one app because I don't see there being that many different database tables so I'm going to call it core okay Center we now have a core app here you need to go back in a debt uh sorry common and if you remember in the common settings file we have the installed apps right remember we've got this one called apps [Music] cool [Music] okay good what we're going to do in court is we're going to create a new file so let's look at this right so cool come do a whole bunch of stuff right migration files nothing in there other than a Constructor got a construct file in the main core app the admin.py that's where you tell Django what to render in the admin page apps this is where you can I mean this is just a general config of the app itself but this is where you can wire up things like signals got models models are a representation of a database table test.pui and you've got views um we need a URL file so new file [Music] what we're going to do in here these will be the URLs specific to the cause app the reason I do that is because rather than having them all listed in the URL comp file it means that we can specify URLs to that that they live in it's really really helpful so if I just look at what I've done somewhere else so from Django dot Euros input path older versions you'll be important URL re path and things like that but we use path from dot import view so we're importing everything from the views file and then we want to give it an app name equals call and then we want a URL patterns there's a list okay that's it for now give it a bit of space save that now we want to wire up that to our URL comms file in preschool which is in here so underneath admin what we want to do is add where is it where is it where is it where is it there we go copy I'm going to stick it above debug so path I mean you could what you could do is you could have call so everything in the core app is prepended with so it'd be localhost 8000 core home call about and that's what's really helpful by having them kind of encapsulated in an application but we won't do that we're just going to put this blank so for the home page it will be localhost 8000 home or nothing at all if it's about it'd be forward slash about so on and so forth so that's all wired up so all the URLs within the cores app now will work bang on what we want to do now is when creating a sorry I'm getting notifications to find Center sorry about that I had um a couple of bits of needed to do so yeah one we've created the application which is all good the URLs are good to go so now we need to look at the application and uh work through it in order so that all makes sense the first thing I always look at is models okay so I create my database tables first because we'll be importing those into the admin directory we'll be importing them into forms we'll be important interviews okay so I always start with models first let's go ahead and do it now the app does come with a models file what we want is a new file in here a new directory called models you need a Constructor in there called in it dot p y and then we have a file for each model now I always do this I find it you know I used to do it slightly different I used to just have the models.py file and have a whole bunch of stuff going on swings around about says um you know arguments one way or the other but I like to have a file specific to the the model itself just makes it easier to import you know you can remember different things uh better I just find it easier okay that's that's why so we've got a whole bunch of privacy policies to store in a database we've got a whole bunch of events we've got a whole bunch of we we want a way of rendering team members into the website so team members come and go so really really good to get them into the database rather than changing HTML so we'll have a team model as well what else maybe frequently asked questions would be handy um so you can keep adding what you want to do is prevent the need for the customer to keep on coming back to the developer to change things and help things in the HTML it's just slow and flunking you've got to do rebuilds and things like that instead if we build a database table and make a responsive website the user can self-service they can access the admin page add a team member deactivate one happy days all is good so that's what we're going to do okay so we're going to create a file in here and we're going to call this 300 models stop contact a new file [Music] we're gonna have a contact form in the website so that contact form when somebody uses it um it will put an entry into the database and that way we have a record of it who it was when it was and you can track when we get back to them do some analytics on that so we'll have a contact model okay so I'm just going to look at my other screen ads to make sure that we're all good so first things first from django.db input models that's what we'll be using to um that's what that's the the application in Django that allows us to create the models and we have access to the fields we have access to so foreign keys and integer builds and Float fields and things like that but also we can you know got access to functions such as what to do with a foreign key when a linked object is deleted such as Cascade or setting on okay so that's the main models um app in Django that we'll be using what else do we want let's go ahead and create a class so class contacts and models Dot model okay okay okay let me let's add some bits of all right okay let's get a class in here meta Percy name plural is that right equals there they go so um email contacts call it contact our website that's how it's going to be rendered in the um the admin page okay so what we're going to do I'm going to save that quickly I'm not going to do any migrations because one of the things that I like to do especially in production type out rather than these tutorials when we create a model instance um it will um you have an ID field and a PK field primary key field in the database and if you don't set it to a uuid it will default just to an integer which is fine but I like to use uuids and we're going to use that same concept on all models so it stands the reason it will probably be better off creating a class to inherit from that will have the EU ID so let's go ahead and do that let's add a directory in here called utils but now we'll have a Constructor [Music] okay and in here we will have and we've done it in here the utils copy it across um right so we're gonna have one in here new file I'm gonna call it model Dot py and I will paste this to apologize but beer forever otherwise so from django.db import models okay and again this one's going to be called model and it's going to inherit from Models dot model so okay that's the same what we've done for the contact class we will use this in every DB entry so ID field is going to be in models.uid field okay ID the primary key it's true default is uuid Dot uuid4 okay so we're not gonna have you can tell I've copy paste to this it's absolutely fine so essentially um especially in production I normally add on the um the bossy the um the translation so you use the underscore and it will translate the the names not essential I mean um it's not the end of the world at all um but I'll keep it in essays messing around so now we've got access to a model called uh model that will inherit in all of our models that we now create which will have an ID field which is actually a uuid class meta abstract equals true that means that we can now inherit from this model so we'll go ahead and do that so how do we do it kind of models from chat we still need import models but now we can say from utils Dot mob model import model okay and now if I use model instead of um if I use model instead of models.model it will be uuid instead of an ID another thing I like to use is something called Django extensions let's go ahead and have a look [Music] um the Django insta extension gives it up access to a whole bunch of stuff it gives us access to a load of abstract fields for our models such as an activator model that we can inherit from and it will give us a status of inactive active which is really really helpful um you have managers that allow us to then call that model so it'll be contact Dot objects.active and that will filter out all of the inactive instances which is really good for query sets so what we'll do we'll install pip install Django extensions yeah go back in here don't want to break the server pip install did you see that you probably did okay and then we will [Music] that's not liking that so pit threes [Music] requirements base Dot txt that should have worked but okay let me CLS and what we need to do is go back into our preschool amount of conf kind of comment and we now need to add I think it's called [Music] so you can go understall underscore extensions just don't check I think that's what you need to do yeah there you go Happy Days and that will now be accessible but we remember we need to go um python manage you might not need to do this but let's do it anyway make we're not forget that forget that we're not gonna do that close save let's go back into core Gunner models and go contact and now we can do is we can say from Django extensions I mean dot models import activator models no it's not it's all about that we've got some docs here I've read the docs before um read the docks there we go and model extensions there we go right okay so we've got an activated model so um there we go that's what we want Django extensions dot DB dot models so these are the these are the um abstract models that they have so you have activator model you have a timestamp model as well so if you look at the docs this will give us access to the activate model would give us access to a status activation date and the deactivation date field in our database can you see that okay probably not there you go then we have a Time stamped model will give us a created date time field and a modified date time field as well you've got other things as well such as timestamp no you've got a title slug description model really really good if you're using slug Fields things like blogs so we will use that actually when we create a blog object or blog model so that's foreign model time stamp model and then what we can have in here is so what do we want we want the former contact we want to collect their name the email number and a message probably let's go with that so we need the name Char field there we go I think you need to have a keyword argument called max length and we'll have that as 255 we won't put blank now that's fine so name email equals models.email field max length 255 um telephone number telephone will do telephone equals models dots and have that as a Char field as well max length Plus 20. and then we'll have message equals models have that as text field I don't think you need a max length on text field although we will have One max length seven thousand [Music] I think that's it let's go ahead and make migrations [Music] [Music] uh right now that's why okay sorry sorry sorry what we need to do is go in the Constructor from record models import contacts contact and then in here we don't need a [Music] contact that's it so I didn't have it in my init file um so Django is saying you haven't got anything to migrate but now we've added that it will but it's saying cannot import name contact from partially uh initialize module core dot models most likely due to a circular import ah report [Music] models.contacts import contact that's a good one you're gonna get a lot less CLS [Music] um there we go right so it's creating a migration file if we're going to migrations now it'll be in there so what is it doing it's creating this class migration uh it's and this Django builds us straight out of the box right so you don't have to do anything with it so although we've only got the name email telephone and message field by adding those inherited classes we have ID which is now uuid field which is great we have a created modified status activated date deactivated date so a couple of lines of code we get a whole bunch of fields and all set up lovely jubbly in the database which is what we want python manage.py migrate will commit it to the database okay now if what we do is create a new directory in here called admin new file which is init.py [Music] what I do I'm going to copy all of that across to admin just change it to admin save that then in here add a file called contacts.by oh foreign import admin code models.contact import contact which we just created and we for this admin is a we can use it as a decorator right so admin.register we can register the contact model and in the past we wrap up this class with that decorator so it's contact admin admin dot model admin which is pretty standard when you're registering an admin a model to admin this is kind of how you do it and then we have a list display so we're going to have ID name message email we could have telephone as well [Music] okay and that should now like that yeah the reason I'll sound a bit of a pie is because contact wasn't in there but now that is registered so provide them our server is still running which it is we update this page there you go um but it's not showing in contacts I know why Okay so we've created this admin directory right happy date but what we haven't done is deleted where is it where is it where is it where is it where is it we haven't deleted this one okay so now Jagger's having a bit of a Barney doesn't know which one to look for oh come on that should be in there core uh um there's something I've done wrong here contact models admin init file contact admin that's what I was doing wrong so I was passing through the contact model not the contact admin class which is what we wanted foreign one second yeah the reason that then works because the um I needed to stop the server restart the server for some reason uh so now we've got the core app included in our Django admin and even we have the bossy name plural it says contact via website okay we haven't got any okay but what we do we'll just create one all right there we go okay now we've got a message um test right so finally I'll save this you see the ID is this if we didn't have the EU ID it'd just be one and two and three which is not ideal really um so yeah this is what when somebody uses the contact form on the website this is what we're looking to see okay so that is contacts let's go back in to our app here what else do we need to create we need to create um a policy so rather than re-typing everything out look let's go policy I'm gonna call this policy we're going to say call this policies now on this one what we want is so again trying to sort of support we were saying earlier about self-serving um policies um we want them to be displayed more than just a paragraph We need headings and paragraphs and this can be facilitated with something called a rich text editor now what I normally use is CK editor so we'll get that installed and we'll create a rich text editor field instead of something like a text field a models.txt field so let's go ahead and do that Rich Text Editor Rich text [Music] um no that is not what we want we want CK it could be CK editor yes that's the one okay back into the project back in here we'll go install oh we could just dump it in there CK editor Django CK editor and have you got the freeze command here somewhere there we go right so if we go back into requirements looking base you can see now we've got uh Django CK editor there um going to the docs it tells you how to install it so CK editor we need a base class no we don't need any of that so we need CK editor in our stalled apps so we'll go ahead and add that call preschool con common that down here great what else do we need fun collect static this will copy static CK editor requirements over to static route we won't run the collect static command just yet but we do need to add some bits to the URL conf so we'll go ahead and do that and check my other screen hmm looks like that's it so we will go ahead and add a rich text field to this model contacts no we won't it will go into so bear with me right so we have got this here that's what I was looking for cool go back into models go back into policy so we've now got access because we've got CK editor Dot Fields we've got a rich text field here so we will have we will have the title slug description model [Music] we'll also have a no we won't inherit which text so this will give us a title a description and it'll also give us a slug field which for a policy is bang on but the description field is just a text field so I won't use that but it's um it's defaults to blank equals true and null equals true so you don't need to use the description field but the title field you do which means it will be so the privacy policy will be accessible with localhost 8000 slash policy slash privacy Dash policy as the slug which is what we want so we've got a title so we don't need the name um we've got the activator we've got the creation date and all that kind of stuff so really all we need is the um what I'd call it body and I think you just had it like that let me yeah and I say just over which text field you don't need anything else other than that okay body so that's your policies do exactly the same for blog [Music] okay is that what we're doing is we're changing this the blog [Music] what else do we need so we've got a contact form policies we've got a Blog what else do we need team so for team we're going to want names which could be title description of the person we need an image we can add the images later um yeah let's do it let's do it based on this [Music] team members I don't think we need a rich text on that so I won't have one okay what we now need to do is bring them all in okay so we can have um log policy team I've forgotten events haven't I team vlog policy team oh there we go yeah plug team but remember I forgot the event so that's copy that rename pull that event call that event [Music] our events there we go foreign and lastly drop it in there you won't regret setting your project up like this I mean sometimes a little bit of pain in the ass but when you get used to it um I think it's just a lot cleaner and easier to understand so let's go ahead and um make those migrations I've already written it in here somewhere there you go make migrations where is that my great there we go cool so we go back into the browser go back in here we haven't got it in there but of course it's 9x we haven't added it to admin so we need to go ahead and do that contact what we do call this rename a team that's what I like about uh text editors you haven't got to do all the typing it kind of knows what you're trying to do call this team register oh register team admin set up ID title that'll do all of them all of the objects I've just created all the models I've just created have all got an ID in the title so we can quite literally now copy team we can call this one uh blog obviously we need to then change this to blog and log rename to events thanks and there we go and what was the other one my memory is terrible blog content event policy there you go policy change that policy Everwood titles which is all cool right so now we need to just bring them into the Constructor here oh [Music] no we don't contact we want it then [Music] policy and team lastly everyone log admin the Ben admin policy admin team admin [Music] great so we now make sure that the um server has reset itself because it won't show up otherwise it should do there we go cool so we now got them all in there so we've got blogs contacts our events policies and team members we're going to policy and just open it up we should have a rich text editor which is what we want this is a text field this is a rich text editor which means we get access to things like block bold right so you can then turn it off it's sort of you know Word document Google doc type thing got Styles italic all sorts of stuff and that is providing you the safe filter in a template that will render exactly like that in the template which is really really helpful so um title let's call this privacy policy and what Django would do at the snake hates that so it'll be privacy Dash policy all under um or lowercase and that will become a slug for the URL it's really been helpful save there we go privacy policy so when we go to the right URL it'll be good right so that's our models it's all wired up to admin so now what we need to do is create the views and then wire up the um the URLs okay but okay so my other laptops uh thing anyway so okay Thunder models done the admin let's go ahead and look at some views okay so what we want to do again like the models and admin so now if we minimize them we've got a views file but in keeping with the rest of the projects let's go ahead and create a directory called views within that we will have a Constructor file and we need a view for each of the models we need a few right so let's go ahead we want a home page let's go ahead and wire that up oh we don't want a new folder I'm not doing there right so new file we'll call this home Dot py we're going to have a home page with e called could call it index um we will have an about us page we will have a rename we'll have a policies page so that'll be a list View rename another policy page so we'll be using the generic views built into Django which means you can get a whole lot of functionality of only a few lines of code I love them we want a contact page um probably an events page screen in between lists event page which would be a detail page foreign [Music] there might be some other bits and pieces but basically they are the URLs going to be wiring up okay so let's start the home page home and again I know I said I'm going to do a lot of typing but it's not good my typing's really really poor use uh so I've got a home page here so let's go and so from the import we want to import from Django they have Django has a whole bunch of generic views um let me show you where they are I've got a virtual environment I can show you quickly so go v e and V going to lib going to Django you're going to go into that views directory which is more important from going to generic we then have a whole bunch of bits and pieces if you go into init the instantiator file a Constructor file we have what we got here that right one we want to look at base context so that's where we've got View we've got find detail View there we go detailed view so the okay so it's important detail of you um from uh detail okay sorry I should have probably just seen that okay detail that's single object this is the base detail view but what we what importing or what we will import is this one here so that's the d That's the detail through so it'd be um we inherit in the class The class-based View will be inheriting generic dot detail view or generic dot generic view or sorry template view so there's a whole bunch of views but I'll go through each of them uh with you now so generic let's copy this across where are we foreign view generic dot template view which gives us a get request context uh get template there's a whole bunch of methods that we inherit from now but what you do need to put in a template view is where the template lives we haven't created this um we will in a second but we need to create a directory called core in our templates directory and a file in there called index so we'll go ahead and do that so that the home view will work before we do that that's that's add in here from code.use um dot home import home View [Music] the list again we now need to wire up that view into our URL so make sure I've got this all right before I make another mistake so it will be path this is our home view so there is no kind of it's not a slash about or anything like that so it's it's this will be localhost 8000. so with all the important views as you can see on line two on a home view is a class based view so we need to say add View and then we put name equals call this home now we can reference this in url text when a template would be URL cool home that's essentially what this is that's how we reference this URL by name in the templates okay that URL will now work but it will come up with an error let me just show you we'll come over now because you can't find the template as if this is all working well template does not exist it's not even showing there we go that's what I was looking for so this is what Django has I mean it looks a little bit scary but actually it gives you a whole bunch of information that I'll just debug stuff straight at the top template does not exist it cannot find a template to render so let's go ahead and make that so I've got templates new folder called his core and within core we will add a new file called index.html and we will just have a H1 tag hello did coding now that way like it because whenever you mess around with templates Django takes a second R2 to do anything so you can crash out your run server run it again and give it another kick there we go hello to coding Happy Days it works found a template this is all good so before we start wiring up the front end completely let's go ahead and just wire up the other views quickly and close all these down and have a habit doing that so that's the and we'll delete that don't need that anymore views I've got the home View copy that let's have the about View about is a template view as well obviously called about cool a bounce well so we got contact that we have form View policies policies okay right so let's go and do the policy to you then so we also now need to import with imported generic now we need to import the model policy okay and we can just use list okay so class base for you generic list view so list view um Django will uh so that view comes with get uh it's got a get context data it's got a get query set so the get query set will be um based on the pagination so we're saying that in the list view find based on the get query set show the first 10 results okay so um what we need to do is we need to overwrite the query set um because we need to add things like the activator model so we don't want to show policies that are inactive otherwise it would just be a generic show the first 10 then the next 10 in the patch Nation so what we can do is we can use this okay so uh that doesn't light enough because of my tab doesn't like that because my tab which you know what here we go all sorts of fun okay so self model so the model is the policy objects active remember Django extensions we have access to active in the objects so in the manager of the object so that will filter out all inactive policies we want to order by The Creation Day of the policy so we want in this case it's um descending so it'll be oldest to newest sending now it will be newest oldest okay so the query set will now be the newest to oldest policies that are active that's what we're trying to do everything else I don't need anything else in there that's all good so we want that for all of the views that have lists so we want events foreign a lot of repetition here but um say it's a little repetition it's minimal code here um but a lot of the views are very very similar now you could spend the time on doing like a um a class that you can then inherit from but we won't do that blogs so we want blog make sure we've got a log is that right because all of these models have an activator model uh it works really really well Okay so we've got blogs policies got events I think that's that we now need a detail view okay so in let's do blog first in blog [Music] a thing here vlog every day is right so this is a detailed View for the blog I'll call blog so It'll point to the right thing and we're also looking at core block so that tells the view where to find the template we don't need pagination in this because it's bringing back one now by default Django in a detail view will be looking at the ID but we're passing for a slug so we need to change the method get object okay so we will dump this in here so this is the get object method that we're inheriting from we're now changing it so rather than get the object by its ID we're saying I get it from a slug and we will pass through this slug in the URL so we need to make sure that we do that in the URL when we configure it but that's it that's all we need to do we'll do that for event because event is also a detailed page right change them quickly in the case right there we go Happy Days and also do it for policy which is also another detail page I'm doing control h to find replace um this is really helpful make sure you get your capitals right there we go so now we've got about done blog blogs you haven't got contact yet we've done events event home policies policy just contact left so the contacts will be a form View I want to just make sure I do this right because I don't want to complicate it what we do first is a form so let's do that view now we'll do it now because we're looking at views so let's add a folder called forms so if forming Django handles all of the um Logic for posting data to a view um you have things like validation in there um you know if valid then it would do something you can add methods to the form so that you can really handle it in view so a lot of the logic occurs in the form of an interview so you can just say if post do something if whatever so um let's go ahead and create a new file called Contact from the monster from inside import contact form just so I don't forget to do it from platforms [Music] contact form we don't have that yet we will add oh I know I'm putting under on file there we go copy there we go we don't want that so let's go ahead and build this what we got contacts spawns content so from Django import forms okay we're going to need that um in the same way we have Django DB models model forms is the um the app that handles all the form logic so what we got what so we want to bring in a contact model because this will be a model form and then we're going to create the form itself I've done it very differently in this but we've got this form probably might work because the the project I'm copying is from uses Ajax when I'm going to be doing Ajax submissions in this um so what have we got we've got a message so we now need a field for each of the main model field so we've got a name phone email message so we need a feel free to the starting message just because I've got it handy so message field in so we're kind of linking the field in the form to the field in the model that's what we're trying to do is so forms.char field so this is a thousand if you remember we set it to a thousand in the model required false I'm going to put that through because we want a message each time that's why you're sending us a message then widgets forms text area so this is what renders the um the design in a web page okay we'll also have a class meta before we do the others [Music] it's where you point it to the contact model um have I'm not gonna have all the fields because there's a whole bunch of filters in there we don't need [Music] telephone I think [Music] the telephone looking models contacts it is it's called telephone okay so now we need some other fields so it's going to fetch them from my other screen email field here okay yeah cool get that so he's been typing it out so yeah from his name so two by four that's the same as the model this is an email input faceholder is email now this is what these are the uh attributes in HTML that we're going to add to the input to make sure that the input is exactly what we need it to be uh we then have a name I believe name field there we go I've got that here is 16. I think I've changed it in there I've changed it in models I did 254. I actually emails two five five so let's just do that quickly so email is I think that needs to be true so one of them all is true and lastly we've got telephone as well yeah what this here will be called telephone and that one here is called phone number so telephone required that can be false phone number off or complete off that's that that's the form done okay so we've created some Fields um you wouldn't necessarily need to construct these it would default in Django to to probably the correct one um but this allows us to add things like the class so it'll be the form control which is quite handy um if in template your purchased from themeforest or another company uh you might have specific classes that you can add in this form as well which is really really helpful um from I don't like it sorry wrong let's relax I didn't need that contact form there we go boom is now there available and we can add that to our view that we're now going to mess around with which is contact so go to contacts content View or import generic again once more we want to say from core dot models and for contacts the model we're going to be linking it to uh we want four foreign just created and then we want to make sure I haven't got any hand over stuff I don't know about like this right so forget that we capture mixing we're not going to usually capture just yet I'll mess around with that later probably outside of this video but this is so this is a full view okay so for our contact page call contact call contact contact form success hero you need to have the success URL this is what because we're not going to be using Ajax in this form submission that is where the user will be redirected to when I submit a successful form so that's it that's all I need informed you so they are all good we need them in the init file uh all right okay do you know I'm gonna pause it and get these in here okay right so you don't really need to see that I've added a whole bunch of them here oh it looks like I haven't got policy in that I've got um policy policy View there we go right okay so that's just a little repetitive stuff you didn't really need to see me do so creative use you see I've also created this team view as well I forgot about that um and then I've gone ahead and I've added one into my init file there Dunder init file so they're now accessible in the URLs um and we can go ahead and create these parts so um let me consult my other projects I think it's I think we do there so we go about with a backslash call it the about View yeah but it won't likes we haven't got a comment there okay so and call it about yeah always have the comma the trailing comma well we got them we've got a bow we've got um contacts on sax contact now we've got the um um blogs logs View blogs sorry all right see what I'm doing here I'll get all of the list views here so that would be events oh events uh We've also got team thank you seeing you as we got we've got the policy viewers all right [Music] policies view policies View and policy policies right they're all the uh list views so now I want to do a detail view now why the reason we need to pay special attention to this is because it's a a detail view so we need to pass for a slug okay and I can never remember the Syntax for this so I'm gonna click on here you do this okay so it's a string that's been passed through and the name is Slug okay and this is what we're looking for in the view so if we're looking blog what we're looking for is the slug has been passed through so it's called slug okay so slug equal slug that's how it's working right so detailed you is expecting a keyword is though it's not in here which way you don't normally put it in the init file uh sorry init method um and pass it through as a keyword but it's already expecting it so we're expecting a slug to be passed and that is how we do it so we'll do the detailed views for each of these sorry that's good I haven't do that vents team oh no we don't have a team we're not having an individual team page but we will have a policy page plug for you and I say events policy View and and policy I think that's it yeah I think that's it for now so the Euros work will be if I try to it's not liking that so if you look at my channel I just noticed my terminals crashed so let's run it again I was not liking that so from forms.contact import contact form foreign forms so uh you'll get a lot of that even I do so again this should now work I'll go to forward slash about the URL will be picked up but it won't be able to find a template there you go because we haven't got it so um what we need to do I'm not I'm going to avoid creating a whole bunch of templates right now because at the end of the day uh we need to do a whole bunch of stuff to that so I think if there's anything else needed in the back end for now I don't think there is I think that is basically it for the back end for now um let's wire up one of the tomorrow at the front end shall we okay templates so in templates let's have a new folder call this base okay and within base we will have a new file called base dot HTML what we're going to do is we're going to copy the index page from the front end template and drop it in a base and I'm going to carve it up and use template tags such as include blocks and things like that so show you what I'm going to do so we find index controller control C drop that in base okay bass isn't being used in any of the templates don't worry about that um what we'll then do is we will create we'll keep indexing there for now yeah we will and we would also copy over now we won't we're going to keep we'll look at base right so what we're going to do the first thing we're going to do in Django templating uh first line above this DOT type we want to always load static that gives us access to the static files being served to the site which is really really important because we need to um we need to um input we need to find the static files right so for instance if I just copy all of this dump that into index and then have a look at doesn't like that keep an eye if you're always wondering what's going on have a look at your terminal because if the service crashed out you're gonna have all sorts of problems so I'll just keep that again so I now go back into home it's going to come up with a Barney right so it's looking at the um index HTML but it just doesn't do anything because if you're going to the inspect panel looking console it's not loading anything it's not loading any resources 404 can't find because Django can't find the static files so we need to change that it's a really really easy way of doing it go back in here we're going to base first and foremost if you remember in static we added this assets file okay so it's looking for the right file it's just we now need to point it to the assets file in our static directory so what I do is I highlight this area here control h in vs code and what you want to do is change it to quote curly brackets percentage static because we're loading static and then single quote and we want to then put because we're changing assets so we now want to put it again so I want to say we're just changing the syntax of the current import href so assets then forward slash so we're changing that to this it's 104 occurrences Bang then we look for DOT CSS dot CSS single quote percentage squiggly brackets double quote okay so what we're doing this has just changed so what was asset CSS bootstrap Min CSS is now Django ready type syntax now I do know that it's going to be JavaScript so if you look for JavaScript it appears eight times change that to JS look we've already changed all this funky bit at the front probably going to be a bunch of pngs there we go there's 82 of them what about jpeg gpg jpg there we go three of them uh SVG no MP4 well we're probably right okay so we're probably good to go now so what have we got um title what we got what have we got so so this is HTML this is the head section all right so we'll be adding some bits and pieces to this but this is all the CSS that it needs to load to render face the index page that we want to see on the screen so we're loading the CSS correctly it's looking for a favicon which is a PNG file so we'll change that to something that we we want um we've got a preloader which is pretty normal stuff then what we've got is a header that we've got a login model okay fine we'll leave that as it is we've got a search box so just have a little look at the actual template to see what's going on childcare slider feature section do you know what I'm going to cut copy all of that to index let's see if I can sort of work out what's going on should spring into life there we go there's the loader okay happy days this is the page we're going to be loading right so it is a preschool uh this is a template preschool template which is really handy means we haven't got to do much design work um so if we're going to inspect all of these sections about about different elements right so um this here for instance click on that where are we that's part of the header okay so click on this bit here or so where are we where are we click on this bit that's this part here okay so it looks like we're looking for everything over Child Care slider okay so the childcare slider is this bit here and we've got everything underneath so that then becomes the index page everything above that is um the head the navigation the loader and things like that footer is underneath it so where are we we've got the load over there so this child care slider foreign [Music] block okay so that means we can now pick up all of this minimize it it'll be a lot easier minimize your features these are all little sections and sort of Edge program so let's keep minimizing until we find something that resembles a footer and add a logo section yeah okay section block two there we go foot section so we don't want any of that in the base HTML you want to copy that I'm going to drag that I'm gonna bang that in there so that's now our home what we want to do the first template tag we want in here is extends [Music] uh base slash base dot HTML okay so this so the base is kind of the scaffold with all the CSS and JavaScript and then what we do is just have all of the page specific elements encapsulated within blocks so if you remember this was all a block called content so [Music] call this block content now the bottom end block so what I'll do that would then spit that whole block into the extend T HTML does that make sense so this base no longer has any of that Gump in there and then we've got a footer footer bottom it's got a date in there we can do better than that we go now so that'll be if it flicks around to the first of January 2024 guess what that'll change uh this is the company that made the actual uh template which is good leave it in there for nails no drama save I think that's that see if that works static ah what I haven't done so what they're saying is look you're using the word static can't find that so it's because we haven't loaded it [Music] here we go Happy Days that's exactly what we want if you go back into inspect then go into console you see here the console is completely everything's being loaded it's oh it's unusual for it to be completely blank like that but um well that's exactly where we want it to be okay so what do we do now okay so we have um created index so we'll copy and paste rename and call it about the key now is to go back to this go to the about we want to hide the head we want to hide everything don't want the models go on the search the all page Banner that's exactly what we want so we want that sort of footer so it's a little bit tedious but I mean you can knock up a a page very very quickly so we don't want to model no no no no three on that so copy all of that dump that now into the new about us page in this section there we go dump obviously I could do control a but I need all my blocks so there we go I have another one called rename contacts go into the contact page this one here there's a good reason why we selected this template because it's very very good it's exactly what we needed class full page Banner yeah contact us form get in touch happy days then the footer that's a smaller page copy go to contact see what I'm doing here so if I now to essentially if I now go into the about us page in the contact us page it should be rendering stuff so don't need to change everything well actually that's a lie because um we've now got we've we've added these so we've added dodgy hrefs again so there'll be a whole bunch of errors but the good thing about vs code is you can um individually go into the pages if you go Ctrl H it will remember what you've changed we're gonna assets find the one that you changed it to place it all it won't be any csses but it will be pngs there we go change them all jpeg was just one under bang on save go into the contact page so there we go [Music] that should do it save I'll go back into the browser right now go into forward slash about [Music] balance page that looks fine go into the inspect panel console no errors contacts Happy Days no errors that's exactly what we want to do so I'm just going to repeat that process with all of the other pages that I've selected as the correct ones for this website and I'll come back to you okay I've gone ahead and done that I have also added a new model called services or service um because one of the templates I forgot about that I needed to away but the customer to add Services into the database that they render into a Services list view um so yeah I've gone ahead and done that create so I'll create the model add it to admin create a new view and it's a URL and I'll create the template and I've gone through and I've added all of these templates here I've changed all the assets paths to point to static so yeah we can now go ahead and have a look at them um so what we got so blog I know so it's blogs so saying that it can't be found because there is no path so the only blog that we've got is the one with a slug and unless you pass a slug um it won't like it so can't resolve keyword creation date well that's interesting what is the field called uh what do we call it Bobby and let me sign in so our services uh what is the field called let's have a look so if remember we installed Django extensions and we added a model extension but it's saying we're looking for the timestamp model times that so it's created so I've actually called it something uh different here um so quite rightly it's saying in blogs it's looking for creation date right so what we want to do is go find in folder wherever we find creation dates replace it with created it's found it five times and they need to save ah there we go it likes it now okay you've seen the inspection panel there's nothing going on in there so this is the blogs page uh we have Services it will look exactly the same to music service or I'll change that to services let's call it what it is uh so we want to call this in urls there we go services that's the services space so it looks a little bit different which still looks pretty cool uh we've got a team page Happy Days okay so um what else have we got blog I think I said I'll contact us page what's that look like [Music] as the contact us if I will wire this up in a little while um but for now let's go ahead and change some of the logic in the templates so let me close some of these close saved minimize some of these okay so let's just double check what's going on in here we have got models and search boxes we're not going to worry about any of those just yet um let's go ahead I'm going to change this to third coding.com and coding Bitcoin that's the footer bottom footer section so about us uh what else have we got in here so we've got some what's it look like in the in a browser let's look at the footer okay so what we've just changed is at the bottom here it's 2023 and that one also decoding.com when I refresh the browser there you go decode brilliant that'll take us to the top of the screen so everything's working as expected it's just these here will have to have uh links it remember I said about the context processor earlier on let's go ahead and change one of those preschool context processor so if I go in here and add my Facebook https facebook.com okay we can also have my my Twitter https [Music] birthday.com you get the drift right so there you go all we can do is we can add uh Facebook logo so now the href will be if you use the um double squiggly Wiggly brackets you can say my Facebook Twitter [Music] my Twitter okay we could go through and do the Instagram and everything as well but we won't bother just now um okay so now we've got some navigation so if we save that go back for at the minute there's no hatred you see that in the bottom left it probably can't accept the blue border um but it's coming it's not giving me a Facebook link so if I want to refresh oh that's interesting what's going on here invalid syntax context processor line seven so one common okay never forget your training commas that needs a kick give it a kick it refresh there we go we've now got you put that on there that's saying https would believe me it is saying if I click it there you go it takes to Facebook happy days and that's a Twitter take us to Twitter okay so we get that that context variable is being passed through to every single interesting enough they'll debug toolbar isn't it's a problem for another time so we've now got some quick links okay so this is the navigation we go back into the footer quick links about so the about HTML well we know we can change that across every page so we're going to templates finding folder but about HTML what we can do is just change it in everything at once to use the URL template tag and we want to call it core simply colon about change in everything place now we've got team oh team HTML what that relates to is 14. place it everywhere one that you will definitely want to change is a home that'll appearing a lot I would have said or is it index it might have been index yeah index HTML you want to call that Chrome place services the vent actually their event pages are events page so let's change that to events um well so we got um I'll do for now right okay hopefully that'll work there we go so if we hover over this now that'll take us to the about us page okay same goes for any other navigation on the site our team take us to the team page we go in here and click on team that'll work because I I changed everything across all the templates okay so now we can start getting a little bit more cute and everything so that's change my context processor uh we've got my email already so we go back in here go into templates go into base because that'll have all of our navigation going to header probably will have right so we don't really do we really need to um but I'm not gonna have a clock in there I mean you can you can pass through a clock it's brilliant but we're not my telephone add that to that on awesome I was using phone for email but it probably should be fa email but we'll we'll see we'll see how that pans out when we have a look at a browser my email so what I'm doing I'm just going to go through the page now and just sort of change a few things so emails come through um but I don't think you can I've got a phone that we haven't right so [Music] my telephone okay obviously that'll be in production it'll be a different number there we go phone telephone we've then got these here so let's go ahead and change those cuts you've got the Drift But if I go my Facebook [Music] now the other ones we are going to hide but now or we're not going to be popping up any kind of model anytime soon but this is the nav bar now right so okay so that's taking us to Facebook so this top bar now is done home page well we don't want that as a drop down we just want that as home so what is there context oh no that's the logo sorry that's the logo what is this start navigation so this is for the menu for mobile device menu for desktop device so that's the logo there you then have the home navite um drop down toggle right so we want it to show active if so if uh is it requests dot path degree equals [Music] that's what we're doing there it might work we'll have a look so we don't want this drop down we just want it to be a navigation link well I'm going to drop down menu see if that works I should oh I've removed the navigation sorry my bad for home I'll go home oh there we go that works so we're saying that if the path in the request is home and markers active if not it doesn't okay so we need something similar in the about us page where is it so you can go here pick all of that up and we can call this about what would it be about a look see how it pans out shall we never remember no it's not maybe it's you could say if about [Music] in sorry in request path that way we're not looking at backslashes or anything like that so that's probably the better way of doing it there we go that now works so we go back in a home that's not what that is so it's just a case of going through the template and trying to wire it up to work because there's always function funky CSS and different logos and different images and icons and you're just trying to wire it up so that you know it works with your url configuration and things like that so we can do the same for team because that's not a drop down and I'll probably just go about and hide some of these little bits um [Music] you've got a pricing page you do actually want a pricing page come and think of it um but we'll do that in a second so this would be team and theme blog [Music] okay is this all looking good so far right so we can hide pricing don't worry about that for now for the plug we do want to worry about to know what we will change that to a normal navigation rather than a drop down [Music] see this will now because we'll block his blog in request part it doesn't matter if it's a blogger blog so it was still marketed active your blog throwing that in there now [Music] I have a tendency to hide things rather than sorry comment them out rather than removing them it's really helpful so this would be contacts you know contact and call this contact there we go right um look at the quote button I will worry about that in a little while so now it will work all of this will work what's the search button do okay that's that's cool but I don't want that for now so we will with the search thing it's the body that's the header that's the search thing there now what we don't even want the model [Music] okay the get a quote should probably pop a model up if it doesn't work now we need to dot search you need to remove the dot search find Dot search so there's that one there now what we'll also remove the get quote for now are we getting somewhere yes we are okay um then we've got the standard header I think what's this little Letterman called so this is pretty unique this is pretty standard across all sections so I've got one here uh we can probably now it's all changed so we won't change any of that we need to go through and change load of content but we're not going to worry about that just yet right so um what we will do however is we will look at one of the blogs we'll change how B's are rendered because at the minute these are not coming from the database at all admin blogs add a Blog title then I this is a demo blog that will make that bold and metallic and there we go and then we'll say uh demo two it's a demo two okay same save so we're two in the database right um now what we'll do is we'll go back here we remember this is a list view so we can go ahead and work out where the repetitive stuff is going on so it looks like it's this here yeah okay this is this is all repetitive stuff right so this is and then we've got pagination at the bottom here so we don't need any lap fancy stuff but we do need this one we want to do a for Loop four object in page obj remember this is a list view with pagination so Django's generic Bliss view passes through a contact variable called page object or page obj and that will only show how many you've set as the patronation number so it's 10 in our case so if there's 11 blocks it will show the first 10 page two it will show one okay that's how it works and four okay if I didn't save that [Music] going to blogs learn how we've got two okay if I go back in here and go into my views in core blogs change that to one that will change this and only one more display because the other one is now on page two that makes sense hopefully it'll make sense okay we thought about images in the database it's a matter for now blogs so what have we got here we have got we'll keep the image as is because we haven't got anything in a database but where it says href blog details we now want this to be URL uh how do we do this cancel core blog sorry single quotes core blog that points it to the URL line that we need to pass through uh keyword argument of value so it's slug equals object because that's what we're calling it on a for Loop object Dot and slug and everywhere we see everywhere we see that we'll change it to what we just wrote there we go so we have a date here so we go objects dot created dot date read comments we haven't got comments there don't worry about that uh that'll be the title object dot title object dots body I think I called it and you know I'll show you what it does and then you'll read more yeah that'll work right okay so we're gonna go okay so if you notice it's rendering the HTML we don't want that but you can use the save filter so if you just um use that and then put safe save go back in here there we go all good this is a demo okay if we click this now read more text through a little blog detail page like the blog detail page isn't showing information that we wanted to show so we can go into the blog page and look at all of this funky stuff so I've got block blog metadata so what I won't do I'm not going to go through the specifics because at the end of the day there's going to be some sort of website specific stuff that you don't need to watch I'm just going to get it to the point where you can park it up add your own content and then deploy and that's kind of the whole point of this so um what we got so we've got a P tag here but we're not going to mess around with that we're going to just add um object but this is a detail page keyword is object and it will be body safe everything else will remain in there so I'm looking for something such as there we go this is the demo so you can imagine if I'll give this little client the client could create manually in the admin page what they want to do and or what they want to say on the blog and it would render directly on this page here all this stuff on the right hand side I'm probably going to remove um is a very small like I say it's a it's a child care environment it's a charity they don't need this funky stuff on the right hand side it's just Surplus to requirement requirements um what else have we got what else have we got we've got uh the form one sec okay just add another swing of coffee right so we've I'm not going to go through all the templates it's very specific to my needs very specific to my clients needs it's going to be different when you design your own website it's gonna be different if you download or purchase and download your own template every project I download loads of templates downloads over the last five years and all of them constructed in different ways these different classes they've got different CSS structures JavaScript structures um what I've just shown you is quite an easy way to get it up and running you will need to spend probably half a day to a day really finessing things uh for instance if you have frequently asked questions sections you know you can do a for Loop and you know so you can have elements on on left or second column you can do a for Loop and then match the for Loop counter to get the odds in the evenings there's loads of funky stuff that you can do but I'm not going to go through that today because um it establishes your requirements so um and I'm also not going to finish off the policies and the policy because um it's the same as the blogs so what I've just done there is effectively the same as well oh um it's effectively the same thing as what I would just done in blogs and blogs so it's kind of it is what it is it's it's it's a full intense purposes it's finished same with teams detail page you're getting the page obj keyword and you're doing a for loop on it any list view is the same if you want to add things specifically to the view you have to change the get context method um the best kind of Django stuff right so but I've basically got this here so outside of this video I'll probably spend another two or three hours adding content um adding terminology adding logos and things like that but um that's just finesse I mean essentially we've built the back end the front end is working we're just wiring it up once it's wired up that's we're good to go I will show you what to do in the settings for production because there are some specific settings that you need to do in that um other than that we're we're basically there we're probably 85 to 95 of the way through ready to deploy at this current moment I wouldn't certainly to a staging environment so there's a whole piece of work required for that that's not part of this video you need to set up a if you're on digit lotion which I do use linked to my referral um there's a referral code in the description so click that if you want to set up an account um setting up a droplet which is a virtual machine on digitalocean you need to set up certificates uh databases all sorts of stuff spaces so there's loads of stuff you need to set up outside of this video and that'll take you know a few hours in itself so this is just getting a Django out ready to be thrown out of service already being constructed and is ready for the code right so lastly contact form this is a little bit different so what we got here so where's the form right this is the form here I can't minimize that for some reason Okay so we've got contact form we need a method so Django is is expecting a form submission to be on a method post you need an action so what is the URL that we're going to be firing this to contact okay or you you could just do request path something like that but anyway let's be explicit contact what we need in a form in Django is a csrf token c s r f token across site something or other forgery token I can never remember what it is but it makes sure that who is submitting a form is a real life human being um it's basically a a good method it passes a token through to the back end and it verifies it by the session sorry I'm having fun here so what am I doing I'm trying to do three things at once csrf token there you go Django does that for you safely doing it okay okay okay so what you could what you might be used to in Django projects is rendering the form as P so it would put all inputs as a paragraph when you're using templates or your own HTML you'll find that you need more advanced elements in the HTML fit to render properly you can see here we've got div six so this is going to be two columns unless it's a mobile which we've won um you've then got a form group and then we've got an input field right so what we can do is rather than rendering the form as P because you do [Music] I think it's form dot adds P so nice I can't remember I very rarely do it like that these days go in contact ah there you go so it's got full name email telephone message they're the fields that we've constructed in our model for okay but we want it to look like this right so what we can do is you can change that input and go form dots name I think recorded uh you can do just just take note of the classes right so actually form control we've already got that in our form in the form I didn't actually check that but that's really helpful you might have had um another one called sn123 I don't know that it depends on who built the template so just be wary of that because without those classes it just wouldn't work properly so what we've got here this can be email type email email which we have here this will be form dot telephone and then lastly we'll have no it's still form control so we shouldn't have a problem here or Dot message uh no I no idea how this is gonna look I'm missing the div I know it's there right okay so that's the submit button I don't want that however what I might do is change this to 12. so the form will be a one line above yeah so it's just changing the CSS to work save this what we've got is a bomb what's the bar so it's looking for a button submit button submit now I have no idea if it's going to work I mean it should do they worked they work lovely not a problem at all what happened here of course that didn't change that one okay I've done something funky there right there's seven let's have a quick butchers are what we've done there uh born group um that's so it's a text area columns 30 rows six is that all it was that data error write your message I'm on the way about that either let's have a look okay so um it's probably something to do with that column what color attribute in HTML so it's correct there rows column 40 rows six so it's just not nd12 ID message foreign so it is a text message name message ID message no unless that's what it's looking for row six ah no no no no okay sorry I'm spending too long on this I mean at the end of the day it doesn't matter to you as soon as you have to spend another hour and make this look pretty I think it's actually yeah it's this so where it says I was saying 10. oh look there's something going on there I need to figure it out outside of this this call but the formwork the form looks okay but let's let's go ahead and add um right submit what does this do I have no idea if that worked or not we've got no messaging or anything now that really didn't come up with anything did it okay so um let's see if I can fix it quick I can't fix it in a minute or two just talking through what I'm trying to do then um what we'll do is class form inline method post action contact um you know I probably messed up contact form ID content form probably don't need ID contact form unless that's some CSS stuff that I'm not aware of okay it's not picking out so okay I'm not gonna worry about that too much because um at the end of the day so essentially what's going on here is we've got a form some reason or another that is not posting now it should be posting um I'm not able to see why um there's no error message or anything like that so the only thing I can think of is the action so I'll try this again if not I'll have to debug it outside this call and like I say it's um let's go with um [Music] let's try that what is the form the form now retainer yeah it's contact okay there's something going on trying to think what it'll be let me figure that out it took it took a minute uh there's two reasons why it wasn't working firstly because in this particular template we had uh let me close some bits uh we had a couple of bits in jobs in this active JS we had the um some JavaScript to on submission of a form prevent default so it prevent the submission of the form now this is quite common if you're trying to send form submission via Ajax um which I normally do but we're not for this video it's just a normal straight up form submission post submission so I've commented that out but then also what I forgot to do in the view itself is save the form so when the form is submitted forms say sorry when the form is valid you save the form because it's a model form and then you pass through the super right so that's all I needed to do and now if you look at the form we don't need this open go to contacts probably probably at the coding.com don't think you need anything in there a little numbers put a little message in there click submit that redirects you to home and then if you look in here update there you go we've got another one right so the contacts are now working which is what I wanted to see so yeah um the next stage from this which I will go through I'll go through each of these Pages I'll add images I'll change all the H1 tags I'll add a whole bunch of contact you know it's going to be a few hours worth of work but when I'm finished the website is essentially ready to deploy now before I close the video off um what you need to do is have a look at plugs release down we want to do is just have a look at your configuration right so at the minute we've been working on dev and what we've done is we've completely we've mimics what we're doing in Dev in production stage now let's not worry about stage just look at production no so what you could do is rather than passing through a debug variable into your EnV in a production box you could just say it is always zero so in production we will never have debug turned on that's a good way of doing it and equally production one okay now a loud hosts will still be the same you can be explicit you could just do another dictionary here and you can have the IP address 178. I bought the boxes uh equally you could then have um uh would it be it would be a websitename.com yeah that would be the allowed host and then you set up the nginx uh proxy server and to unicorn to make sure that that's domain redirects to the correct IP address of the droplet or the um VM okay cool uh what you also need to do a database you would change this database configuration to be something more sustainable and scalable such as postgres or MySQL okay make sure you do that because this dbsql sqlite all it essentially does it creates this file in your directory which is not what you want to do you want to have a postgresql database and you would point that towards of using digitalocean I've done videos on this in the past you uh they provide a host a host um URL for the database you'd have to create a user with the right permissions a password a database name and things like that and that's what you put in here okay engine name you change the engine name now look at Django docs for that it is um there's a lot going on in the documentation but let me quite literally you can where you can search Django database now come up with database Django configurations um so you've got postgresql so it shows you that you need a different engine okay and you need to pass through these configurations so keyword key value pairs but it's easy enough to do so that's one thing you need to be mindful of also the static files so it's a very very different setup for static files if you're pointing it towards an S3 bucket again if you go through Django static S3 AWS it'll come up with there you go storage Django static files and AWS S3 that's a great tutorial I use it I'll look at test driven i o all the time just for little sort of hints and tips it shows you how to add how to create things in a in S3 and then how would you create the correct installed apps different bits you need to install and this is the static file configuration so you need a whole bunch of variables in your settings file in production that will work in production but not in development that's why we set that up at the start of this video it's really really helpful uh listen they're using um Docker compose this isn't a Docker compose um video that I'm doing so yeah you would need to reconfigure these static file bits and pieces other than that I mean we're good to go I mean that is we haven't set up site Maps or anything but um yeah this is this is basically with a little bit of Jiggy Pokey with the templates it's good to go so I'm going to end it there um I probably will do a couple more other videos just to really sort of hone in on things like um sitemaps and how to deploy it to a server but for all intents and purposes we've just built this app from the ground up we've got a working in the browser working from a template structure that we purchased it's taken what just under three hours I reckon another two to three hours work um that I will need to do to get this to the point where I'm ready to deploy so in unwrote uh one day we've actually done that so I'm really happy with that thank you very much for watching um I'll see you in the next video thank you bye foreign

Channel: Did Coding

Views: 11,271

Keywords: PYTHON, DJANGO, HEDERA, API

Id: IsAjtRfw8ps

Length: 166min 24sec (9984 seconds)

Published: Mon Jun 26 2023