HTMX Post Pagination | Django Project | djblogger | 30

welcome to the Django project DJ blogger this tutorial is part of a YouTube Django Project Playlist which you can access in the video description you can watch the whole course from the very beginning if you enjoyed this course and would like all the updated tutorials and Associated Kodi samples and more you can check out this course and other courses this project features at udemy the link to the course is in the video description so now we're going to move over to HDMX if you haven't started to utilize or even if you don't know what hdmax is do you recommend going over to the website htmx website and have a read through some of the documentation to get a general idea of what type of features that it offers now ultimately htmx as it describes itself is a library that allows us to access modern browser features directly from HTML rather than using JavaScript so instead for example of loading all of our posts in at once you can see this page here we've loaded all of our Pages all of our posts sorry at once that can be a lot of data imagine all these images that needs to be loaded from our server or onto this page that can take a long time to load onto this page so by breaking this up for example into smaller chunks and loading them as and when they're needed that can improve the performance of our page here so what we're going to do here we're going to utilize htmx and the Technologies within to load or paginate if you like this section here of our website so we load only 10 posts at a time so when the user goes to its page 10 of these posts are loaded if or when they were to scroll down to the last post what's going to happen is we're going to send a request to the database to our server to Django and then return the next 10 posts and that's going to happen indefinitely until we get to the end when there are no posts left in our database and now to do this we are going to utilize the tools which essentially will come from Ajax asynchronous JavaScript and XML so here we're using Ajax technology to essentially send a request to the server without reloading the page and that's important of course we don't want to reload the page every time we want to add new data we want it to look seamlessly so when we scroll down Ajax behind the scenes is going to send a request if you like to the server grab that data and then we're going to update this page here so hopefully you've got a general understanding of what our goal is here what we're going to try to achieve in this tutorial let's get back into our project and let's go over to our templates so DJ blogger templates and the blog templates so here we have components and we have the index page let's just try and think about this first and work out the type of resources or what is or how we're going to achieve this so the user Scrolls down to say the 10th post at that point we're going to send a HTML Ajax request over to the server that's going to grab some data from the database and then we're going to return that here on the front page and at that point we need a way of then presenting that data so we're going to need maybe some sort of template code which can then be injected into our page and display that new data that's returned from the database so let's go over to the components here let's grab a new file in our blog components so that's in our templates here let's grab that and say post list elements so this is going to be a separate component which is going to load in all of those posts and then we can utilize that again potentially to then output the new data that's been returned as and when the user Scrolls down so let's go ahead and access our index as well and we're going to now just move this across so from the the loop the loop start to the end I'm just going to remove that from the index um yeah move that from the index and then I'm going to put it here in this new page here and then in the index here let's just go ahead and include that in so we just need to include that new template now so that's going to be in component so from index I need to go inside of the components folder and then inside is now we've got a new file now called post list elements dot HTML okay so let's just make sure that works now I do have the server running so back into my page here refresh you can see that everything is loaded nicely now you may notice that the image changes that's just been generated from a service online so every time I refresh that's going to be a new image so let's go back into our blog DJ blogger blog and then views inside of there you can see that we have our single View at the moment and that's the view that we currently use for our home page so built into Django is pagination features so this is going to allow us to split up our data into multiple pages but in this case remember we're not going to use traditional pagination in terms if you click on the next page and then you click on the next page we're going to be utilizing Ajax to send requests and to grab that data that next page data if you like and then return it back and display that directly on our page so this is really just really simple to set up here in our class based views we simply just need to specify paginate by and then we then specify like you saw that the integer that we need so we're going to paginate by 10 posts so every 10 post we're going to create a new page if you like so we're going to in our case we're going to display 10 posts when the user gets down to that tenths post we're then going to display the next 10 posts automatically and the user can continue scrolling down the page so now we have two questions that we need to solve one how do we get it so that when we get to the 10th post we know how to load we know then to load the next 10 and then secondly how does Django know that we want to then load the next 10 pages okay let's solve the first issue first which is how do we know we need to trigger something when we get to the last post let's go back into our post elements here so this represents a block remember this represents one of these blocks every time we Loop Round and output data it's going to make one of these blocks so what we can do here within hdmax it provides us an option it's called revealed so this is a trigger that we can set so if we're going to search revealed revealed okay so here we have revealed so files fires off so it starts or runs once an element first Scrolls into the viewport so this is our viewport here the page so what we're saying here is that this tool here allows us to set this up so as and when we scroll to a certain element if this element has the property reveal property it means it's going to fire off some code once this here which has been tagged as revealed gets into our viewport our page so as and when we scroll down say one of these elements is going to be tagged as revealed for example once it's on our page and it's viewable it's then going to trigger the code to then load the next 10 posts so the question is now well how do I actually get that to be on the last post that's outputted that's the next question right so what we're going to need to do here then is just use some of the tools that Django provides So within our Loop let's add a new component here I don't work on components so if for example the for Loop for for Loop even dot last so what we can do is we can tell Django for the last item that's looped out let's do something different okay so um let's finish this off with a mouse so basically when we Loop through all the data what's going to happen if if and when it finds the last item that's being looped we're going to do something slightly different and what we're going to do let's just remove this so this needs to be outside of of that so this isn't dependent upon the last element um okay so this is the top component here the top dip or the outer dip so I'm just going to copy this I'm going to put this inside this if it so what's going to happen here then if it is the last post we're going to Output a different div here if it isn't the last well then we're just going to continue using the the normal div here okay so let's um first of all end this if foreign bellishing on this a little bit but hopefully you can see what's happening here so we Loop through all the posts when we get to the last one we detect it's the last one we output this let's get rid of this end a minute here so that's the the div the outer div start now if it isn't the last item then we're just going to Output the the normal div here so what we want to change here is we now want to add the trigger so HX trigger equals remember using revealed r e v e a LED revealed okay so that means that we're going to tag this last post that gets looped out with the revealed property so we can see this match and if we refresh the page we go down to the last post here and the starting seems to have changed for some reason let's go ahead and inspect this last element here um a little bit so down a little bit just rear and you can see here that we have the HX trigger revealed so that's then applied on this last post that's displayed in our list let's just quickly change the styling here so I'm just going to take out the in scroll class here in the a tag let's just put this into the H1 here and so I'm going to call this H if scroll now title I'll make sure I add that back in so just to add that now imp scroll title there I'm just going to change the styling so our styling can be found in our static Main and remember we had this imp scroll H1 so I'm just going to change that now to imp scroll title both there and in the media at media so that should hopefully solve that little problem we have with the H1 no it makes it worse okay oh no there we go so hard refreshed you can see now we're working okay it's working okay okay right so now we need to deal with well now we need to make a request so when we get to the last post we're going to need to make a request to then see the next 10 items now what you've already noticed already is that there are only 10 now posts being displayed because we've set the pagination number in our view so we're going to now create a h uh HX get request so let's close our styling there and let's go back into here so this is going to be applied again only on the last element that gets outputted so after HX trigger we're now going to or before that or after that we're now going to apply a HX get so this is going to perform an action this is going to be for an perform a h HTM htmx Ajax request if you like over to the server and grab some more data so this equals so this is the action that we're going to perform now what we need to do here is simply to specify the URL to send the request and then add some additional information which correlates to how Django outputs and paginates data so first up then let's specify the resource we want to access now what we're doing here is essentially we're sending a request to the home page again so let's go into our URLs in our blog you can see that we've called this home page so back in our element here so we're going to then add a URL and that's going to be home page so we're going to grab the URL of our home page okay let's just see if this is working so refresh the page again so go back down here and I were to inspect this move this across you can see here that HD HX get is just slash referring to the home page as a quick recap we now have pagination activated on our view and we're only displaying 10 items we've Now set the last post to revealed so that it performs or activates or triggers something when we get to this last post and we're then going to then set up HX get to then send her Ajax request to the server and grab some more data so now we need to wait within our view here of actually detecting that a request has been sent by our home page and then give our home page or send back the next 10 posts so we're going to install the hate Django htmx Pi Pi extension that's going to give us a few different features which is going to enable us to capture hdmax requests and then we can perform an action based upon that so let's go ahead and copy that let's go back to our project open up our terminal close this server Ctrl C clear that and then don't do that and then pip install Django htmx so let's get that installed right so while we're here before we forget let's just make sure that we CD go back up a folder let's make sure that we pip freeze everything now we've added some more extensions pip freeze and then requirements.txt and then we change directory back into our TJ blogger and then we're back into where the maged.pi file is right so now we have that extension installed we should be able to now capture htmx requests so what we're going to do is we're going to send a template back to the home page whenever hmx request has been made because remember when we want more data we also need a template to display that data so what we can do here is we can override get template names and what we can do is whenever a HDMX request is made we can send back only the postless elements template remember that's a template which is going to Loop through all the posts and then output the data so that's going to Output or display the new data that's being requested so get templates names self and then basically first of all we're going to say if self dot request uh Dot htmx so what we're doing here is that whenever we send a HDMX request behind the scenes within the request are some is some metadata which we can detect in this case the htmx information if we can find that that means that our home page has been has triggered the htmx code which is in the end or the last item or the last post that's rendered and then we can perform an additional task so let's first of all let's just print let's just go ahead and print something random X okay so let's just give this a go so we're going to Python 3 match.pi let's just run the server okay so let's go ahead and go over to our home page let's go to the top let's refresh you can see that object has no attribute htmx okay self request htmx do something wrong here back in the views let's just make sure that we return our template as per normal which is going to be in the DJ oh actually um it's going to be in blog index so what we can do now because we've overridden the get template names we can remove our template name now okay so we're going to return blog index.html there are two steps that we missed apologies I didn't really put this in a very good order but in order for us to actually install the Django htmx extension there are these three things that we need to do first of all install as we have already seen secondly we need to add it to our settings so go over to DJ blogger settings and then our base so we need to add that in and then the last component is that we need to add it to our middleware if it was a little bit strange how I introduced all of this then head over to the Django htmx documentation you'll be able to see the three-step guide here so I'm going to just install the middleware to add it at the bottom here and then we can now start to actually extract or see the htmx within our requests so if we go back into our views let's close that so DJ I've got a Blog our views so we now would be able to capture the request if it is a htmx request and we'll go ahead and just print out XXX we don't need that for now so we're going to return the normal template if not so let's just get rid of that let's give this a go right so let's spin up our server and let's go ahead and refresh our page and there we go so the point being now is that when we scroll down to the bottom now obviously the last component here has been triggered and so what we should have now is we should have printed out XXX so let's just double check the templates I may have made a change to them inside a Blog we've got components and let's just make sure this has been added so it looks like I've removed the htmx for some reason so remember we've got two properties here the HD HX get and then we added the HX trigger revealed I'm not too sure why I removed that so let's just try this again so I'll refresh the page go down to the bottom and you can see at the moment you can see that it's just dripping out at the moment in actual fact so let's go back and you can see that we have actually outputted so it does look like our if statement here is working so what we need to do now is we need to swap this so whenever we get down to the end here what we want to do of course is to Output our template so to do that let's go ahead and return and then we're going to return the templates of blog slash uh components so we're referring to the template folder as a Blog slash components slash and then the post list elements dot HTML okay so let's get back into our home page just refresh again so when we get down to the bottom here and see that it's starting to it is a little bit strange it looks like it's leaping forever there so it's not quite ready yet so let's get back into the code and finish this off so what's happening behind the scenes here is that Django is paginating our data in increments of 10 now to access that typically we would pass in a page parameter and tell Django what page we want it so if we had a hundred posts and we collected those and we separated them up into tens we would say page one is post one to ten page two is post and so on and so on so we're just breaking this up into 10 posts at a time so what we need to do is that when we send a request for the next lot of posts we need to specify the page number that we want to get so the first page is page one that's the first 10. and then when we get down to the bottom of that when we make our request we then want page two so what we're going to need to do here then in our request is to specify what page we want to return so we're going to extend this and then we're going to specify what page we want to get so here we're going to say page object number so we're going to pass in the page number now what we want to do every time we output is we want to increment that page number so that we can get the next page so let's use our pipe and then let's add add one so basically every time we add every time we get to the last element it's going to add one so the first 10 is going to load the last element is going to have page one then we load the next lot that's going to have page two and so on and so on so when we trigger it it's always going to get the next page so to put that in place okay I think that's a that's now sorted right so there's some other properties that we attribute so we need to add here so we need to for example include the HX swap so we need to set this to after after end so here we just simply specifying where we want to place our new code so you can see here swapping we can put the code in a HTML out HTML after the beginning before the beginning and so on and so on so here essentially we're offering different htmx here there's often different ways to return the data and to actually kind of load it into our page so with that in place we're now ready to give this a go so let's refresh our page right so we get down to the first 10 and you can see the scroll bar was navigated or moved up indicating that we've got another 10 posts and now we have another tempos now we have another templates and that's going to happen all the way down remember we've in the previous tutorial we added a hundred posts you can add some more if you like and that's going to keep happening all the way hopefully to the end or forever in this case foreign now let's take a look at why that is what we saw there is that we were looping through our data forever but you may have noticed that the data that was outputting again was exactly the same and if we inspect the server log here you can see that we're requesting the same page so we get the first page we get down to the first 10 and then we request more data and you can see each time we're getting the same page so we're just returning page two forever so let's get back into line four here in our post list elements and notice what we didn't specify is equal so we simply weren't adding the number correctly so let's give this a go now we'll refresh the page again and let's get back down to the bottom scroll it a few times and then we'll have a look again you can now see this time we are indeed collecting this the correct page number so what should happen eventually we've only got 100 posts we should be able to get down to the bottom and there we go so we're down at the bottom here so that wasn't the smoothest tutorial but hopefully you're getting a general sense an idea of now how to apply that within your code now I did try to generate some errors here to give us a better view or deeper View into how to maybe debug when there are errors because you're bound to have an error you're bound to type in incorrectly now and then so I think it's good to see how potentially you can resolve those problems

Channel: Very Academy

Views: 6,609

Keywords: django tutorial, django blog, django project, htmx, django htmx

Id: FcFk-fBX7kc

Length: 27min 27sec (1647 seconds)

Published: Fri Jan 13 2023