Modernise the Django admin UI with Unfold

[Music] hi everyone and welcome to my next video tutorial which is going to be focused on modernizing our Django admin UI or user interface so I just want to show you a few examples here of how this user interface can be modified so as we can see here we have a light theme here and we also have a darker seam here in place so I'm going to show you how you can set this up and make your Jango admin more modern in a sense now it's very flexible and it has a lot of interesting ways that it goes about utilizing the Django admin now there is a lot more to it in terms of what you can customize and set so if you were to scroll down here you can see that there are a lot of things that you can go ahead and modify as you so desire now I'm not going to go into full details that but I'm just going to go ahead and just set up the basics View and then of course you can go ahead and refer to the docs and Implement what you would like to add into place all right so let's get started so we're going to install the Django unfold package SL Library so you want to first of all make sure you have ajango project that you want to work with so make sure you've got that set and in that particular Project's virtual environment so make sure you're in your virtual environment you want to say p and install Jango unfold so go ahead and install that Library there we go great now the next thing that we want to do is we just want to add in the minimum installed um apps that are required for this application so we can scroll down okay all the way to install apps here so under the installation heading you want to look for unfold now what's really important is that you add this before the Jango doc. admin app all right so so what you can do is just go ahead and copy this then head on over to your settings. Pon of your application so here by your list of installed apps you want to go ahead and add that in as follows then of course all you want to do is you want to go ahead and run your server so I'm just going to say python manage.py run server okay so just run your server and that's just going to confirm that everything is okay so just refresh and and we good to go all right now another thing I want to mention is in my application I of course have an app here as well called web app and this web app also has a model called customer now this is a model that I'll see that is part of my web app so we will see of course um how this all correlates in the Django admin panel so let's go ahead and create a super user before we access Jango admin so we can just say let me just make this of course wider so python manage.py create super user and leave on the default SK email add in a password and again and run our server perfect now we can head on to the Django admin and there we go so as you can see here we have a very clean looking user interface for the Jang em pinch it's a lot more coherent and a lot more cleaner and you can also see you have the opportunity to change the seam here seamlessly so we're on dark mode but we can switch it to light mode dark mode and the system of course so we can see here it's very clean so let's keep it on dark mode for now and what you want to do is go ahead and enter in your credentials accordingly all right so as soon as you've entered into your credentials you can go ahead and log into the Jango admin panel so here we go as we can see now we have a very Sleek modern looking Jango admin panel here we can see everything is containerized according to our app so our default authentication authorization app with our default group and user model and as you can see I have a custom web app uh here situated which I just showed in my application here and of course I have a customer model so let's actually view this so if we go to our group model we can see the design is very similar to the default Jango admin seam although it's been touched up and just modernized as we can see also have our user model here set up and ready to go quite clean as well and as you can notice here the booin field of course it's green and of course it says true or false accordingly sent to the parameters here for our users we head on back we can also see um if we have a custom model per se and here I have a customer model and if I say add for adding a record here we can see here we've got our field set up and ready to to go of course everything looks very similar here in terms of what we have in the default um ux you could say so the user experience for the Jango admin theme that we have on the default we also have this uh um similarity in place here so our homepage we can also see and we can also migrate easily here between our various apps and the models associated with those apps you can also change the seam as we desire so if I were to set this to the light seam we can see of course we can also see we can change what we prefer so this is a very nice widget that we also have into place that we can just change as we prefer another thing of course we can also click here on this user icon and of course we can see the current um super user that's logged in we can go ahead here and click on view site so that's going to take us to our application which is on local host for where we are currently running from and of course we can log out out of our application as well so let's go ahead and do that as a chest so say log out and here we have a nice message saying you've been successfully logged out from the administration thank you for spending quality time with the website today and if you say login again here it's going to take you back to where we were previously and of course we can just go ahead and easily switch between those seams as we so desire but yes that is what encompasses this um specific Library called of course Jango unfold so again it's one of the nicest uis that I've seen so far and it's definitely something that I recommend that you check out now that's it for this video tutorial guys and as always thank you for the support and for watching and of course I'll see you next time goodbye

Channel: Cloud With Django

Views: 3,426

Keywords: Cloud With Django, CloudWithDjango, cloud with django, cloudwithdjango, django, cloud computing, aws, django packages, django best practices, django full project, best django project, django tutorial, learn django, how to deploy django project on server, Django, Django admin, Unfold, Django tutorial, Django admin UI, Modernize Django admin, Django admin customization, Django admin theme, Unfold for Django, Django admin panel, Django development, Python Django, Django UI design

Id: XKD7w12xP3k

Length: 6min 44sec (404 seconds)

Published: Tue Jun 25 2024