Neapolitan CRUDView in Django (with django-crispy-forms and TailwindCSS integration)

in this video we're going to take a look at a fairly new package in Jango called Neapolitan now this is a thirdparty package and it allows you to very quickly build crud views in a Jango application and the benefit of using this package is that you can take a Jango model that you have in your application for example this book model that we have here and you can build very quickly these crud views for example a page to list all of the books and the ability to click these books and view the detail page as well as add new books to the database update existing books and also to delete books from the database and you can do all of this get all of that crud functionality with just three lines of code if we go to views.py all we need to do is Define a Neapolitan crud view link it to a model and specify the fields and you get all of that functionality basically out of the box we're going to dive in in this video and see how to do that now before we do that we have this coffee page if you want to support the channel we have a link in the description and we're trying to get to this goal at the moment so if you can that would be appreciated and don't forget to like and subscribe as well so let's get started now what I have in vs code is an application in Jango and this was basically generated with a start project and start app command we have a single app called core and what we're going to do to start with is install Neapolitan and we're going to have a look at the Neapolitan documentation to find out a bit more about this package so let's open that just now and we're going to read through some of this to start with if you want to skip to the code we've got sections in the description now neopolitan is a reusable library for jangle projects and it provides quick crud views for applications now this helps you get your models into the web output very quickly and it includes base templates and some reusable template tags in the Neapolitan package now what it does in a nutshell is it takes some of the things you might see in the jangle admin UI such as the ability to very quickly create and view resources and update and delete resources you can do all of that now with Neapolitan inside of a normal Jango application so not necessarily as an admin user you can very quickly spin up these crud views using the Neapolitan package now this is fairly new and I've not used it a lot so we're going to dive into this and explore it in this video but in a nutshell if you have a jangle model you can very easily create these crud views by importing this class from Neapolitan it's called crud View and then after you've imported that you can simply subass it and provide it a model along with some fields that you then can create and update new instances of the model and when you've done that neopolitan will then render some default Pages for you to allow you to view these resources attached to the model as well as update create and delete these resources so let's dive in now to an example if we click this link here for the tutorial we can see how to install Neapolitan so we have a pip install command and the name of the package is neopolitan so I'm going to copy that and let's open vs code we have a terminal at the bottom I'm going to run pip install here and we're going to pass in Neapolitan that's going to install this package into the python virtual environment once that's installed what we can do if we go back to the documentation now we've already started a jangle project and we've created an application in that project we're going to create a model very soon if we go just below this block here we're going to add neopolitan to installed apps so if you're using this package you need to have it in the installed apps setting so let's go to settings. Pi and at the bottom we're going to add neopolitan now the idea of a crud view is centered around models in the application so let's go to models.py and what I'm going to do in this video is imagine that we were building a library management system and imagine that we can add update and remove books from the library as well as view the books that we have in the library at a given time so we're going to build this crud view in Neapolitan in order to do that but to start with we need some models so what I'm going to do to start with is create a model called author and that's going to inherit from D jango's model class and I'm going to keep this model very simple it's going to have a name which is going to be an instance of a car field and we'll give that a max length of 100 characters and we'll also Define a under string method on the author to return the name of this author now the core model in this application is going to be the book model so let's create another jangle model here called book and we're going to tie the book to its author its parent author and we're going to use a foreign key to do that so that's why we've created the author model what we're going to do now is create the fields on the book model now one of the fields that we're going to add here is going to be a genre field that's going to take some choices so I'm going to paste this list in here and this contains some different book genres that you might have in a library once we've done that we can create the fields on the book so the book will have a name that's going to be an instance of a car field and let's give that a max length of 200 characters as well as that we also want the genre so this is going to be the choice field we'll set that to a carfield and we'll give it a max length of four characters because if you look at the genre choices above the first element of this tiple that's going to be stored in the database that's a string that contains four characters or less and that's the human readable name for the given genre so that's going to have a max length of four but we also want to attach those choices so that the form the neopolitan is going to create for us knows about these choices so in order to do that we can set the choices keyword argument of the carfield to this list that we created here so that's the genre field I'm going to create a couple of more Fields published date let's set that to a models. DAT field and I'm going to create a Boolean field on the book as well to denote whether or not it's available in the library so we're going to make that a models. bullan field and we can pass default arguments in here so for example by default we might want to make the book available in the library so we're going to default that to true and the final field on the model is going to be the author field and that's going to be the foreign key that we have to the parent class the author model and when we delete an author we're just going to Cascade that so these are the fields on the model and one of them has these choices defined what we're also going to do is like before Define a thunder string method to return the name of the book now once we create the jangle model classes we can save models. Pi I'm going to clear the terminal and we're going to run a management command here and that's the make migrations command that's going to create the migration files and when we create these migration files we can then run the manage.py migrate command and that's going to create the SQL light database and it's also going to create those new tables in the database for the two models that we've just added now once we've done this and again this is the setup part of the video it won't take much longer we're going to go to admin.py and I'm going to register these models in the jangle admin so we can import the models into admin.py and then we call the admin. site. register function and that provides a very simple way to register your jangle models in the admin interface once we've done that again let's go to the terminal and we're going to run another management command and that's going to be the create super user command so we're going to create a super user for this application called admin and we can give them a password once we've done that we can run the Jango development server and we can log in to the admin once we're in the admin UI we can go to the different models that we have at the top right we have a button to add a new author we're going to do that now and I'm going to resume the video after I've added some authors and some books to the system so I've now loaded that data and we now have some authors here and we also have some books that are attached to these authors we're going to work with these and develop a crud View using Neapolitan that's going to allow us to view this data in the normal jangle user interface as well as allow us to create update and delete book instances from the system so as we saw earlier if we go back to the documentation if we go down to this section on wiring up Neapolitan views what we have here is is the import of a crud view class so I'm going to copy this and we can go back to the jangle project and we're going to go to views.py and at the top we can import that crud view class from Neapolitan do views once we have that we can create our own class and subass this crud view so what I'm going to do is create a class here called Book View and we create a subass of the crud View and there's a field on that called Model that we can set to the model we want to tie this crud view to and that's going to be the book model in our application now we need to import the book model at the top as well so let's do that from the models.py file and we also want to provide a list of fields or a tuple of fields and these fields are the ones that we're going to display on our form when we add a new book or when we update an existing book so I was going to set that as a tuple actually let's just set it as a list we want to update or add a book and we want to specify a name an author a genre the publish date and the isavailable fields and these are all fields that we we defined on the book model class here so we can pass all of these or maybe some of these fields have a default value we don't need to add it to the crud view so you have a bit of flexibility over the fields here now we can customize the crud view even more by defining some functions on The View I'm not going to do that at the moment but let's go back to the documentation now if we scroll to the top here let's go back to the main page here and what I'm going to do is go to the crud view reference and the crud view this is the core of Neapolitan and it will Prov the standard list detail create edit and delete views for a model as well as any hooks that you might need if you want to customize any part of that now if we scroll down a bit here the crud view provides handlers for these different views so for example for list and detail views the crud view provides a list method and the list method allows you to customize the logic when you're fetching a query set of the given model and we can also F uh customize sorry the behavior when we fetch an individual model and that's using the D detail method as well as that we have custom views that we can override if we want to create and update views with some custom logic and the same for a delete View and if we scroll down further we can customize the query set and object lookup now if you're familiar with Jango class-based views you might be familiar with these methods such as get query set and get object so the crud view comes built in with all of these methods that you can use to customize and hook into different parts of the request processing so this is customizable we are going to just work with the outof the Box definition so we don't need to override any of these methods if you're interested in more videos on Neapolitan where we dive into this or even class-based views in jangle in general let me know in the comments and we'll consider some of these different videos and one last one to note just before we go back to the application for response rendering we have get context data so if you need to add custom context into the response and make that available in your jangle templates you can also override this method here and as you can see in order to provide custom data custom keys and values in that context dictionary now I'm going to go back to the tutorial that we were looking at so let's go back to this here and let's go back to the section on wiring up Neapolitan views if we go just down here you can see that what this is defined in this crud view is a urls.py file now we've done that in the views.py file that's where these kind of views should be defined but what this is doing at the bottom is it's calling the name of the class and it's calling a get URLs static function on that class so that's going to generate all of the crud URLs for this given view so what we're going to do is go to the URL patterns that we have in the application and what we're going to do here is remove this list we don't need the list itself we're going to reference the views that we've imported here and we called our Neapolitan view Book View so let's reference that and that has that static method get URLs we can call that and that's going to generate the URLs for the book viw and that's going to include URLs to get a list of books to get an individual book by its ID as well as the create update and delete URLs now before we try this out let's go back to the documentation one more time Neapolitan will expect to extend a base template so the default templates that come with this package they will extend base. HTML so you're going to have to provide that if you're wanting to work with this package now if we go back to VSS code I'm going to go to the core applications templates directory and that contains a base. HTML template that has some HTML boiler plate essentially and we're going to use that as the base template importantly it defines a Content block and Neapolitan is going to extend this base template and Define its own content block and that's going to inject the HTML from those templates into this section of the base template so after all that we're ready to test this out I'm going to go back to the browser where we're on the jangle admin UI and let's go to the root URL of this project now when we send that request we get back this page here and that's the 404 not found page but if we look at the URLs that defined here as well as the admin URLs we now have these different URLs here there's five of them for different book based endpoints so for example SL book will give us the book list page and/ book SL primary key is going to give us the detail page and we can also send a post request to book SL new in order to create a new book and also we have endpoints or URLs for updating books and deleting books so let's start with the list endpoint we're going to add that URL at the top so it's SL book and when we send this request we get back this table here containing all of the books that we have in this system and we have a button here that will allow us to add a new book and we get this very basic looking form that's going to allow us to add a new book into the database as well as that we have actions on the right hand side of this table so to view an individual book such as Neuromancer at the top we can click View and we get back some of the information about the book you can see the details that we defined in the model such as the publish date the genre and we have a primary key for the author and if we go back to the table we also have actions for editing a book if we wanted to edit this for example let's pluralize that book we get back this now and if we go back to the table and refresh you can see that that has updated that in the database and we can also delete the book if we want to as well that takes us to this confirmation page and we can click delete so this is all working now using Neapolitan we have all of these crud actions available to us and if we look at the jangle view that we had to write in order to do this it was extremely simple we just inherited from or subclassed the crud View and then we linked that to the given model and provided the fields that we want to add or update and all of that functionality then was provided for us out of the box now you might notice that it doesn't look particularly good so out of the box it's very basic in terms of the UI Styles but if we go back to the tutorial and go down to next steps you can see that the def default templates that Neapolitan provides they use Tailwind CSS classes for styling so what we need to do is integrate Tailwind CSS into jangle and there's more than one way to do this and what we are about to do in the method described in this documentation is not recommended for production if you're wanting to do this in production there are better ways of doing that and I'm going to make videos very soon on how to incorporate Tailwind into a jangle project in a more production ready way let's say but what we're going to do for now is just copy the script tag that is from the CDN and that's going to copy the entire source for tail1 CSS and import that into your project so let's go to base. HTML and let's go to the Head tag and underneath the title I'm going to paste that script and that's the CDN link for Tailwind CSS now with that one simple change we can go back to the page that we have here and when we refresh the page you can see this is now looking a lot better so the table is all styled up with Tailwind CSS so are the buttons and so are the links and when we click the view action we're taken to this page here for the book detail View and of course you can extend these templates to add your own features and your own pieces of functionality Etc these are just basic defaults that are provided out of the box by Neapolitan now one thing to note if we click add a new book the form that you see here is not styled up it's not looking particularly nice although the button itself looks okay the rest of it is not looking ideal now what we want to do here is we want to add some Tailwind styles to the form but the question is why does the table page here and why does the detail page have these Styles but this ad page here that you see with the form and also the edit page these do not contain the Tailwind styles by default now what I'm going to do is go to the Neapolitan GitHub page so we're on this GitHub page now and what I'm going to do is go to the source code and we can look at the default templates that come with Neapolitan and the one we're interested in here is the object form. HTML this is the one that renders the form to add a new object or to update an object and if you look here you can see that the form is basically rendered directly to the page so we're not applying any Styles here and that makes sense because as much as neopolitan gives you a lot of good stuff out of the box if we look back at the table page one thing it doesn't know is what the models in your application are going to be it doesn't have any information about the fields that are going to be involved in the form so it can't Target those fields directly and provide styles by default so it's kind of up to you I think if you're using this package to just override this template and provide these styles for your forms we're going to do that just now let's go back to the documentation for Neapolitan and what I'm going to do is go to the template reference page so this is a page that tells you a bit more about the generic templates that can be used as a starting point for your project we've already seen these here these are just a starting point you can extend these and what we're going to do is we're going to extend them using this manage agement command that's provided by neopolitan it's the make template management command so if you want to override a single template for your model you can run this make template management command and you provide the model that you want to apply this to and then you can provide the action after that so what I'm going to do is go back to VSS code and let's go to the terminal and stop the Jango development server and we're going to run Python manage.py and it's the make template management command now the model is in the core application and it's the book model model and the action that we want to override is the create action so we pass the D- create flag and then we can run this command and let's see what happens now we get the following error and that's that there's no such file or directory and what it's looking for within the core SL templates folder if we go there just now core SLT templates it's looking for another subdirectory called core now in there we don't have that so we're going to create a new folder now called core within the templates directory and that's a jangle convention when you have application name such as core if that's got templates in that application you can then create a templates directory and then you can create another sub directory with the name of the app and that's what we're doing here and we've called that subdirectory core that's the same name as the application so I'm going to do is try running this command again it's called make template and then when we run that this time we don't get an error and if we look in the core directory you can see that a template file has been generated here and that's book form. HTML so I'm going to minimize the term and we're going to look at the book form and you can see that that is extending the base. HTML and that's the reason that the base. HTML file is outside of this core directory because otherwise we would need to change this to core base. HTML and it wouldn't work with the default templates so we now have this custom book form. HTML and that's going to be rendered when we go to the add book page so when we click this we're going to be taken to that ad book page and you can see the same form as we saw before but it's actually loing this new template that we actually have in the project it's not the default template so I'm going to change this up a little bit and we're going to style the form better and I'm going to use Tailwind CSS because that's already installed in this project and we're going to do that alongside jangle crispy forms so what I'm going to do is go to the GitHub page for crispy tailwind and this is a Tailwind template pack for jangle crispy forms so we're going to use jangle Krispy forms we're going to use the syntax that you're probably familiar with from that package and we're going to apply the crispy filter that you can see here to the form that's in this template so we need to install these so let's go back to the documentation and we're going to run pip install crispy Tailwind in the virtual environment so at the bottom here let's run pip install crispy Tailwind that's going to install that into the virtual environment once we've done that let's go back to the GitHub page what we need to do is add both jangle Krispy forms and crispy Tailwind to the installed apps so let's start with that and go back to VSS code and I'm going to go to settings. Pi underneath Neapolitan let's paste these in so we now have crispy forms and crispy Tailwind in the installed apps we can go back to the documentation and these two lines of code I'm going to copy these and just below installed apps I'm going to paste these in so crispy allowed template packs we're going to set that to tailwind and we're also going to set the crispy template pack variable to Tailwind as well now we can save settings. pi and we can close that off and if we go back to book form. HTML we're going to add some code here now now to the form we want to add the crispy template filter so let's do that just now but it's not going to work by default and if we go back to the GitHub page we're going to see what we need in order to get that working so if you're using the crispy filter what we need to do at the top is load the Tailwind filters from the crispy Tailwind package so let's copy that and go to the top here and underneath the extend statement we can load those filters if we then start the Jango development server and go back to the application you can see the form as it was before but if we refresh the page we're going to see that this now looks a lot better because it's using those styles from Tailwind CSS that have been applied by this crispy Tailwind package that we've added to the project now you might notice how large some of these fields are we can constrain the size of this form just by adding a container around it so I'm going to go back to the template here and we have the form here and we also have a div we can add a class from Tailwind to this div and let's see with 50% here if we add that and then save this when we go back to the page and refresh the page you can see the form takes up 50% of the width so it's very easy to take the default templates provided by Neapolitan and to extend those in order to add your own Styles and add your own custom HTML into that template now just to see that it's working let's go back to the form and I'm going to add some data to this form and then we're going to test submitting this form so I've added this data for the book neurom answer by William Gibson and this is a Sci-Fi book and I've added a dummy publish date here if we click save we're then taken to the new detail page for this new book and you can see in the URL we have a primary key of eight that's been assigned to this book and then if we go back to the list page you should see that at the bottom here we have our new book so it's been successfully added to the database when we submit that form and of course we can view the detail page we can edit the existing data and we can also delete that book from the database using the delete action so that's the power of Neapolitan allows you to very easily generate an entire set of crud views for a given model in your application and you can then customize those pages and you can customize the behavior of the view class and whatever ways you need to in order to achieve the functionality that you want if you're interested in any more Neapolitan videos in any kind of context let me know in the comments but that's all for this video thanks very much for watching give it a thumbs up if you've enjoyed the content content and subscribe to the channel if you've not already done so and as we mentioned at the start of the video if you're enjoying this content and you want to support the channel consider donating to the coffee goal that we have we've got a link in the description thanks again for watching and we'll see you in the next video

Channel: BugBytes

Views: 3,055

Keywords:

Id: PMgihDySEY8

Length: 24min 17sec (1457 seconds)

Published: Mon Jul 01 2024