Django Portfolio Website Full Build Time-lapse

hey what's up guys so i just spent the last three days taking a static portfolio website that i built and building out the entire back end using django for this so this video is based on a tutorial that i did for traversing media where i showed you guys how to build a static portfolio website but in that video i promised you guys that i'll show you how to do this with django and actually make everything work on the back end so what i now have is my personal website on dennis ivy.com this is a platform now that i can show my portfolio work on i can blog from so i have a rich text editor which i haven't seen many django tutorials on so i'm excited to show you guys that and i also have search capabilities authentication and all sorts of stuff like that and what i did here is i spent about nine hours coding this and i recorded this entire process and i'm condensing it in about a 35 minute video for you guys so this is not the actual tutorial i'm actually working on that course so that's going to be about 15 to 20 videos long right there and i'm gonna go really in depth explaining each part of that but this is kind of like a course preview so i'm just going to narrate this process try to explain what's going on so with that being said i hope you guys really enjoyed this style i don't know if i'll do this for future courses but let me know if you guys like this preview and let's go ahead and get right into it so to get things started i'm just going to create my project and inside of that project i'm going to create one app called base and the entire project is going to run off of this app so i really don't need more than this because of the size of it so i'm going to leave it like this for now and i also need to register that app inside of settings.py inside of the installed app section now for my views i'm just going to create four views for now because that's all i need and then we'll add to this later but they're just going to return back a simple http response and we'll add templates to this later now inside of my urls.py file i'm just going to create a path and align that with each one of my views so whenever a user types in these url routes they're just going to get back that http response that we set up and once i have this set up we're going to go into my root urls.py file and i just need to make sure that this points to my main urls file here so we're going to configure that and now if i look back at my templates i can go to each path and we can see that response so everything is looking good so far i'm going to need my views to return back a template so i'm going to create a templates folder and inside of this folder i'm going to create four templates and that's going to return back a template with each one of my views so i'm going to put in some dummy data into that and then i'm going to go into my views.py file and inside of those views i'm going to replace that http response and in this case i'm just going to use that render method and now each of you is going to return back the template that's associated with it now i also do want to set up inheriting so i'm going to create a main.html template and all of my templates in my pages will inherit from this main template so this way i don't have to repeat a bunch of code and i can also do something like including sections like a nav bar so we're going to take our nav bar put that into its own templates and that way i can include it in my main template or on any other page that i want for a big part of my basic configuration i do need to set up my static files and this is kind of like that last step before i actually start including my theme and to set up the static files i need to create a static folder inside of that folder i'm going to make some files some folders for my images css files javascript and all sorts of stuff like that so once i get all of that set up i can go into settings.py and this is where i'm going to configure things like my media url my static files directory and get all that stuff taken care of once all this is complete i can run collect static i also need to make sure that everything's ready in production so whenever we turn debug to false some of my static files are not going to be served the same way just because of the way that django setup so i need to go into my urls.py file inside of my root project and run a few configurations here so i'm gonna need some imports create some url paths and i'm also gonna have white noise help me with this so i'm gonna run a pip install add white noise and then add that into my settings.py this is where things really start getting fun i'm gonna take this template right now and i already downloaded it from this github repo and i need to grab this template put it into my django project with a few files and i need to actually configure a few things so a lot of my urls and static files are not going to be configured right so i need to grab things like the javascript files the css files along with the template and images and put that into my django project into their proper places inside of the static folders now within my home view i need to take out that home.html file replace that with my new index.html and inside of index.html this is my new homepage now i'm going to take out all those static urls and i need to configure those the django way so i loaded static and i need to go through and change all of the file paths to the pictures along with the javascript and the css file because right now django can't read that path backwards until i configure this properly now the navbar section i'm going to take that out and put that into navbar.html and i want to include it back in this template using the include tags and this way i can use it back inside of main.html so i can take this navbar and now use it in every page now i need to finish this up with a few more configurations i need to go through my javascript files change some routes here and i also want to link out to my post page so once i link out to the post page i want to take the post from the home page and put those onto the post.html page so i can see those and once i start rendering those out dynamically we're going to change up a few values so i need to take care of that and also create a page for my individual post so just underneath the post on my home page i'm going to add in this view more link and center it and this is where a user can go to see more posts that we have now i'm just going to copy and paste all the posts from the homepage take that styling and put it on our post.html page and here is where we have a single post so whenever a user clicks to read a post this is what they're gonna see so we're gonna have an image the headline and sub headline and then the body of the post now before i actually add in a database i do want to just output some data and loop through it in our template so i'm just gonna use this list of dictionaries and this will be replaced in the next step okay so everything's configured and now if we look at the template this is the same template that i had on the static site except for now this is configured to django and we're ready to have a full backend plugged in so the static files urls and everything's ready to be linked up [Music] okay so now it's time to create my database and to do this i'm gonna create two different models for my database table so i'm gonna have a post model and i'm also gonna have a tag model that i'm gonna link up with a mini too many relationship and within my post model i'm going to leave out a few attributes because i need to do those later so i'm going to leave out slug and i'm also going to leave out thumbnail for now now once i have my models i can run a migration and i need to link these up in the admin panel so within admin.py i'm going to register these and to see them i need to create an account and i need to log into the admin panel and add some data so i can actually render something out in the [Music] templates now within my views.py file i'm just going to run an import for my models and i'm going to replace this list of dictionaries with a query to my models and i'm just going to use the same name so within my post that loop that's in my post.html page is going to use the same data so this data is just going to be output and now it's going to render out data from the actual database now within my main loop because we're connected to tags by a many-to-many relationship i can just use another loop inside of that and i can generate some tags here and i also want to go back and style those tags i want to make sure that those are seen a little bit better and we can get a better output okay so that looks good so far the tags look nice and it kind of makes sense with a post now and i can just finish this section up by rendering out some data from my home page and also for my individual post that way we're able to actually go to an individual post and see the data for that specific post [Music] and now that i was able to query a single post by its id i can just take that data and we can put that within our post.html [Music] template and i'll just fix up some urls here make sure everything's connected properly so in the last step i just added some database items here and rendered that data out so now all i need to do is uncomment my thumbnails attribute here and add the image field now this field does require a dependency so i just need a pip install pillow which is just an image processing library and once i do that i just need to remigrate the database to add this new attribute [Music] now to actually render the image out in the template all i need to do is just add dot and then url and that's gonna output the image in the image tag so i'm just gonna go back to the admin panel now and add some images here so we have an image correlated to the actual post and this pretty much completes my database items here so now that my database is set up i'm ready to start updating creating and deleting items from that database so for this i'm just going to create a single template for creating and updating items and that's going to be post underscore form.html and this template is just going to render out a form that we're going to send to the back end now once i have my template i just need to create the views i need to create a form to actually render out so for this i'm just going to use a model form once i have that set up i just need to import that back into my views and render that out into the template through the context dictionary so i am sending files with my form so i do need to make sure that we can send that thumbnail image so i'm just going to set the ink type to multi-part form data and once i have that this should be what my form looks like and i want to fix these tags right here so i want to make sure that these are check boxes and not just a list so back in my model forms i'm just going to add this widget here so now my tag should come out as a checkbox field instead of that list that we saw earlier within my view i can just take in that post data and i'm going to pass that right into the form now i just want to run a quick check if the data checks out i want to save that form and then i also want to redirect the user back to that post page i do need to restrict some pages because i don't want just any user coming in and creating a post from my website or updating it so i'm just going to use the login required decorator and now if someone's not authenticated and they try to visit this page they're just going to be sent right back to the home page and for easier navigation i do want to be able to add in a link so if i'm on my own website and i want to write a post i can just add one but i do need to write in this check right here just to make sure that a user is registered before they go in and start creating posts my post page i am just going to copy and paste the create post method and there's a few things that i need to change here so i do need to make sure that we're passing in an id into the url parameter and we're going to actually have to query the post that we want to update and i am also going to pass in the instance of that post but other than these changes the view is going to be pretty much the same as create post and i just also want to add a button into each post so we can edit it by clicking here so i'm just going to run a check here and make sure only authenticated users can actually edit post now i can just test out my form i'm going to change a few values here save that and now i can see that my post was updated now the delete view is going to be pretty simple i'm just going to create a template we're going to inherit from our base template and i'm going to write in a question here within our form and all i want to do is whenever a user clicks delete they're just going to be asked a question and i just want to make sure that they want to confirm that that's the item that they want to delete so once a user clicks confirm that item will be sending post data back into my view and we're just going to confirm that by using the delete method so i'll also add the delete button to each post and now i can just hit delete and we can see the item was removed from our post page i'm going to use crispy forms to add some styling to my template so i'm just gonna have to pip install crispy forms and i'm also gonna configure a few things inside of settings.py and in my template all i need to do is load in crispy forms and add in crispy to whatever form i wanna apply it to now once i apply this it's going to add in bootstrap styling and one thing that i do need to make sure to do is make sure that i have bootstrap in my template which i already added earlier so once crispy is applied the bootstrap styling will be applied to the form so my form looks a lot better one thing i want to do is add some styling so whenever i have a bunch of tags they're not completely filling up my entire page so i'm just going to make sure that we can scroll and hide the tags in their own section so on my post page i want to be able to start filtering and searching this data so what i'm going to do is i'm going to pip install django filters i need to configure a few things inside of settings.py and i'm going to create a filters.py file just like my model form where i'm actually going to use that import that we just made to create a form around a model that we have this way we're able to actually filter down and search data once my form is complete i can import that into my views now within my template i'm just going to create a normal form except for in this case i'm going to send git data and this is just going to be my search form so i'm going to output the form using myfilter.form and to actually make this form work i need to pass in git data into my form within the view and i also need to change out that post query filter right there to take the data from the form and now if i search i can search by a headline and by tags and my forms working at this point so i want to adjust a few more things so back in my filter i want to make sure that i can do partial match searches so i can only search by certain characters and i also want to make sure that i can actually output tags in a checkbox field just like we did with our model form and i'll just finish this up by adding some styling so i'm gonna make sure that the tags aren't overflowing and i'm gonna use crispy forms like we did in the last section and i'll style my form so now my form looks a little bit better there's some styling applied along with my search form i do want to run some imports for a paginator so i want to start creating the pagination effect so we're able to go between pages and not list out all our posts at once on our page so down in my view i do need to create this paginator variable we want to set our limit to however many posts we want and i need to pass in a query set to that paginator method now i do need to run some try accept blocks here so i do want to see what page we're on check if we have a page and then also know how many pages do we need to output and how many pages will our post have just underneath my post i'm going to create the pagination in its own row and the first thing i want to do is run a check and see if we even have pages that we need to output now if that's true i'm going to create a loop inside of a list and i'm just going to output a button for every page that i need now once i have this i should be able to see it in my template and the next thing i want to do is run a check and make sure that the current page we're on looks different from all the other buttons so i'm just going to run that check and add a class to that button and set that to active so now that i have all my pages i do want to create a first and previous button so this is going to create an easier navigation effect so a user can jump back and forth a little bit easier and after that i do want to create a last and a next button so we're able to jump back and forth each way and this is gonna be done just outside of my loop and we're gonna have an if condition in there so we're gonna know if we need these buttons depending on where the user is in that navigation okay so now i can go back to my template and all the buttons are working so everything looks good so far so my pagination is complete but there is one more thing that i want to take care of and that is to make the search form and the pagination actually work together so the issue here is if i happen to perform a search and then i want to use the pagination i actually lose my place where the search form gets cleared in this process because of the page refresh now there's multiple ways to fix this but the method i'm going to use is to use some javascript here and i'm going to add an event handler that whenever we click a page button that search form actually takes the pagination data holds it in place and then submits it along with the page number so we never actually lose our place okay so now if we search and we use that pagination if we go through this you're going to notice that i'm not actually losing my place and both information from the form and the page is actually being submitted with that page click [Music] ok so i'm ready to configure my contact form and make sure that whenever a user submits this i actually get an email sent out from this form so i'm gonna start with the settings.py and in here i need to configure some backends so i'm gonna be using gmail i need to provide the port number the email account that's going to send that email and the password so we can actually log in and generate it [Music] so the cool thing about gmail is it actually allows me to generate an application password so i'm not having to log into my email account with my real password and put that into my website i can just use a password generator just for my website and that way it can log in on my behalf and generate an email so now that all the back end configurations are complete i'm going to go into my views.py file and i'm going to import the email message method and this method is what's going to generate an email on my behalf so i need to create a view here just for that email where we're sending that data and whenever we send data to this view i'm going to use that new method and that's what's actually going to send the email [Music] for the contact form i'm going to set the method to post and the action is going to send that post data into the view that's going to process the email [Music] [Music] and now i can test it so i can submit this and here we go now in my email here's the entire message along with all the information so all the email stuff's done the email sends it's all configured last thing i'm going to do here is just add in a template so whenever a user submits an email they can get back a response message that lets them know that the message was sent and they can also easily just navigate right back to the home page [Music] i want to clean up my urls right now so instead of using an id i want to use a slug field so for this in my models.py i'm first gonna import slugify and down for that post model i'm gonna uncomment slug and use a slug method for that attribute now once i set that method i just need to rerun a migration make sure we can add that and down below i'm gonna override the save method so normally we can use something like signals for this but i'm just gonna override the save method because we don't have that much right now and whenever we save this if we don't have a slug field we're just gonna generate one really quick and it's gonna put it into that slug attribute now the thing with the slug field is that it needs to be unique so i do need to run a quick check just to make sure that we don't have one and if we do we're just going to add in a number to the end of that slug field and then once we check it again it's just going to increment that number and make sure that the value is completely unique and we're not duplicating this [Music] now to test this i'm just going to add in a new model with the same headline and you're going to notice that we're going to get that number at the end of it and if we do that one more time that number is just going to increment and it's always going to be a unique value [Music] so i'm just going to go through really quick and i'm going to update all of my models because this will break the urls if i don't have these now once i've updated all the slug fields i do need to go back in and change up all my url parameters all the views and pass in a slug field instead of an id and also go back into all my pages and make sure that url path is passing in the slug instead of the id [Music] and now if i go through the pages we can see that we have that slug field instead of the id [Music] so traditionally when i'm adding blog posts to my website i want to be able to add in things like images links some styling to the actual post and not just output text like i currently have so for this i'm going to use a rich text editor and that's going to be ck editor which i need to import really quick and that's going to be with a pip install once i have that i need to add that to my installed apps and i also need to go to my models.py and run the import and then also change out the body of my post to use that rich text editor [Music] now once this is updated i need to run a migration just to make sure that it's added so now if we go back to the admin panel you can see that the body looks a little bit different i can add some styling here with a heading add in a table and change up a bunch of values here now if i go to my template you can see that it outputs it kind of funny so i need to go into the html here and add in safe and that's going to output the body properly and then i also need to go back into my forms and add in form dot media just to make sure that my post form within my template actually outputs it as a rich text editor the problem with my rich text editor right now is that i can't upload images into my post so for this i'm gonna have to use ck editor uploader and this is just another setting inside of the ck editor i need to configure a few things inside of settings.py and i also need to set some url parameters to actually find the file path so whenever we upload images it can find them in the static files folder [Music] once i add in the urls i do need to run collect static this is going to prep all my folders here so whenever we upload an image it's going to go directly into my ck editor folders now once the urls are configured i do need to run collect static and inside of my models up ui i need to import the ck editor uploader and also change out the field that i currently have in the body from the rich text field to the rich text uploader field that i just imported once that's done i just need to run a migration and this will prep everything for that file uploader field so now when i'm generating a post i can upload my image here and when i click send to server it's just gonna send it back into my static files and it's gonna store that image within the uploads folder in my static files [Music] now the project's winding down i'm almost done with this and i do need to start getting this ready to host so for static file hosting i'm actually going to use aws s3 buckets and i'm first going to start by pip installing storages and boto3 once i install storages i'm going to add that to my installed apps and i also want to create a bucket to actually start configuring my project so i'm going to go through this kind of quick i'm probably going to hide a lot of personal details but essentially i'm just going to create a bucket and i'm going gonna get some access keys some passwords that i need and i'm gonna configure this back in my settings.py now in settings.py i need to configure things like the bucket name the access key id the access key secret name and also change up how my project's going to store static files so default file storage static file storages this is all going to be using storages and boto3 so i'm going to set that and just prep the rest of my configurations now once i have this i'm going to run collect static and because of the way i set things up in collect static it's going to take all my static files and it's going to send them up to aws s3 so now if i look at my bucket you're going to see all my static files are now in my s3 bucket so now they're able to be stored publicly and i can actually use them in a live project so now that i'm storing everything on s3 i do need to fix that model image right there so i want to make sure that's pointing to my static files and if i go back into my rich text editor now if i upload an image i'm going to save this once it's uploaded you're going to notice the url parameter is not pointing to my django project but you're going to see this aws link so now images upload directly into aws [Music] so for hosting my project i do need a live database somewhere so i am going to use aws rds instances and for this i'm just going to create a postgres database on aws and then i'll just point it and connect it in my project now i'm going to go through this process kind of quick just like the s3 buckets i'm going to keep a lot of my stuff private here so i'll probably blur out a few sections skip through just to not reveal any personal information now to use a postgres database i do need to pip install a dependency here so i'm going to add that and once i do that i do need to rerun a migration so within settings.py i cleared out the sqlite database and now i'm pointing to my postgres database on aws so postgres uses pg admin if i log in here's my empty database so you can see that there's nothing in there so what i'm going to need to do is actually go ahead and recreate all my data so i'm gonna have to start with recreating the user and then i'm actually gonna spend a few minutes and adding some posts here and then i'll actually finish this up later so this is just gonna be some temporary [Music] data [Music] [Music] [Music] so for the final step all i have to do is deploy my django project to heroku and connect it to a domain now i already have a website on dennis ivey.com so all i'm doing is just changing out the files on heroku for this new django project so to start i'm gonna have to add in some files here so i'm gonna have to set up a runtime.txt proc file add in a git ignore and also make sure my requirement.txt file is set up so on github i'm just going to create a new repository i'm going to make sure to set this to private and i need to make sure to connect to this and push my files up onto this repository so back in heroku i just need to go to deploy here and i'm just going to connect to the new github repository so i'm going to disconnect from my old files here and once i have that i can just run deploy and it looks like i just ran into an issue when i go to dennis ivey.com so this is in my allowed host section so i just need to add in www and once i add this i'm just going to redeploy it so i need to commit these files and push it to master [Music] okay so here's my final project this is on dennis ivy.com we just replaced the old website with the new and everything looks good to go you

Channel: Dennis Ivy

Views: 91,725

Rating: 4.9576793 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Python, Javascript, Coding

Id: iQcJPeCcjNo

Length: 33min 29sec (2009 seconds)

Published: Wed Aug 05 2020