Django Tutorial - Create a Digital Resume with a Python Backend

improve your django skills by building a digital resume website bobby stearman teaches this course he provides a free resume website template and will teach you how to program the back end using django hey everyone it's bobby from dudecoding here and i've put this course together today because if you're anything like me you've applied for numerous developer roles over the years and you've been successful some of the time but you've missed out on most now this is because there are so many talented developers out there so you must stand out in a crowd it's absolutely paramount that you do so i'll show you today how to digitize your resume using django now the reason we're using django is twofold firstly with django you have a built-in admin page which allows you to create read update delete objects so this will avoid the need to update the source code in your project so we can add objects in the admin page and it gets rendered straight into the html which is fantastic and secondly it gives us a chance to polish up on our django skills so we will be firstly finding a template we've got a template that you can download for free we'll be then creating a django project we'll be building out the back end the front end and then we'll be stringing it all together so this will take just over an hour so let's jump straight into it [Music] this is the template that we're going to be using so this has been designed by james granger design a colleague of mine um he's fantastic he's put this together we're not charging anybody you can access this template in our github repository which is github.com bobby dash decoding dig coding underscore resume underscore template so decoding resume template like i say completely free all you need to do is clone a repository and you will have access to it i will show you today how to then string that template into a django project okay this is what the template looks like at the very top here you have an avatar you have a bio or it will be a bio we've then got a link to download a resume so we'll need a pdf version of your resume and we'll attach that to a user profile we have key skills coding skills with a slide bar we have some certificates that we can scroll through we have portfolio section we have a testimonial section and we also have recent posts that's the index page we have a portfolio list view okay we have a blog list view which is almost the same and a contact page the portfolio and blog pages will also have detailed pages as well and they will be rendered to the front end with a rich text editor which we will also add to django admin so what we add in a rich text editor will be rendered directly as it's seen in admin to the front end which is fantastic like i say we will be creating objects in django admin without the need to change the source code for the project okay and this contact us form allows potential employers to contact you add the name email and a message and submit great so that is the template that is what we will be building today in django so first thing that we need to do is use a text editor i'll be using visual code studio today and this is opened up in development so the first thing i've got a terminal open here as well first thing that we need to do is create a virtual environment now i'm using a virtual environment wrapper so i can just use the command make virtual env and we will call this resume demo okay and that will go ahead and it will create a virtual environment on my machine and it will fire it up the reason i know it's fired up is because we've got this in brackets here so resume demo so now that's there we now need to we have now have access to pip so we can pip install django we'll also pip install pillow and we'll also pip install um django ck editor okay they're the three that we will need straight off the bat okay once that's finished installing all of that we will then start a django project and we will call it again same as the virtual environment we'll call this resume demo okay don't worry if you have this come up it's just telling you that you need to update pip just simply paste that in there bob's your uncle that's installed the latest version of pip so we're all good to go right so now we need to cd no we don't we need to start a project so because we've installed django we can now access django admin and we say start project and we'll call this resume demo okay that will start project we can now cd into resume demo there we have it and let's open that up in my browser here there we have it it's there do you know what let's open up a new open a folder development we'll just open that up here so we haven't got all of the other stuff let's open up terminal and we will go work on again that's another command from a virtual emv wrapper so we've got these pop-ups so we'll call we'll run resume demo well we've got the virtual envy up and running again and this is the project directory so when you um start a new project you get the manage.py file and then you'll also have the resume resume demo directory with the dunder init file we've got ascii settings urls and um whiskey okay so what we'll do now we can access the manage.py what we can do we can python manage dot py will start an app and we'll call this main okay and now we will go about so what i'm what i'm going to do is i'm going to be referencing my other screen because i've built this project in am previously just to make sure it all works and it speeds things up rather than having to watch me do typos and and have to debug all of my code so i'm going to move this through from a from another screen copy and pasting it across so it's nice and smooth and we aren't going to be too clunky so the first thing we're going to do is we're going to open up settings.py okay and this is what it looks like when you first install the django project so right at the top here import os so that allows us to access the operating system this project will require the use of static files so and the reason we have os is because we'll be using that in a second to join the base directory to the new static file directories we have this is the base dir which will be referencing that's the secret key now in a production environment you would secure that maybe in an env of some sort but we won't in this tutorial debug is true allowed host is all good what we need to do is we need to add main into our installed apps we also need to add ck editor there we go that will allow us to use a rich text editor in the admin page middleware we don't need any middleware that i know of just double check no we don't but we will be adding a context processor so the context processor will go in here processors.py and the context process py will be looking like this so we'll be um importing the user model here so that's the built-in user model and we'll be just adding um a keyword argument called me to the context process and it'll all come you'll understand what's happening soon enough uh we're going to settings.py we can now add that context processor to the context processor here so we'll have resume demo there's dot context processors dot project context and we don't need that last one there okay so now this um context here so this keyword me will be accessible in the templates that we're building out later on in this demo so whiskey application we don't need to do anything there we're just going to use the built-in sqlite 3 database now you could upgrade that to post sql or mysql but we won't in this so when we make the migrations there'll be a db sq light uh file that appears but don't worry too much about that we'll change the en to gb and what we'll then do is we will add the static files does and the static route the media route and what have you okay so i won't go through what we're trying to do here but essentially we need to access static files so static files are like css files javascript files and and and images that just don't change right so they sit in a static directory we will be accessing them things like logos things like cascading style sheets so these settings here allow us to or it tells the system where those directories are going to be and how they're going to be managed okay so that is it we don't need to do anything else to settings but we do need another file file in here called urls.py oh it's already in there sorry um yeah we don't need that so i'm getting carried away so in the urls um py file i will then copy all of this across so we need to add include to path we need to bring in settings from django.conf and we need static from conf.urls.static and we will be adding the path mains.url so we haven't even created that file yet but we'll do that in a second but we're adding this to the url pattern so all of the urls in the main.urls file that we'll create in a second will then become part of our url patterns okay we could call it main namespace equals main so that's what we'll call it in the app in a few seconds and then we've got this here so if settings.debug we then add the static url and a static route to the url patterns and we also do it the same for media url and media root so in development environment we will simply have a static directory in here and we'll have a media it'll be called media file so as we save an avatar or an image it will add a directory and i'll add the image or the file to the directory within the media files directory okay so that is the urls there main what we need to do is straight away we need urls.py right so we will have that file and we will create that we'll be referencing views that we haven't created yet but we'll add it in there anyway okay and the reason we're doing that is because trying to do this in in in a good order normally you would add this after you create the views and you wouldn't create the views until you added the models but we're referencing this file in this urls.py file so um we're bringing in path and views okay which we haven't created yet the app name is main okay in fact what we could do because we might need to make some migrations before we do this so i will uh comment those out okay because we haven't we haven't created those yet anyway so we'll start in order so where you start with you start with models okay so models models are um translate to um database tables okay so um we will create a model uh the name becomes the table name and fields become the rows sorry the columns and then for each object that we save becomes each row in that table so that's basically what a um django model represents copy and we'll paste okay so bringing in models and we're bringing in the built-in user model that is in contrib or models we need that because we're going to extend that for the user profile okay we'll be extending it using something called signals but we'll go through that in a second we then bring in sluggify because we need a slug for our blog and our portfolio we're then bringing in ck editor so this is django ck editor it's a rich text field so this we can add this rich text field to the blog and portfolio so let's create a skill model we have a meta class and i always add these not necessarily needed by default it will it will pluralize the name but i add it in there anyway it's not the end of the world okay so name equals this is a char field so these will be the skills so we're gonna go back in here these will be these skills here okay this is what we're trying to replicate so we want coding skills and we want key skills okay so we've got name of the of the skill the score so if this was a key skill or sorry a coding skill we'd want to score it because we want the sliding bars on here to represent 95 or 80 percent of the skill or the not your expertise in a certain skill we then have an image the reason we've got an image or file field because this is an svg so these images here are svgs so for each key skill we want an image okay so we'll do that and then is key skill which is a boolean so it's true or false so if this is true then this object would represent a key skill if it's false it would represent a coding skill so we then have a string function and it just returns self.name okay so that's our skill model we then have a user profile so this is what extends the built-in user model that's why we've got a one-to-one field here on delete cascade will only be be producing or creating one user profile so that would be us as a super user we have an avatar which is an image field this is why we brought in pillow upload two and this will create a directory in media files called avatar and when we save a file in there that is where that avatar will go we've got a title a bio so the idea of a bio is this bit here so that will appear there when we add it to the templates we then have skills which is many to many okay so it would be many to many of these skills here uh and then we have a cv which is a five field this will be uploaded to a cv cv directory so each time you update your cv on your paper copy you'll update this or upload it to this field here and it will save the new copy in the directory and then the string function method here just returns first name and last name of their user model we then got a contact profile which is a timestamp which that gets added automatically okay so it's a date time field then a name email message so if we look back on here if we're going to contact name email message that's what we're trying to capture here testimonial we have a thumbnail this is for the testimonial on home so what we're trying to do is just replicate all of these elements right so this is we need a thumbnail we need a in here we're going to have uh the name of the person who's actually given a testimonial and the role and then we have the quote itself so in here we've got name roll quote and is active we're adding this is active boolean field to all of these models or the testimonial the the portfolio in the blog because although we want to add a testimonial we want to be able to quickly switch it on and off so if it's inactive we don't want it to be shown up on the website so that's why we've got an active field there media so the reason we're doing this is because if we can add an image to a media model that image gets saved into the media file the media directory within the media files directory and we then have access to that url when we're creating the rich text editor image it'll all make sense a little bit later but um that's just an easy way of accessing static files in a template um when we're messing around in admin which i'll show you what that means soon so is image the reason why this because we're doing this is because you could technically add a url here um for a video and then if this was a false it would be a video url it's safe saving huge mp4s in your database save function so um so if the url is blank then sorry if sorry self url is not blank then is image becomes false okay so programmatically adjust this is image depending on the url field and then we've got a portfolio so a date so this is the date in which the the job was done name description body so this is important this is the rich text field this is what this is the rich text editor that will be updating in the admin page what you see is what you get rendered in html or in the browser so that is really important that you have that there so rich text field there is being referenced right at the top of the page here so it's part of ck editor dot fields then got an image which would be the thumbnail if you like gets uploaded to portfolio but then got a slug which is a slug field and is active see the slug field is populated here with the save method so if not self id so basically if it's a new new object we sluggify the self.name which what it does it all of the uh the the characters become lower case and all spaces are then underscored so it becomes a slug we've then got the get absolute url here so it's portfolio slugs we do exactly the same for blog okay so blog is basically the same as portfolio then lastly we've got certificate which is a date name title description is active nothing fancy going on in in certificate there so that's models what we'll then do we will register all of those into our admin so we can access them this is one of the most important parts of it we want to be able to access all of those models in our admin page okay so what we're doing we're importing all of them from dot models all of the new models here and then we're using a decorator admin.register we're registering the user profile but then we're adding a class under that called user profile admin what this does this will allow us to display this will allow us to display um the fields that we want in the admin page okay so let's display id user we've then got timestamp name and then also on here we've got read-only fields so the slug we cannot change we don't really want to be changing that because a slug could be used you could send a blog link you could have a backlink somewhere for a blog page and you don't really want to be changing the slug because then that link becomes inactive so when the slug is produced that remains the same no matter what so we have a read-only field so that's what's going on in admin we then want a way of creating the user profile using signals so we'll go in main new file signals dot py and we will add this code to signals what it's doing it's import and post save the built-in user model import and receiver which is a decorator and then we're bringing in the user profile which we just created now what this signal is it's a receiver so when a object is created when a user object is created it fires a signal to this signal's p um py file there's a receiver that picks up that signal and then this function is called right so it's create profile so we bring in as keywords um sorry argument sender instance created and then some keyword arguments so if created so if the user object is created then we want to create user profile and that will become userprofile.objects.create and then the user which is a one-to-one field if you remember equals the instance that is what's going to be used to create the user profile so when we create a super user uh in a few moments that user will be created the signal will be fired this will receive the signal bob's your uncle will have a user profile but we need to wire this signals.py file in to the apps.py and how we do that is we uh overwrite the ready method i am right here we just haven't bought himself brilliant okay and then we need to import main dot signals that's all we need to do so when this will fire up the app itself the main app and it will just say right when ready then we need to bring in signals and now these signals will all work so when the when the app is running signals is all working okay what we then need to do is create some model forms so or a model form for our contact form forms dot py oh have i added the oh i have that's fine and what we'll do go in forms oh let's delete delete that when i go in here and we want a new file not a new directory so forms dot py paste everything in oh sorry i do apologize copy and paste importing forms and we're also importing contact profile which is the model that we made in the models.py file so this will be a model form okay so we'll be we don't actually need these i never took these out when i was playing earlier actually it's worthwhile showing you so let's save that so this is a model form and this represents a form against the model that we just created contact form so what you need to do is we you need to create these variables one for each field that we want in the form itself okay so we've got name and then we want to this here is the representation of uh this is what will be rendered in the html on the front end okay so forms this is a character field max length equals 100 so the reason that's 100 is because in the models file where is it let's go into contacts there we go name max length 100 okay so that's why we're doing that we then have required trees so this is a field that is true so this will render an input element and it will be required true okay widget equals forms dot text input so this is a text so the input will be type equals text then we have some attributes so we have a placeholder and in this case it will be star which will be rendered in the actual input itself would be start full name dot dot and then you can add class now we don't actually need class if you were to buy a template the forms that you have in the template may have certain classes this is where you would add those classes to make sure that the form that gets rendered on the front end is exactly the same as what is in your template okay so that's what we've got there we don't actually need them because we're not using form control in our template so i'll remove them so we've got email email field max length is 254 which is completely standard for an email field and then we've got a placeholder we then got a message now this is slightly different it's not a text input it's a text area now we want rows six now this all depends on your template in my template we have six rows okay so that's why we've got row six but you might have ten or whatever placeholder is message then we have a class meta model which this represents is contact profile and the fields that we want to render is name email message that is our forms.py file then what we need to do is add our views so let me copy all of that i'll go in here in our views dot py file and i'll dump them all in there okay so right at the top here i've added import messages the reason we want import messages is when a form when a form is valid and when a form is saved we will then want to render a message so that the message pops up and says thank you very much for submitting the form or what have you so i'm bringing in messages to do that from dot models import and then we want to import all of these different models from django.views import generic we're going to be using the generic views template view list view form view so on and so forth they're great these built-in form views they're all class-based views but they're they're built specifically for um tasks that happen regularly so for instance a list view you're rendering a list of objects so it just does all the hard graft in the background so you've got you can render you you can render a a web page they say a form view with only two or three lines of code which is great you can also do function based views but i like to use these built-in built-in views they're fantastic so we've got index view this will be our home page okay so we're using generic.templateview so we need we in a template view you need to add the template name so what name what template are we using to render this view in this case it's going to be main index so what we'll do is we need a directory in main called templates and within that directory we need another one called main okay within there that is where we will add our templates we'll do that shortly we don't need to do that just yet we then call the method get context data um and we call a super call there and then context we can then add keywords to context here so testimonials so we want testimonials certificates blogs and portfolio these are objects so these are um these will be added to context and we can reference them in templates uh so that we can actually render a list and do a for loop using uh template filters and things like that so we're calling testimonial objects and we're filtering everything where is active equals true this is where that field in models comes in really handy so in testimonial okay isaac is active defaults to true but if in admin we click it to be untrue or false then it will not appear in the context because we're filtering out everything that's sorry filtering out everything that's untrue so is active equals true so only true objects live objects active objects we then have certificates same again blog same again portfolio same again and then we're adding those keywords to context and then we return context so now in index we can reference testimonials and that will be a list of objects that we can render contact view this is a form view so you name the template you name the form class and then a success url this is where the user will be redirected when the form is valid so we then call the form valid method password self and form so this is the form which we're passing through which is a contact form form.save so we save the form instance and then we send this message here which is message.success and the text is thank you we will be in touch soon and that is what will be shown on the front end we then have a portfolio view which is a list view the model is portfolio you do have to have a page name by so this will only show 10 or the first 10 objects and then the template name the query set what we're doing there is we're filtering the query set is active true okay so only true portfolios detail view same again exact except for and this will be the slug so we'll add this in the url so it will show the detail so it'll show the object that has the slug in the url itself blog view identical to the portfolio view and the blog detail view is identical to the portfolio detail view the only difference is we're looking at different html files okay so they are the views we will save that just looking at my what we have not done is we have not created a requirements file so we will go pip freeze requirements dot txt and that's just created this so these are all the requirements for the project we've got django like you can see django ck editor we've got pillow because we're messing around with images and that's all the um requirements happy days so what we now need to do is we need to make migrations so python manage dot py make migrations we then need to python manage dot py migrate and then we need to go python manage dot py create super user that will then allow us to create and move this up a little bit that will then allow us to create a super user see that will default to bobby bob put that in there anyway bobby at did coding.com password it'll ask you twice it won't look like you're typing but it will pick up the keystrokes there you go so super user created successfully so what we now do is we'll go python manage.py run server tell you what we haven't done we haven't uncommented out the urls so we we've wired in the um the views but we haven't uncommented these out so i'll do that quickly so back on the urls here um remember we wired this main app into our url com file so everything that appears here are urls specific to main so path is blank this will be our home page so this will be um you know localhost port 8000 this will be your index as view because we're using class based views you must use this dot as view if it was a function based view you wouldn't need that name is home so that's how we reference it in the template so it'll be main um home that's how we would reference it i'll show you when we work through that shortly contact view same again we've got um portfolio view it's portfolios just pluralized um then we've got this is important so this is the detail view so this is portfolio slash slug okay so the url will have the slug of that object in it and that's how we're capturing it in the detail view same again for blog and blog slug okay so they are the urls so if we now go back in our terminal and we've got that up i should just be able to double click that there we have it that is not one second just because i've got server running on something else okay there we have it right okay you just had a sneak peek so i had a server running on the previous project or the project that i'm copying from so what you saw there is what i built earlier okay so nothing's working so we haven't got a template there right we'd expect that so if we go to admin which is the built-in admin page and then sign in with the user credentials we've just added there we have it okay so we've got the authentication models this is the one that we just created okay so we'll give me a first name we could have done that in the terminal but there we go so we now got an email first name last name that signal should have produced a user profile which it has great so this is the user profile now okay so let's uh choose avatar so what we'll do is let's go into desktop development i'll go into this is the one i was playing with earlier media files avatar let's use that title is um back end developer bio this is just a demo bio and what we'll then do is we will add a skill so this can be django and i'll put that on why not let's go 100 it's not a key skill this is my coding skills save will have html and we'll have this as 95 save we'll have css we'll have this as 90 save and then what we'll do we'll add another one which will be javascript uh let's just for just change things up let's put 75 save let's have a key skill this time so we'll have people person we'll have uh it doesn't really matter on a number there key skill but what we'll do we will add media files skills open save team player i mean you can put whatever you want in yours this is just me building it out is a key skill save and we'll have um self starter we'll have that as key scale icon these all come in their template by the way all of these images and cv so if i go into there these are all ones that i've added earlier so there we go save so what i'm doing is i'm building out the the admin page so this is the benefit of using django right so this built-in admin page allows us to create so at any point we could change the avatar at any point we can change the bio so um i am adding to the bio yeah so if you save it that will then become the new bio so you don't have to when you get this in a production environment you don't have to go into source code all you need to do is change the back end that's the benefit of doing this okay so we've added let's add a testimonial so we'll choose choose a thumbnail media files use that one name bobby roll manager this is a test quote that would do save and add another or you know i'll just quickly flash through this name bobby two manager two quote two and i won't do this to all of them because it'll be a waste of your time bobby three manager three and quote three they're now the three objects so what we can do we can make that inactive that won't appear you see is active okay so that wouldn't be rendered on the front end but let's keep that in there see the benefit there so i've done user profile testimonials skills they're all in there that's when when we were adding them here all you had to do click add and it adds it to the skill because it's a many to many field okay again you can change these at any point change that to you know or not in a key change css to 2 92 for instance save and that becomes 92 okay media files let's add one of these images we'll add that that's just a thumbnail from another video that i've produced random image save contact profiles we don't need that certificates we'll just add one certificate shall we so now now name would be um let's go advanced django course um free code camp description this is a test description that'll do we won't add three certificates you'll get the gist and then what we need to do is add a blog profile so this is where the rich text editor comes into it okay so author we can have bobby stearman name we can have this as test blog description test description and then what you can do is you can have um you can just have header two this is a header and whatever we put in here is what will be rendered what you see is what you get right so this is a random description and then this is what i wanted to show you the the media file so let's go open up another browser okay go back in the media files this here will give us access to this url okay do you get that that is the url of the image we've just saved into our database sorry into our static files okay if we go into blog and add an image to here just toy around with this um it sometimes won't render right on the front end but if you toy around with the rich text editor you can get its work so if we add an image the url just paste the url that we just added in there alt text test image admin main media oh what we're done there that's not right i want that let's copy that there we go right width we'll have these are these are linked so if you just put 800 you can stick a border on there if you want um we'll align it left there's a whole bunch of other bits you can do on there link advanced so click ok ok and then we'll choose an image this will be the thumbnail for the image so you can you can pick the same one if you like is active save and for google's we'll add a portfolio as well we'll do exactly the same again right so now now name is test description test description and then we'll have um header 2 header this is a description this is the end and in between that we will add an image same again don't need to get too fancy width would put 800 i think stick a border on there we'll put four on this time and left okay choose a thumbnail happy days okay i think we've now got all of the bits and pieces so that took a little bit of jiggery pokery to get that up and running in the back end but that's all we now need to do see i really i could could now um duplicate these blog these blogs so we've got um blog two blog three whatever but it's no biggie you can do that in your own time i've just constructed the back end in a way that i know this is going to work and just if you're following along get this done get three blogs get three portfolios and it will look fantastic on the front end so that is the back end basically done what we now need to do is wire in the front end so we have got the templates here the directory for the resume is here so what we need to do is we need our static files so we will take these we'll copy them and we'll dump them into this is our this is the project by the way so new folder we'll call this static and we will paste them so we paste them in there okay so they are all of us static files that we need go back into the resume and we then want all of these so keep your finger on control just select all of them you don't need the license to read me copy them i'm going to add them to main templates main or paste okay they're all of the templates we now need to wire them in okay if i just open one of these now it's going to look terrible right okay because it just doesn't know where the static files are just doesn't know what's going on okay because they're now in a django project if i open up them in the original it'll work because that's just the way it's wired up okay so we don't need that let's close that let's close that let's close that let's go back in a visual uh studio right so these are now the um templates that we've put together we'll bring our terminal we don't need to see the tone do you know what i'll close that down for now we don't need that so this is the index file okay so um it's a standard html file okay you've got a head you've got body and within that body you then got a navigation so we've tried to be as detailed as we can or helpful as we can on the documentation of these html files so this is the navigation bar this is the content for this particular page there's loads of sections a bit further down actually let's just hide them it'd be a lot easier a bit further down we've then got um the footer okay and then we've got the scripts these are the body these are the scripts here okay nothing's going to work because it's referencing files that django just doesn't know where to find them so if i was to render this this index page so in fact let's go ahead and do it so new terminal work on uh resume demo python manage dot py run server and what i'll do i will just open up that browser there right so it this is this is the home page right so it's found the index.html as per the views it's found the template but it just looks terrible it's because it doesn't know what a css is it doesn't know what a javascript is and all of the links are all swift so we need to load static files and we need to wire all of this in so that's what we're going to go and do and the way you do this is we need a base html so we will save index as base dot html and what we then need to do is create another directory in main we'll call this partials and within here we'll need a new file called messages.html we need another one in here called nav dot html that'll be the navigation element new file and we'll call this butter.html okay so what we need to do is we need to dissect up this html so that um we can then use template tags so django has a range of template tags that allow you to easily include other parts of html which you need to do is just reference the path so we'll go ahead and do that so right at the top of the page i need to open up my other project here and go to my base html what you need to do you need to do this most of them actually is load static okay so that template tags allows us to access static files which are all the files that are now in this directory here okay the css images javascript okay we then go down we'll go down this all the way from the top here so we've got author which is decoding and james granger design we've then got canonical which we need to add the context processor if you remember in settings.py where is it so we added the contact processor here but if you see here all you always have access to request okay so that's what we need to get hold of here so it's request dot path okay so that is what you add in canonical in fact i'm just going to copy this across to save me messing about we then have a link which is home and then what we'll what we're using here is a template tag called url so relationship home this is main so this is the app main and it's called home which is our index page we then in description these are all seo tags really uh in the head of html file this is how i always manage them i add a block template tag and i call it description and this allows me to have a description of a html page in the actual i'll show you what i mean in a second and then i have another one for keywords we've got the icon this little icon that appears at the top of the web browser and this is trying to find images but it can't find images because images um where is what is the path for that we need to reference the static file so what we'll do we'll link there we have it so we're using the static template tag we're loading static at the top here and then we're referencing the static here so now we're looking in the static directory in a directory called images and we're looking for icon.jpg now in static we don't we have images okay so we'll be looking for icon which is icon jpg okay so we'll be looking for that that's what we're looking for happy days and we've got static so static again we're looking for css we haven't got the path so we need to reference static and again with style css so what we'll do is we will add all of these okay and i always have a block uh template tag here and i always call it extend header this allows us to use css specific to a certain page within that template rather than having it loaded on every page it's very very handy doing that okay we've then got the body okay so what we're going to do here is i'm going to copy that and i'm going to remove the header element so actually this is what i'm going to do right okay so this is the header the header remains the same on all of these pages it's not like we have a if a page is active then it is highlighted we don't do that in this template so you don't need to worry so all of this here can be cut and can be dumped in the nav.html so first off we'll have load static and then we'll dump all of that navigation in here okay and then in the base html what we need to do is include it so we use another html tag so it's include so we're now including main so that's the main app partial sorry the main directory partials nav.html so we don't need all that html there it says repeating ourselves we also need to add some code which isn't in the template i don't believe one second no it's here right okay so there's an if template tag i can add in here so this is just some code that i use occasionally so if messages are rendered to the html document so for messaging messages so if this is a messages dictionary or list so for each message it will render a script so this is javascript there'll be a script it'll be an alert so this will pop up with a little alert at the top of the screen with the actual message in that case it'll be thank you for contacting us we'll get back to you soon so that is our messages html if we go back in a base we can then import or include messages into the body so it always appears in the html then we need to do the same for all of the content and all of the footer so we go back to the footer stage foot sorry the footer element we'll cut that we'll dump that in footer again load static don't forget to do this because you will run into an error and we'll just uh tidy it up a little bit bring it all back oh there we go save and the base we will then include that copy that's the footer and then with the content what we're going to do is we're going to have a block so we'll have block content and then we'll have end block okay so this is important right that little block there is what we're going to be using when we render the index html so in the index html it will contain all of this um html the content essentially and we will use a different con template tag in index to extend base so index will then be a combination of this html and the base html okay so we will cut that we're going to index we'll highlight oh we'll so we'll go into index we'll highlight everything and we'll paste it and we will bring that back to tidy up a little bit there we have it okay so now at the top of this page we will need a whole bunch of stuff which i'll show you what we're going to do here copy and we'll paste that in and i'll walk you through what i'm doing section gonna have one at the bottom there just closing off the block end block save and i'll just go from the top right okay so we're extending main base okay so when we render the home page it's looking for index html and it's slotting in all of the information in this html in the blocks that we're stating okay so everything that's in block content will be interjected or injected into this block that's how it works okay so we'll save that actually before we move on let's just update these remember it's looking for javascript those javascript files are in a static directory so we will add the static path so this one becomes static js static.js and then we add a footer here again it allows us to add javascript to certain html files that we don't necessarily want to load into the entire template okay or in all templates should i say so this block content is what will be rendered into this block okay this block title is what will be rendered into where is it i can't see what through the trees did i even add that in there one second i might not have done oh i did i just didn't copy it across i do apologize so title will be block title okay so the title here anything we put here which we could put did coding dash home that will be rendered into that block there okay description that will be rendered into that block and so on and so forth css if we had a special css file that we wanted on this particular page we'd add it here we wanted javascript we'd add it there content would have it here okay oh we've got two start contents i don't want that okay save now the last thing we need to do is we need to change all of the images that this is referencing okay so this is all looking for images here so what we'll do we'll control h and what we need to do is static images slash what that would do that will replace all of everywhere it finds speech marks images forward slash it will replace with this code here which is what we want there's nine occurrences and then with the jpeg.jpg part of it we will just go jpg and we'll do that okay so we're we're just we just want to replace it all save and i think we've also got an svg yeah there we go svgs as well dot svg and replace all and if we save that i think that's it i think that's all we need to do for this index page now we won't go through every page well so what we're doing for index is exactly what we need to do for every single page okay so contact for instance and i'll show you what i mean on contact and i won't do all of the others because you know you can do that yourself i'll just copy those that could code across from my other screen but i'll show you what to do with contact in a second but if i now it looks like it's still the the server is still up and running so if i now update this it should there we go it's looking for logo it can't find that because we haven't changed or we haven't um updated the images in the nav and it's probably the same at the bottom here we haven't done it in the footer either but everything else is rendering okay okay except it's not linked to the back end yet which would do that in a second so footer i won't mess around with the footer i'll literally just go a copy paste okay so what i've done this is now the footer so i've changed all of the links to static you can see that static images but then at the bottom here rather than saying 2001 i've used another template tag called now so that will always have the most recent year so if when when we hit the 1st of january 2022 um it would just show 2022 rather than 21. okay save that nav will do exactly the same i will a copy again you will have access to this project from github so don't worry too much you'll have access to all of this code oh when i haven't changed that this index.html needs to actually change to url main home otherwise that link won't work but it's looking for logo which is in the static directory and it's adding a url link to all of this so the home link at the top of the page will now be main home portfolio will be portfolios blogs and contact so that all of those links will now work go back into the browser update this now works if you click it it will take you back home if you click contact it will take us to the contact page which looks beautiful so let's fix that quickly but as the home page is working but we'll do exactly the same as what we just did on on the index page okay so all of this is exactly the same we don't need that in the contact page right the css can't find it we need to change all of that but save me doing all of that again all i really need is the contact section right content section i don't need any any of the footer or anything like that all i need is the content and if i go index and if i just copy everything from here up go into contact and dump it here that should i don't need that that can all go back a little bit i like that to be nice and tidy again exactly the same as index we're extending the base html we're loading static and then we can change all of this but again this is why i like block block template tags so we can add whatever we want in here and that will be the new title for this particular page okay css scripts and this section here right so let's focus on this a little bit because it's quite important so contact us below this is the form that we've currently got okay but we need to make this a django form right so what we need to do is add a method equals and this is a post and the action is the url that we want to be referencing so this is contact so the reason we're putting that is because in our urls this is our url so it's contact okay then we need to use because this is a post not a get request or anything like that we need in here csrf token that will add a hidden element with a csrf token which uh will then work then instead of these inputs what we need is you know i'll just copy it across but it's just form and then reference the name so if i take those if i dump those in here okay so rather than being inputs we're now rendering the form now the form is contact form that's what we produced in there in this forms.py and we're bringing in the name field the email field the message field we need to change that to message sorry that's an error on my part and that is it that's all we need to do but we need to close off the block which don't forget to do that because there will be an error end block that is the contact form done okay don't need to do that all we need to do is just double check there we have it okay so technically now if i was to put bobby stearman bobby did coding.com message this is a test message now click submit hopefully thank you we'll be in touch soon okay that worked if we go into the database and go into contact profiles there we have it okay that's very very useful that just means that you and this is another reason why we're using django any employer anyone who wants to contact you using your contact form you have a record of the timestamp and who it was what the message was in the database okay fantastic so let's go back into our project we've done index we've done contact now let's focus on let's go on to portfolio same again don't need any of this gum above content in fact all we need is all of this copy portfolio paste that in there we'll close the block off at the bottom of the page oh no no we will once we find the bottom of the content scripts i think that's that there no that's the footer don't want to furry that end block save okay so if we now just bring that back a little bit and that doesn't really matter um that's all good uh the only thing is we've got some images who's here um but i'm not gonna change all of those that's not that's not a problem um and we're not wiring this into the back end just yet so i'm just making the templates like they are so that's what you would do to each of them but don't get too carried away because you need to add some django template tags like for loops so we can actually render real information so we'll do that but i'm not going to do the detail for the one and the um blogs i'll do that right at the end i'll just copy and paste and walk you through it but let's focus on the index page so at the minute we have got uh this here so we've changed this image so yeah it's showing a picture of me but that's because that image is in the static files what we need to do is we want to reference the avatar that we've saved against the user profile and how you do that is you don't need to reference static now you just need to use me which is in the context context processor so that's me okay but that's the user profile so we now sort of use a model so we now go user profile dot avatar which is the field and you want the url of that save if we now go back into the home page here go home that will still show it's just now what it's doing we go inspect is now picking up um media avatar so this is the actual image that we saved against the profile rather than the fileless in a static file which is exactly what we want so i can now change this in a user profile to another image let's choose a file do you know what i'll just stick that in there and save if i go back in here there we go it's not ideal but it gives you an idea what we're doing here so choose file go back in here go into avatar choose that and save again bob's your uncle there you go happy days so what we then need to do we need to wire up all of this all of this the csv file here and that's what we'll do now okay so hi i'm you can go me dot first name because this is the user profile and then you can use a filter called title now if i put bobby all lowercase in the back end in the database that would render a capital letter followed by all lowercase um hey what would this be i think this is title me dot user profile dot title i think i won't go for all of these because you'll get the gist of it right so this will be me dot user profile dot bio so if we now go back in here and click update there you have it so hi i'm bobby a back-end developer this is just a demo bio go back in the database go back in the bio dot dot dot dot dot loaded gobbledygook press enter or save and update there we go that's how that works it's really really handy so if we then go into the button so download so what we need here we want a link to the csv file which is linked to our user profile so this will be me dot user profile dot cv dot url and that should now because we've got a download attribute if i click that it will then download my csv cv sorry you open it and that's the cv that i've got on that profile okay which is really handy contact that's currently saying contact html we want that as a see i hope you understand what i'm doing here i'm just going through and i'm i'm adding django template tags to allow us to programmatically change this and render information from a database which is really good really handy so that's contact now that link i'm saving it as i go that link will now take us to the contact page okay and then what we'll do we'll quickly do this and then i'll copy everything across from my other screen because it will take too long so we'll go into um [Music] yeah we'll do this one in fact i'll copy it you know what i'm going to copy across and walk you through what i've done so if i take everything from my index now i go into here and go everything from there so all of that work i just done i'm just going to copy and paste over anyway because it's already done on the other screen okay so do you know what let me go back quickly before i do that because i want to show you what we're actually replacing so in this section no let's go into this section here certificates right so this is a slider so this is a slider outer and then we've got a classic certificate slider that's been referenced in the javascript that's what allows that javascript is what moves these sliders across right so that's what we're looking at we've then got a swiper slide okay so these are the elements so that's one certificate that's two and that's three okay well i don't want those three i want the ones that are in the database okay so i don't want them to at all but i want this but rather than showing what it's got in here i want it to render what's in the database so to do that we would use a for loop for c in sir tiff here cuts there we go so tiff it cuts and then we want an if if c dot is active then render this if not don't render anything right so we'll then close off the if and if and i'll close off the four and four okay so this is now a for loop right but what is rendering is a load of goblin geek so what we want is uh there's no link for the certificates but you'd put you could if that was a blog you'd put um the url template tag so we want this to be c dots just check the field certificates i think at the bottom here certificate so this could be title that'll be title this would be c dot date dot date c dot what is this going to be i needed to name title okay so this is title that'll be in this case for my example would be free camp and then you have this would be description c dot description okay save so now rather than rendering gobbledygook is rendering actually something from the back end certificates the reason i'm accessing that is because it's in the context i added it in the context in views okay so if you go here that's what i'm accessing okay so it's all active certificates go back into index and save that i'm hoping i haven't buggered anything up no right so that's now showing one okay because we've only got one in the database but if i go to certificates and click inactive save that won't render anything yeah so can you see what i'm trying to do here that's that's that so every refresh done okay so i'm not going to go through and do everything else because you can see what we're trying to achieve you need to add for loops and if template tags to render the right information against this template okay so we'll go about and i will add this content here paste save and then render it oh emblem we've got two end blocks don't want to end blocks save go back oh i've got two block contents as well okay that's that's always fun sorry i'm racing through i'm trying to there we go let's delete that one save that should now work there we go right okay so this is now all rendered from the back end so we're going to certificate if a kind of skills find our change html to 98 save that update 98 okay and these these all change as well so if i change that to 50 you'll probably see what i mean actually so i'll go 50 save there we go okay team players self starter it's looking at different images certificates we've got one in database featured work i've got one testimonials i'll put three in there if you remember but if we was to make one inactive for instance save that and update there we go we've only got two in there okay test blog okay and if you were to click view all what it will then do it will then take you to the blog page but we haven't done that yet okay so i will quickly um add all of these blog details so copy if i go to blog details paste so what we're doing here blog deep oh actually and we'll do a blog copy and we're going to blog just the normal blog list page save and if we go and render this now it should look good there we go okay so this is rendering my one blog that i've got so this is a list view if i added another blog it would appear there it looks really really good so if i click on this it'll open up the blog details view okay and right okay that doesn't that didn't render too well so this when i say you need to mess around with the ck editor because it does um some reason it renders some of the information incorrectly but that's fine you know this is just playing playing with the information there so we're going to blogs blog profile what i do is i just i wonder what that looks like that might help this is the end right you can see what i've done there i've just added some bits it's because the image is probably too small for the for the actual screen if i was to make it a bit bigger let's go back in there make this uh image properties change that to what a thousand let's have a look okay save there we go it's starting to do something different now okay so tinker play around with it what you see is what you get with a rich text editor but it just allows you to design a different blog so all of your blogs don't need to look the same but you can use the same template which is great and a really good benefit of using django here so if i now open this all we've done is in the blog detail page we have got yeah the object.name author so this has always been pulled through from the back end um but this is what's important okay so the object.body if i was to remove safe all it renders is raw html like that so this is the html that the which textedit is creating but because we're using the safe template filter it actually renders the html into something tangible that we can actually see and it's rendered well on the front end so if i change that now back to safe save there we go and i'll quickly just for google's i will change the details page copy this one where is it there we go save portfolio copy and portfolio save so if i now go into here i'm going to portfolio there we go and clicking portfolio that is again it's because the image that we've got in here portfolio uh let's change this image properties so let's put that as a thousand and that'll probably work now there we go uh again have a tinker uh again but then look if we were to mark this as inactive and portfolio it won't work okay um to be honest that might still work yeah you you could also put in the uh view that if that if the query so if the object is marked as inactive then you can do a render redirect so you can redirect back to the portfolios list so it will never show a url but i haven't done that in this instance so that is it that is the template done so we have now got a digitized resume that is entirely um that is entirely made in django and we can change every single key element of this resume without having to change any of the core any of the um code in the background so that's brilliant that is more or less the end of this i don't i will just recap right so what have we done we've just digitized a resume right so we've built a whole project in django we've digitized our word or pdf see it cv or resume and we've put it online so you would make this website you put it in a production and then you'll be able to send that link to an employer that will help you stand out in a crowd the good thing is because we've used django we are able to use the built-in admin page and we are able to create read update and delete all elements of the resume so you never have to change the source code now that that is fantastic right so let me change it so you can actually see me again okay so that that is really really good i have really enjoyed putting this video together again my name is bobby stearman and i am from did coding please subscribe to my channel i do videos like this all of the time before i close the video off i just like to say thank you to my colleague james granger who helped me put this template together he designed it and without him we wouldn't be able to give it away for free again it can be found on my github which is github.com bobby dash decoding slash decoding underscore resume underscore template thank you very much for watching i have enjoyed creating it i hope it's useful and i'll see you in the next video thank you bye

Channel: freeCodeCamp.org

Views: 67,330

Keywords:

Id: 0oSsLbh_Kv4

Length: 82min 22sec (4942 seconds)

Published: Tue Oct 26 2021