django-components - Build re-usable components in Django with TailwindCSS and DaisyUI

in this video we're going to dive into the D jangle components package and this is a package that allows you to build reusable template components in jangle and this will work well if you are building a website or an application that uses the jangle templates and potentially if you're building something that uses HTM X or another hyper media package now the components that you build they encapsulate the HTML the JavaScript and CSS for some kind of front-end UI component and then you can share that component from one jangle project into potentially unlimited amounts of projects so that's the idea behind the reusability of these components and in this video we're going to build our own we're going to see how to build a card component using this package now before we start I want to highlight this coffee page that I have open here I'm planning to release a Jango rest framework course in the near future and I would like to release this course on YouTube if possible but I'm also considering releasing these on a platform such as udemy but but if there's sufficient interest in this coffeee page and we reach that $1,000 donation Target I'm going to release this for free on YouTube and that would be my preference rather than going down the route of releasing this on udemy so if you're interested feel free to donate on this page we've got a link in the description and if you're watching the video give it a thumbs up it would help the content a lot and let's get started so let's start by looking at the D Jango components GitHub page and you can see that here on the right hand side we have the about section this package will allow you to create simple reusable template components in D Jango and if you scroll down just to the readme section what this is going to allow you to do is create template components and these components they contain the template which is the HTML code as well as any JavaScript and CSS that's needed to generate the front end code that you need for a modern application so jangle components allows you to bundle all of those into what's called a component and then you can render those components in your templates using the component template tag provided by this package and you can see here a component has a name and it also has some Dynamic values that you can pass into the component that customize what's shown in the component when it's actually rendered now this declaration of a component gets translated into some code that's then rendered on the page and that will be HTML with some CSS and the JavaScript that are specified in that component we're going to learn how to build a component in this video and if you're interested in other good practices for Jango templates we did a video on that that should be appearing on the screen now and that would be a good introduction to some of these Concepts that we're going to follow in this video however notes that it isn't essential to watch that so feel free to check that out we're going to go to the table of contents now one of these is some security notes we're going to come back to that right at the end of this video but let's now go to the installation section of this readme now the starting point here is to install Jango components into a python virtual environment so I'm going to copy the PIP install command and I'm going to open up VSS code and at the bottom here as you can see we have a terminal open and we have a python environment activated we're going to paste in the PIP install command and that's going to install jangle components into that environment we can then clear the terminal and I'm going to minimize that and we're going to look at settings. Pi in order to set up jangle components now what I have here is a super simple D Jango project it's not too far off the start project code that's generated automatically what I'm going to do is go down to installed apps and the first thing we need to do after installing Jango components is to add it to installed apps you can see that here in the readme I'm going to copy this and we're going to go back to vs code and just underneath the core application we're going to add Jango components and once we've added that to installed apps we're going to go back to the read me and there's a couple of extra steps from the templates setting we need to remove this one here so I'm going to go back to vs code and let's go down to templates and remove the app directories setting now what is that setting doing if if we go back to the Django documentation this app directories template setting will determine whether the Django templating engine should look for source files inside of the installed applications so we are removing that setting from the template setting and what we also need to do is add the options. loaders setting so I'm going to copy these loaders here that are defined and we're going to add these to the templating options so let's go back to vs code and under options we have some context processors but we're also going to add these loaders and the last one in this list here is the one that comes from jangle components now after we've done that there's one final step here we need to add the static files directory setting so let's copy what's here and we're going to go back to vs code I'm going to go down to near the bottom where we have the static URL and I'm going to paste this in and we can fix this reference here now the base directory in modern Jango applications is a path lib object so we can remove os. path. jooin and we can refer to a directory called components that we're going to create in a second as that static files directory now notice here that we're telling the Jango static files application to look in a folder called components in order to find the JavaScript CSS and so on resources so what we're going to do in the left hand side at the project root is create a new folder and we're going to call this this folder components so we've created that now and just to avoid confusion the components demo folder that is the jangle project folder that contains the set and the URLs the components folder is where we are going to store the components that we're going to create using the Jango components package and I've just realized how much I've said the word components in that last sentence we're now going to build a simple component to demonstrate how to do this using this package but if you're interested in more complex components or perhaps components that use HDMX just let me know in the comments I am quite interested in building some more videos on this package what we're going to do in this video though is assume that we want to to standardize the cards that we're going to display in this particular website or application so what I've opened here is the daisy UI card component and we're going to base the styles for this card on what's provided by Daisy UI now to start with what we're going to do is install da UI and Tailwind CSS because that's the CSS framework that Daisy UI relies on so what we're going to do is copy these CDN links and we're going to paste them into base. HTML so let's paste them into the head tag and this is the base template for this simple project that we have so by adding them there we're going to have access to Daisy UI Styles and components in this application now once we've added that what we can do is we can start building the component so let's go back to the GitHub page for jangle components and I'm going to go down to this section on creating our first component now we have a sample structure here of an application and what we can see is the components directory in the project that we've just just created and within that we have a subdirectory for any components that we want to create so in this example we're creating a component for a calendar and within that directory we have four potential files so we have a python file here and that's what ties the component together with some python code we also have an HTML file that defines the markup for the component as well as optionally some CSS and JavaScript the CSS is obviously for styling the component and if we need any interactivity we can use JavaScript in order to build that in now we're going to create a card so what I'm going to do is go back to VSS code and we're going to go to the components directory which is currently empty and we're going to create a new component directory called card and within that we're going to create two files so let's start by creating template. HTML and that's going to contain the markup for this component and we're also going to create the python file and it's going to be called card dopy so let's start by building the markup for this card let's go to template. HTML and we're going to go back to the daisy UI documentation and what I'm going to do is go back to this card page here so let's go back a couple now you can see the classes that you can use here to define the card we have the parent card class and that defines a card component that's a container element in da UI we also have card title and body and these allow you to define the title and the body of the card and so on we're going to scroll down and we can see what one of these cards might look like so here we have a card that has a border around it and we have an image in the title and the body contains a header and a paragraph and then we have a button here that's kind of like a call to action and in this case this could be an e-commerce website and this would allow you to buy the product and we could have a card for the different items that we're selling on that e-commerce site now we're going to keep it simple in this video so I'm going to scroll down and we're going to find one of these cards that doesn't have an image and that's mostly because I'm quite lazy and I can't be bothered adding an image field to the jangle model or anything like that what we're going to do is we're going to copy the HTML for this simple card that contains only a title so I'm going to copy all of this and we're going to go back to the template. HTML and paste that in here now later on we're going to make some of these Dynamic values that you can pass into the component but for now let's keep them hardcoded once we have the HTML we're going to go to card. piy and we're going to write the python code to Define this jangle component component now let's go back to the readme for jangle components and we're going to look at the sample python component here I think it's easier to view in vs code so what I'm going to do is just copy paste this into card. piy and we're going to look at the code now at the top from the jangle components package we are importing the component and then we Define a python class it's called calendar here but I'm going to over write that and call it carved and that will inherit from the component class from this package now we register a named component I'm going to call this component carved and then we provide the template name for that particular component so our template is in a directory called card and it's called template. HTML so we need to change this and reference the correct HTML for this component and a component class can also take context data and that's defined in a get context data method and that's very similar to the convention on jangle class based views for now we don't actually need this so I'm going to remove it and we also have a media class in the component that points to the CSS and JavaScript files for that component for now we're going to remove this but we will Define these later on so we have a very simple component here and we are inheriting from a component class and we are pointing towards the HTML for that component once we've defined it how do we actually use this component what we have in this project is as well as a base template an index.html file now at the moment this is a very simple template it just says hello what we're going to do is run the D Jango server with the Run server command and then we're going to go to the page and you can see Hello appearing at the top left here so not the most exciting page you've ever seen but let's now learn how we can add the component onto this page and display the card from da UI so I'm going to go back to the readme for Jango components and I'm going to scroll down to this section on using them in jangle templates now what we need to do is to start with is use the load component tags directive and we need to add that to our templates so I'm going to go back to index. HTML at the top here we're going to add the load directive so underneath the extends template tag we can add load component tags and then underneath our hello statement we're going to use the component template tag from this package and we render a named component and remember we registered this with the name of card so we're going to render that and then we can add the end component and that allows us to very simply Define this component called card and hopefully that's going to render on the page so now if everything is set up correctly we can go back to our application and when we refresh the page you can see we now get the card appearing on the page and this is good because it allows us to very easily render cards within our template so we can copy and paste as many of these as we like and go back to the application and you can see them appearing top to bottom on the page page and if you wanted them to appear on the horizontal axis from left to right we could wrap these components within a div for example and give that div a class of Flex from Tailwind CSS and then we can tab over these components and end the div below and by giving this the class of flex it's going to position these cards from left to right along the row axis by default so when we refresh this page you can see they are now appearing from left to right for the purposes of jangle components we've encapsulated everything in a component called cart and we can very easily structure these cards on the Page by using tools like Flex boox now often it will be important to pass custom information or custom data into the cards that we're showing here if we look at the three of these at the moment they are rendering out nicely but they contain exactly the same information which is not ideal now your custom data that you want to show it might come from apis or it might come from your database so you might be fetching data from the database and using jangle models and queries sets to display that on the page in that case we can't hard code all the information we need to pass data into these components somehow so that's what we're going to learn how to do now what we can do is go back to VSS code and go to card. piy and we're going to go to this class that defines our component now earlier on we got rid of get context data so we're going to bring that back now and this is a method on the components it's going to take self as a parameter but it's also going to take any data that you want to pass into the component component so what we're going to pass in to start with is a title for the card so let's give it a parameter of title here and we can return a python dictionary and that can contain keys that you can map to different values so we're going to map the title key to a value that we're passing in here called title and then we can go back to index.html where we have our three components and to each one of these I'm going to pass in a title and that's a piece of data that will determine the title that should be shown so we're just going to give it very simple title here of Title One title 2 and you guessed it title three and there's one final step here in order to render that title on our card we need to go back to the markup the HTML for the card and what we're going to do here is we're going to remove this hardcoded title and we're going to use jango's syntax here to refer to a dynamic title value that we're passing into this component so this is no longer hardcoded this should now be coming from the data that we're passing in here and you can think of this as being somewhat similar to props that you pass in a react component so if you're rendering a child component in a react application you can actually pass props in there to pass data down to that component I know some people don't like react but that's just a simple comparison here what we're doing is passing data into our component and we can then accept that and render it out here within the components HTML so let's now try this out we're going to go back to our page and I'm going to refresh this page and you can see now the titles on the card have changed we have Title One 2 and three respectively on each one of these cards now as well as the title we might of course want to customize the body as well as the text that appears in the button here so I'm going to do that now as well we're going to go back to card. Pi as well as a title we're going to accept a body and let's also accept some button text and we can actually provide default values here so let's say the default value is buy now once we've added these parameters we can add them to the context so I'm going to add the body and I'm also going to copy the button text here and add that to our context once we've added the context dictionary we can go back to index.html and now our component is expecting these pieces of data from the context so let's add a body to these for the first one we'll just add body one and we're going to copy these to the two below so now each one of these components has a body body 1 2 and three respectively if you if we go back to card. piy we also have the button text that's also part of the context but notice that that does have the default value and because it has that default we don't need to pass that data into the component so if we go back to template. HTML what we're going to do is replace these hardcoded values again in the paragraph tag we're going to reference the body and then we can reference the button text here where we have the button so that's button undor text we can save the HTML for this component and we're now going to go back to the browser and refresh this page and we can see the body that's appearing has body 1 2 and three and all of the buttons have that default of buy now so if we wanted to change the button text we could also do that let's go back to index.html and to the top component here I'm going to pass the button text in as some data if we then save that and go back to this page you can see that the first button here now has different text of click here whereas the other two Say by now as they did before that's the default value for that button text so we're now building up our component and we're allowing it to accept Dynamic data that we're passing in and again as I said before that data would typically come from the models that you have in your Jango application so coming from the database or coming from an API or a cache so you can then take that data and you can pass it into your components and that's going to render based on the HTML CSS and JavaScript that you define for that component now let's move on I'm we're going to see now how we can add custom Styles and JavaScript to these components in order to further customize how they behave and how they look so we're going to keep this very simple what we're going to do is we're going to change the background color of each of these cards and we're going to do that by using some custom CSS let's go back to vs code what we can also do within the card component directory is Define a CSS stylesheet so I'm going to call this style. CSS and we're going to define a class called card background gradient now what this is going to do is it's going to define a background and that's going to be a linear gradient so we're going to define a very simple and perhaps unattractive linear gradient between the colors blue and red and that's going to be the background that we want for the card so let's copy the name of the class and go to our card component template and within this template what we're going to do is we're going to remove this background color of background base 100 and I'm going to p based in this new CSS class that we've added called card background gradient so we want this to change the background color that we see here on the card and if we refresh the page we're going to see that that does not work by default and the reason for that is because we need to actually tell Jango components to load in our static assets or css files within the head tag of our D Jango template so at the moment basically jangle components knows nothing about the style.css so in order to tell it about that we need to do a couple of different things the first thing we need to do is go back to our component class that we've called card and remember from earlier on the copy pasted code had a media subass and I think the correct term is actually it's a nested class not a subass so we have a media nested class here similar to The Meta class in ajango model or form and within that we can define a CSS property and we're going to point that to our CSS file so that's in the card directory Within components and it's style.css that we called that once we've done that we can go back to the documentation and in order to use the components in the templates along with some static assets what we can do is we can add component CSS dependencies into the head tag so let's go back to the base template of this project and just underneath the script tag to load in Tailwind I'm going to paste that component CSS dependencies template tag from Jango components and then if you go back to our page here I'm going to refresh this page and you can see we're getting an error here an invalid block tag called component CSS dependencies did you forget to register or load this tag yes I did so let's go back to the template here and because this is a tag that's defined by jangle components we need to actually tell this template base. HTML about that we can copy what we provided here in index.html that's the load component tags directive and we're going to paste that at the top here and that's then going to allow us to use this within the base template so let's now save that and go back to the page and when we refresh this page you can see we now have this amazing looking linear gradient as a background color for our card now I'm going to try changing this a little bit so let's go back to the CSS file I've defined this very randomly and it turns out a linear gradient from Blue to Red with no other parameters doesn't look particularly good in this card so let's try changing it to something else rather than blue to Red let's try from Gray and what could we put for the second one here instead of red let's put silver in here and see what happens when we do that not the most scientific approach to a linear gradient but when we do that it's not looking ideal but it's certainly better than it was before so that's how to embed Styles in the component what we do is we Define a stylesheet that we can put in the component directory and then we refer to that within the media nested class and point to that stylesheet now what we're also going to do is Define a Javascript file and that allows us to add interactivity to our component So within the card directory I'm about to create a script. Javascript file so let's preemptively set that up here and then I'm going to copy the name of this within the card directory We'll add script.js and here we can write the JavaScript that we need for whatever the component is that we're creating now one other thing we need to do as well as adding JS to the media class is we need to also add something to our HTML you can see here component JS dependencies so as well as CSS dependencies we also need to declare this template tag from jangle components so let's copy that and we're going to go back to base. HTML and within the body just below this div here with the content I'm going to paste that in so let's go back to script.js we're going to write the JavaScript for our component here if we go back to the page what do we want to actually write here this is a simple card so we're just going to do this for demonstration purposes but let's say when we click the button whatever the button we click we want to display an alert on the page and that alert should contain let's say the text that's defined in the button now how do we Define the script what we can do if we go back to the documentation for jangle components there's a recommended pattern that's used here for your Javascript file so a good way to make sure your component doesn't clash with other components is to Define all code inside what's called an anonymous function and that Anonymous function should call itself and this is a pattern in JavaScript that allows you to basically avoid polluting the global namespace and that's because it makes all variables that are defined only available inside the component and it's not going to affect other components so in order to Define that Anonymous function what I'm going to do is copy this and we're going to go back to script.js I'm going to paste this in in here and remove all of this code here so to Define that we create a block here we have a function that has no name and here is the body of that function and this is anonymous we then call that function here and basically anything that we Define in here is going to be private to this block of code so what we're going to do is get a reference to all of the buttons that we have in the component we can use the query selector all method in order to do that and we're going to get the buttons from the template once we have these buttons butons we're going to add an event listener to each one of them so buttons. for each and for each button that we get back on the page we're going to Define this call back function and for each button we're going to call ad event listener we're going to listen for the click event and when we get that we have an event being passed in here what we're going to render here in an alert is simply the buttons text content so button. text content that's going to be alerted to the page so let's go over this one more time we are getting a reference to all of the buttons in the Page by calling document. query selector all and then for each one of these buttons we'll taking that button we're adding a click event listener and when the button is clicked what's going to happen is defined in this callback function we're going to alert the text content for that button when it's clicked now you can pass the event as an argument but I'm not actually using that here so I'm going to remove this from the Callback function and we're going to save the script and we're going to go back to the page and hopefully this is going to work so let's go back to our page I'm going to refresh this to load the new static assets when we click this button you can see an alert appearing and this is quite small I hope you can read that but it does say click here and when we click one of the other buttons you can see it's got the text content from that particular button showing in the alert and same for the last button on the page so that's how you can customize the component that you're building and add interactivity to this component and by bundling together the HTML the CSS and the JavaScript like this what you can actually do with jangle components is build reusable components that you can then perhaps take from one project and add it to another project if we look at the documentation what they've got here in this reference is a calendar so you could build a calendar or some kind of date view or even an accordion or something like that or a card like we're building and you can basically componentize that and bundle together everything you need for that particular component and ideally you can then use that component in as many jangle projects as you want so it's the idea of building reusable components all you need to do is Define your HTML your CSS and your JavaScript and you can think about the interface for what data needs to be passed into that component for example for a card you might want a title a body perhaps an image and so on now before we finish I did say we would touch upon the security section of this document a so I'm going to scroll up to the security section and this section you're advised to read this before you use jangle components in production so basically components they can be organized however you want but the preferred way is to keep the files of a component close together by bundling them in the same directory and that's what we've done here we've created a components directory and we have one component called carved and all of the files that we need here for that component and that's the JS the CSS and HTML files as well as the python file they're all bundled together in that directory so basically we're following that pattern and it means that the files containing backend logic such as python modules and HTML templates these live in the same directory as static files for example JavaScript and CSS files now if you're using the static files application in jangle to collect your static files there is no distinction made between different kinds of files so what happens then is that your python code and template might inadvertently become available on your static file server and this is something you probably don't want it will expose the code that you're using in Python for these components so backend logic is going to become exposed and that's certainly a potential security vulnerability now as of version 0.27 which is quite a long time ago jangle components will now ship with an installable app and that's called safer static files and the name says it all this is a dropin replacement for for the static files app that comes out of the box in jangle and the behavior is 100% identical but it will ignore Python and HTML files so it's not going to collect those when you run the collect static command and therefore python files will not end up on your static fil server and neither will HTML failes so all we need to do is add this safer static files to the installed apps so I'm going to copy this and we can go back to settings.py and I'm going to go up to installed apps and what we can do is comment out the default static files application in jangle and we're going to paste in safer static files instead and I need a comma here after jangle components once we save this file we can go back to our page and everything should still look the same when we refresh this page but we have this additional security consideration we've taken that into account and we're adding safer static files to protect the python and HTML files that we Define for our component code so that's just a security consideration and it's very easy to mitigate that by adding safer static files to installed apps so that's all for this video we've seen how to work with jangle components in this video and we can build reusable components and Define HTML CSS and JavaScript together with a python file in order to define the behavior the Styles and the markup for these components these are reusable we can ship them off to as many applications as we want and I think this is something that has a lot of potential in jangle and something I want to use a lot more and if you're interested I'd like to build more videos on this topic and I would also like to look at HTM X and how we could use jangle components along with HTM X in order to build interactive applications and one thing I did want to note on the read me for jangle components there is a community examples section and one of the goals of this package is to make it easy to share components between projects now we have a single reference here and that's a set of components that you can use with HTM X and that's called Jango HTM X components I'm going to click this and this is a repository with 122 Stars I haven't tried this out yet but I'm very interested to see what kind of components that they have if you're interested and you want me to make a video on that let me know in the comments and as I said at the start of the video if you're interested in a jangle rest framework series on YouTube it would be greatly appreciated to donate to this coffee campaign that I have there's a link in the description thanks again for watching I hope you've enjoyed the video and we'll see you in the next video

Channel: BugBytes

Views: 4,401

Keywords:

Id: Pnp9IIxOXPU

Length: 31min 7sec (1867 seconds)

Published: Mon Jun 17 2024