Dynamic sidebar - Django Web Development with Python p.11

Key Takeaways

what's going on everybody welcome to part 11 of the Django web development tutorials in this tutorial we're gonna continue but not the last one and making our tutorial page look a little better than that so right now we have it at least up to the point where the home page shows categories we can click on any of the categories and then we get the tutorial series that match those categories but let me click on the tutorial series we get this so now what we want to do is begin to set up the URLs that work for tutorials themselves so what we're gonna do now is pop on over here and the first thing we need to do is head over to our views dot pi I'm also gonna get rid of this will keep models in case I want to point to that we don't need that and we'll keep actually we're done with URLs DUP PI as well so okay so we're gonna do our work right in here and really we're gonna just change this code here so this is if the tutorial is inside of one of the tutorial objects like if it matches one of our tutorials hey we got a match so what we want to do is we're gonna pass basically that tutorial to the some page we don't have it yet where we're gonna render the tutorial stuff like a title and big you know title font and then the content and all that and then later we'll even do a little sidebar because it would be relatively simple to add in actually that's probably the most complex query we're gonna make but it's okay it'll be easy let's go so yes I've had my coffee so what we're gonna do is start with if so we know it is a tutorial so then all we would want to say is if single slug is in tutorials I'm trying to decide so in this case we're actually matching the URL I've wondered I'm trying to think if there's some better way than referencing all ever Tom there's got to be a better way than what I'm about to do I'm gonna go ahead and do it this way but someone could think of probably a way to only make this call one time check for the slugs and then later check you know get the specific tutorial but anyway here we go we're going to just run another query basically and we're gonna say this tutorial is equal to tutorial dot dot get and then we're just gonna get we're tutorial slug is equal to single slug so all we're doing is just going through these tutorial objects which loop here tutorial loop and then single slug so we match based on the slug which is why I think hmm there's probably a better way but we'll just do it this way for now plus it gets us to write another query and this will be like the easiest query so we've had to write so anyway so we're just finding the tutorial that matches that slug so boom that gives us the tutorial objects so in this case we use a dot get as opposed to a dot filter so yeah it's gonna get the object a filter is gonna get a list of these objects okay so we got this tutorial now what we want to do instead is return render I keep wanting to have a render template that's from flask anyway return render and we'll do requests and then in this case the path to the template so main slash this will be tutorial dot T ml and then we pass the context which in this case we're gonna make its tutorial which links to this underscore tutorial ok so now we just need to make tutorial dot t ml easy enough I'm tempted to copypasta this I think I will there's really no good info there and we can keep this shorter so I'm going to continue with that copypasta technique linked to this tutorial is in the description or you could type it but I just see it as a big waste of time nothing new here so we're going to go into main templates mein you can really copy and paste any of these I'm gonna copy a page home I'm gonna call this now tutorial tutorial okay good spelled that right here we go a tutorial here okay so tutorial just as it does we're going to extend the hetero HTML here's our block content we're gonna make this a row because I already know in advance hey I'm going to include a sidebar so in the case that the window size is very small we're going to say hey take up the entire grid otherwise if it's on a medium screen or a large size screen like a full screen like a desktop screen hey take up eight columns so we can reserve the other columns for the sidebar you can feel free to tweak this later but for now that's what we're going to go with so then it displays the tutorial title we give the published publish time and these are in paragraph tags but then for tutorial content since we use one of those like what you see is what you get editor's we just post up the content and then use the safe flag to display it we've been doing that since the very beginning though so nothing really new there so that's refresh introduction to Python programming but a boom but a bang you've got yourself an intro to Python okay so so we've done that the same thing if we get like intermediate Python there's your introduction to intermediate Python very good so now we want to do the sidebar so how do we get so we want a couple of things first of all we want to get all of the tutorials from this series of the current tutorial then what we want to do is it would be nice we don't have to do this but it would also be nice to denote where we are currently like which one are we looking at and kind of stick that out so what I mean by that is if we go to real Python permanent it if I like refresh to this page the one that yeah this one is the one we're currently on but then we could click on this one and be like yeah let's go go to that one okay so we can do stuff like that so that's kind of what I want to do here on like any individual tutorial page I like to have the sidebar here so the way that we're gonna do that is coming over to our views upon this tutorial now what we want to say is man my back is itchy this tutorial and then I'm just trying to make it big as possible this will be a long one it's gonna run off the screen no matter what size we do so what we're gonna say is tutorials from series probably could come up with a better name but we'll stick with that we're going to say tutorial DX dot filter filter so we're going to filter by tutorial so first we need to get the tutorial series so tutorial underscore series now what's tutorial series that tutorial tutorial series is a foreign key so we already should know that okay we're going to point to tutorial series now if we want to reference anything else under here what we're gonna need to use is the double underscore so what we will do tutorials ears boom what we're trying to reference here is we want to reference the specifically the tutorial underscore series where that tutorial series is equal to this tutorial so again this is a tutorial object well it has an attribute tutorial series hot-diggity let's so then we're just gonna say this tutorial dot tutorial series so take note the filter bits where we're using like attributes is a double underscore but then we're like to get it to do the equals here is we're back to Python land regular land I'd love to know in the backend hey man I'd love to know in the backend how that double underscore even works like are they using some sort of regular expressions or is this an aspect of Python I've never heard of I'd really like to know I might have to go in the back end and like how they handled the that like what exactly are they doing there cuz yeah you'd want to use dot you know but no that doesn't work so alright so filter by a tutorial series but it we don't just want because then then we can use those to populate a sidebar button who says that those are going to be in the right order right it's important that they're in the correct order so just like we used dot earliest before I'll just zoom out a little bit now just like we use dot earliest to get the first tutorial we can also dot order by Doug banana and we can order by again tutorial published boom so you can order by that and then you could if you wanted to reverse it you can either reversed or colon colon negative one either those should work anyway so now we've got the tutorials that are a part of this series and they are sorted for us finally one more little thing that I'm going to grab is this tutorial idx so we want the index of this specific tutorial why do we want that Centex glad you asked Jeffrey the reason why we want that is because we want to be able to pop out which one is the one we're currently on so we have to as we iterate over all of the tutorials we need to know which one which one are we trying to kind of like highlight or pop out and so to do that we're going to use the index so as we iterate over we can also grab the index I'll show you how in Django templating and then when those two values equal each other boom that's the one we're gonna say is the active bit in the sidebar you're welcome Jeffrey so what we're going to do this tutorial idx let's zoom in again bring it back up to where everybody can see this tutorial index what we want to say here is going to be list of or so we're converting to list the two tutorials from series boom and then we're gonna grab dot the index of this tutorial tutorials so we're just getting the index value of this specific tutorial by converting the tutorial stuff to the list great ok tutorial this tutorial and then what we're gonna add now to the context is side sidebar sidebar will be tutorials from series it's actually kind of hard for me to see in this this size it's probably not so bad for you guys cuz it's probably you're viewing it much smaller than me but it's hard for me to see things anyway sidebar this tutorial index that's so weird that I make it that big and now I can't see it anyway is this tutorial index so now we're passing these three things to our tutorial HTML page and again I'm gonna copy pasta but what I'm gonna do I'm gonna copy and paste it and I will explain it completely for you guys so I'm gonna do this oh my gosh I there we go okay now I'm gonna zoom out now it looks like a lot of stuffs been added but most of it is materialized stuff so so this has not changed this is exactly what we did before and then here we're adding in the other remaining columns basically on a small screen it'll just come it'll just show below the above the tutorial otherwise it'll be on those four four remaining columns and then it's a UL class collapsible pop-out that's a materialized CSS specific class then what we're doing here is for tutorial in sidebar so tutorial in sidebar here that's just all the tutorials in a series which we ordered by tutorial publish date so those should be we're just assuming that's correct if for whatever reason that isn't necessarily always going to be correct for you you can always go into the MA and then add another parameter called like part number or something like that so you could later come in and edit which part is which or something like that and that's totally fine you could sort by part number or order by part number sorry not sort anyway hmm so I know we were in tutorials HTML okay so then so that's for every tutorial now interestingly enough inside of any for loop you can do this you can say if for loop dot counter 0 you can like in inside of any for loop in Django templating you can use the variable hey bro okay you can use the variable maybe I can't but you could you can use for loop counter and this will be a counter starting at 1 so 1 2 3 4 but Python doesn't start at 1 it starts at 0 so in this case for loop counter you can say for loop counter 0 and it will start at 0 this way you can make pretty lists and stuff and you can do all kinds of fancy stuff so super useful that that's there that you can just say for loop counter and you can use it as a parameter but also in our case if those indexes match up right if it's equal to this tutorial index that we're saying this list element is the active element therefore we don't need a button to let go to it basically otherwise the list element is this bit in collapsible now I know you guys are probably like wait wait wait wait what's all this right this is the collapsible stuff from materialized dot CSS I'm not exactly sure where it is probably actually in JavaScript because it's actually uses JavaScript so yeah jot so to go to the JavaScript area then click collapsible and it makes stuff like this right and you can do all kinds of fun stuff with there collapsible so you can feel free to change the collapsible from what I am using as well you don't have to use the exact same one blah blah blah tons of great information yeah you get the idea so you can learn more about collapsibles there if you but just now basically I copy and pasted their code and then through in my modification to make it a four loop inside of the collapsible unordered list that's all I did alright so save that and then let's go to our website refresh boom we've got a beautiful sidebar one thing you might notice right away is the print function I must I must have made a mistake on this one I'm gonna argue an assert that I I messed up I done goofed on part two let's go back to the home page let's go to data analysis yeah this may this looks a little better I must have accidentally pasted the tutorial into the summary bit or something yeah I don't know actually that's curious what did I do maybe into the title instead anyways that's not important so cool it's here but we we can't click on it what's going on me and well again if things aren't working press f12 reset your your view in fact wow actually we're not getting an error no error huh I'm surprised that we're not getting the error anyway I already know what's wrong but really I guess I guess because what we're doing is referencing the classes so there is no error to be had I suppose anyway we need to bring in some JavaScript you ruined my flow so we're gonna go to header and what we need to bring in it we need to initialize all of the JavaScript so I'm trying to see here did we initialize any because we have this JavaScript but this isn't the same stuff instead what we have to do is initialize materialise which is something a little different so when you import this javascript it has some of the stuff that you're going to need but if you want to use some of their more fancy JavaScript you have to initialize the materialized CSS stuff so that's what we're going to add here so just underneath tiny MCE here I'm just gonna add another set of script tags in fact no I'm gonna add another set of script tags and then what we're gonna say here is m dot Auto in it boom and that will initiate everything I bet if we go here it'll tell us oh here initialize this is what you would need to initialize specifically this stuff so actually this is either way you can use jQuery or you could use regular JavaScript I don't know a JavaScript idiot so I don't know anyway someone will comment below I'm sure anyway to initialize you can either use that or you can just initialize all the drop are all of the materialized stuff cuz there's a lot of stuff here that we're gonna end up using anyways so you might as well gate just initialize it I think so anyway you can do that and then we'll come over here and I don't know where I found that a little snippet it obviously wasn't here it's somewhere though anyway let's try to refresh again though close this still for some reason we still don't have the ones sticking out which is curious to me but now we can click on this and go at least I wonder I'm curious to know why our if for loop counter 0 what I'm gonna do is work to talk hmm I hate to do this let me just do this let's just do a quick variable here paste I'm just gonna paste in the current for loop counter ooh hold on how how what in that work oh we only did it for the active one duh oh my gosh that's our whole problem is we're not seeing zero one two so it's definitely working the next thing I'd like to know is this tutorial index can I do I'm just gonna throw head into maybe that's wrong whoa okay so clearly that's must have typo'd something this tutorial idx hmm something is wrong index this tutorial idx this detroit ex that goes to here why I'm just not seeing like anything on that page oh there we go now we get to okay why not in here though it's kind of weird isn't it this tutorial ID eggs oh okay that had to have been part of the copy pasta right this idx oh my goodness this is killing me because this okay so I didn't I wrote this code out I'm not so stupid dad it's just dumb anyway then so but in my text-based version I actually call this variable this T UT ID X who dummy okay so our issue is pretty simple we were calling the variable this so this variable here this never existed so now let me do this delete those big dummy dummy alright save that so we fixed that tutorial link there over here refresh it works good job everybody okay so finally now if I go to like this one for example boom it knows hey you're on that one and then I could go to this one boom it knows we're on that one we did it whoa okay and then by the way if we continue to squish this in word write this now becomes more fullscreen and then if we scroll all the way to the bottom we see okay now it's down here okay well I think this is a good stopping point I actually thought this would go much faster I don't know how long this video is gonna be everything's been like over 20 minutes and I keep not believing that it's been that long questions comments concerns whatever feel free to leave them below otherwise if you feel so inclined you could check out that beautiful blue button right over there look at that I bet it food feels so good if you just clicked on anyway that's all for now I think in the next video I'm gonna focus on deployment not exactly sure how I want to do that cuz there's like easy ways and there's hard ways to do the deployment so I might let it hang for a little bit and see what most people want so I can either provide a script that you can just run and it sets everything up so you can run the script on like a boon too and it just sets it up wherever you want to host it and I'll show you guys setting up hosting and stuff like that more we could do it the hard way where we do like everything on video like I could go through like the script and tell you like here's what's happening but we don't have to type it out and wait or we could type out literally everything but that would take probably like 4 videos or more so I'm just not really sure which way I want to do it so if you have an opinion feel free to leave it below as far as what you know what do you want to see when we actually do a deployment and then also there's like other things that you need to like look through like with Django like your your key and how you're gonna handle static and media and all this stuff there's lots of little stuff but I'm tempted to use a script instead just because for most people I'm not really sure the setup prophets like a thing you're just gonna do one time and then in the future you would just use the script like I'm really excited to have this script because I don't need to type all this stuff in any more so anyway and then we could at least talk about the script just in case something changes down the line but easy way or hard way let me know down below otherwise that's it for now questions comments concerns suggestions whatever feel free to leave them below otherwise I'm gonna see you guys in another video