Create a Todo App using Spring Boot + HTMX + Thymeleaf + MySQL + Bootstrap

hi everyone welcome to javarus today we are going to create a to-do web application using htms we will use spring boot spring data jdbc HDMX time leap and mySQL database this video is divided in some sections in the first section we will look at all the tools and libraries which we will use in the next section we will do some initial setup so you can jump to the next section if you are already familiar with all the tools which I mentioned about now let's discuss about the tools which we are going to use first of all we are going to use HTM X so HTM X is a library that allows us to access modern browser features directly from HTML without using JavaScript so basically it allows us to send request to server without writing JavaScript we can use attributes to send requests when they specified events are fired also we can specify the target which should get replaced by the response we get back while using hmx we need a back end where we can send the request that's where spring boot comes into the picture spring boot makes it very easy to create Standalone spring based applications in order to render HTML using spring web we need something called template engine and th leavea is one of those it is widely used and very common template engine which we'll be using in this video and we will store the too items in mySQL database and we will use spring data jdbc to interact with database from the spring application we will use one more Front End Library called bootstrap which is used to create and Style Elements we will not make fancy UI but a decent one using it now that we have discussed about all the tools and libraries let's go to the next section where we will set up the project welcome to the second part of the video where we will do all the initial setup of the project now let's create a spring board project in order to do that we will go to Spring initializer website which is star. spring. iio here for build tools I will select grel groovy language Java spring boot version 3.2.1 for group I will be specify Dev do javarus do HDMX for artifacts I will specify HDMX to packaging is jar and Java version is 17 now we need to select some dependencies first of all let's select a spring wave since we are creating a web application second select time Le since we will use that as template engine third we need to choose a MySQL driver or connector in order to connect to mySQL database and last we will select spring data jdbc which will make our life easier while doing database operations now click on download button it will download a Gip file which contains everything for us to get started so it has downloaded MX 22. G now let's verify using LS command so we can see stmx 22. here let's unzip it using unzip command and let's remove the original jip file and go to htms to directory here we can see all the content which is generated by this string initializer website open this directory in your referred ID I'm using intellig idea but you can use anything you want it will take some time to build an index the project initially now we need a MySQL server to store the to-do items so either you can install MySQL server in your machine or you can use Docker to do that so I'm using Docker so we can go to this link which contains the MySQL image MySQL is the name of the image and here I will use latest tag now in order to use this image you can read this documentation so either you can run this command and it will start up the container with mySQL server inside it or we can use something called doer compose so I will use the another method which is using doer compose file so we need to create a file with the name doer compost. yml so let's go go here let's create a new file Docker compose yml and here we need to create a node called Services which will have all the services which we need we need only one service for MySQL and we can give give it any name I will name it MySQL this service needs the name of image image now image name consists two things first the actual image name which is my SQL and then the tag so I will use latest we need to do some Port mapping as well so ports I will map the port 3306 of my host machine to Port 3306 of the container we also need to set some environment variables so you can find all the list of environment variables in this space so these are all the environment variables so we will use MySQL root password to set the root password I will use root as root password the second variable which we need is mySQL database which will be the name of the database so whenever this container will be created one database will be created with this name let's use stmx as the database name and then we will use my SQL user environment variable which will be the username for this database so let's use Dev here and then we need MySQL password which will be the password for this user for this database let's just say pass here now let's run this file in order to create a container with mySQL server to do that we need to run this command Brer compose of B so it says no configuration file provided LS we have okay so by mistake I created doer compos yml file inside SRC folder but we want to put it inside HTML stud refactor it and let's run that command again now it has started the container so you can see that using Docker PS command that this container is running and Port 3306 of host machine is mapped to 3306 of the container and this is the name of the container so that is working now we have all the setup ready we can actually start working on the project I will meet you in the next part of the video hi everyone welcome to the third part of the video in this section we will display the list of all the toos so let's get started first of all in order to represent the too item we need to create an entity let's create a class with the name too so go to main Java da. javar rus. HTM x. hmx too and let's create an class here I will create a record and the name will be H I have created a record so that I will get all the constructors getter and Setters out of the box now in order to connect to the database we need to create a repository let's create a repository with the name too repository create a Java class it will be an interface and the name will be hu request and it will extend CED repository so this is a generic interface and it has two types first is the type of entity so that will be too the second is type of primary key now let's go back to the the too record and here we need to specify all the fields so first field will be ID and it type will be int so let's just say integer ID so this is the ID of the too and then we need Title and then we need a Boolean flag which will denote whether this too is completed or not so let's say Boolean completed now since this ID will be the primary key in the table as well so let's annotate it with ID annotation and now since the primary key has a type integer here we can specify integer so now we will get all the functionality like find it by ID or find all to and everything so here we need to create a method because what we want to do is we want to P the toos using the status whether they are completed or not for that we need to create a method the return return type will be list of all the too which will me the criteria and we will say find all by so it will find all the todos by completed it will take one parameter which will be Boolean completed now if we call this method with completed equal to false then it will get us then it will give us all the Todo items which are not yet completed and if we call this method with completed equal to true then it will give us all the Todo items which are marked as completed so we can remove this public from here now in order to handle request we need to create a controller let's create a class with the name to-do controller which will handle all the requests related to too items so here click on create new Java class let's call it too controller and annotate it with controller annotation so pay attention here I'm not annotating it with rest controller because we will return views from this controller as well and let's give request mapping to to do so this controller will handle all the request to this path it will handle all the request to to path now let's create one default get mapping here so get mapping and let's say string index and let's return index here now since we have added time leap on the class path so spring boot will autoc configure the spring application to use time Li as template engine or use time Li to resolve the views and what time Li does is it will match this string with the template which is present in templates directory so in order for this to work in templates directory we need to create an HTML file with the name index.html so I will give it name index so we have created index.html file and for title let's just Sayo and for now let's print hello for now this index is mapped to this index. HTML file now we can start it so let's start the application and we are getting this error fail to configur data source because we have already spring data jdbc jdbc dependency but we have not specified the database configuration so we need to do that let's go to application. properties and specify some database configuration first of all we need to specify database URL for that the property name is spring dot data source URL and since we are using jdbc so the URL is jdbc and we are using my SQL Local Host the port is 33 06 and the database is name is HTML which we have defined in doer composed. ym this is the database name and we will use this username and password to connect to this database so let's do that spin do data source. password before that I will put the username data s username so username will be D and the password is here pass so when you create a real applications you don't specify the username and pass username password and database URL here instead you specify them using environment variable but for now we are good here so let's restart it so it's working without any problems so I will go to local homeost 8080 and do it and we can see hello Ed so that means this basic setup is working fine now let's create a schema to store to do items to the database so we have not yet done it so let's go to resources create a new file create a new file and I will call it schema.sql and let's say create table if not exist and the name of the table will to and it needs three things one is id id will be serial that means integer and auto increment and it will be primary key the second will be title which will be text and it should not be null the third will be completed which will be a Boolean and it will also be not what we want is whenever the application starts we want to run this SQL query so let's go to application properties and we need to specify one property here we need to tell spring application to tell that we need to run schema.sql file on initialization of the application so we can do spring. SQL init mode and there are three possible values one is always so it will always initialize the database one is embedded so it will initialize the database only if we are using embedded database and never means it will never initialize the database so in production you should use never but here I'm using I will use always so it will always create the table now let's go to too controller and here inject the too reposit as dependency so private final too repository repository and let's add it as Constructor parameter now what I want to do is at initialization I want to delete all the to items which are in the database so this do repository do delete all and after that I want to create few too items this do repository dot save new to do the ID will be null so it will be autogenerated by the database the title will be let's say learn htms is it completed no so completed FSE so we have created four to items and they will be saved to the database now let's display those those items using index. HTML file so we need to have a model here model and we need to set an attribute to the model so that we can use that attribute in the index.html file or in the template so I will say model. add attribute so the name will be two do and the value will be this do repository do find all by completed so I want to find only those to do items which are not completed so it will give us all the too items which are not completed and now I can go to index.html file here and here I can access those two do so and I I want the auto complete of time liap as well so here I can say XML NS Thal to be www do.org so now we will get the auto complete from time Le so let's do that here so first let's create one H1 so two and second let's create an ordered list here and create a block TS block and I will say th each each to in to for is too we want to run this Al and let's TX text so the text will come from the to to title we go the text and let's the default text is text so let's just run it for now so run the application and refresh the page here and you can see we got this too and these to two too items which are not completed now let's add HTM X and boot strap to our project as well so go to HDMX here in order to use HDMX either we can use a CDN or we can download a copy and put it in our file system so in production we should do that I will going to use the CDN approach here so I will copy it and I will paste it see this is Javascript so I will paste it at the end just before the body tag I'll paste it here now let's add the bootst type as well so in order to add bootst type we can use CDN so I'll copy this link to the CSS since it is a CSS I want to include it inside head and another this JavaScript I want to addit after the JavaScript of HML so I past that here so now we have included hmx and boot here now let's modify something so I want to make a na bar of this toos to do that I will just go to na and I will search for one so let's I want to use this n just copy this one pasted here so this is a n so I can remove here here I can see two now I want to make some styling list as well so let's go to list okay so this is the basic list we can use that one as well so let's see okay this seems good to me I will use this one and so this is unordered list I want ordered list so I can do I can change it to ordered list this is the class okay which is fine I want to give it one more class which is too list so it may come handy to us and for each we need to do that so let's copy cut it from here to here and for each we need to just give this class and let's remove these allies and remove this order list okay restart the application and let's reload this place now we we are getting this list here but I want a checkbox just before learn hmx and learn JM JBC as well okay so I will copy and remove this th text from here just put it here so and this is a check boox and instead of default check box we need T text the text will be to do title let's it let's restart the application and refresh the page here we are able to check the items now we need a delete icon as well here so let's go to icons and search for delete icon I will use this one so we need to add some thing so here so we can use uh CDN to include boot step icon this is this is a CSS so I will add it in the head we have added the bo step icons now we can use the icon this one this one and add it here so the icon will be visible let's restart the application again and reload the page now we can see this uh delete icon in front of the title now we also we also need to display the list of completed TOS so for that I will just copy this one I will P that here and I will say completed and I will add some let's say some line four is two so instead of two let's say two do completed two do completed so it needs to do completed so let's remove this ID something here and here instead of label let's use D and this check box do check okay so let's restart the application and reload the P so we can see one line here but we don't see any checked item here because we have not provided that to the view so let's go to the controller and here I will say model do add attribute completed this dot deposit find by completed and completed should be true restart the application go here reload the page and we can see the completed items we are able to display the list of not completed and completed items in the next part of this video we will add the ability to complete one item welcome everyone to the fourth section of this video in this section we will add the capability to tick one too item let's go to index.html this is a list where we have uncompleted items and we want the ability to complete one item so whenever we uh check this box we want to fire request so I will say x put so this will be a put request to toos and the end point will be complete so this will be the end point and we also want to send the ID of the Todo but we cannot add that here dynamically for that we need to use HX th attribute t so here we can add the attribute dynamically so the attribute will be HX put equal to and the value will start with at the rate then cly parenthesis and the value of this HX put attribute will be twoos complete and here we will have the ID of the twoo so let's just say ID here and ID will be to do ID so let's restart the application and reload the page here it has been reloaded let's go to element this is the first list if you go to the first li and and this check box we can see H xut equal to two do complete 25 so 25 is the ID of the this too item if you go to the second Li and see HX put too completed 28 so this is the IDE of this too item so we we are able to put these Texs here let's go to network and check this Bo if we check it we can see one request is being sent to this Hodo completed 28 end point and the response we are getting is 404 not found because we have not defined any controller to handle this request and the requested method is put and we are not sending any data or anything here and in the response we are getting that 404 not found so let's implement this endpoint so go to too controller here and I will say put mapping string let's say complete yeah and this put mapping should be to complete path todos we have already defined here and the complete will be appended after Todo and complete and it will take the ID too so let's say it is taking PATH variable and the path ID type will be integer ID so this will be the ID of the too item now what do we want to do we want to complete this too item so first of all we want to find the too so this dot repository deposit. find by ID and we'll for or else so if we don't find anything then we will just throw the error and so we have a too here now what do we want to do too do set so we cannot modify the too we need to create a new too in order to modify it in the database so let's do that so too too equal to new too not this too too too do ID so ID will be the ID of the too we will not use null as the ID because otherwise the database will create a new to-do but we don't want to do that we want to use the ID of the previous too so it will get updated in the database then too do title and too and completed will be true because we are completing it and we will save this new to to the repository this do repository do save to and now what do we want to do is we want to delete this learn jdbc from here so we will return empty response so let's do that so return this empty string for now and here let's put response body that means whatever we return should be return as it is we don't want to consider this as VI name we want to consider this as tonse let's run again now let's go to index.html and here so whatever response we will get back what do we want to do with that if we don't do anything then this input will get replaced by that so we want to make L is the target so let's say HX Target will be closest Li and HX swap will be outer HTML so what will happen is whenever we will get back the response it will search for the closest Li tag so it will find this tag and it will swap the whole tag with the response and since we are getting empty response back so this whole Ali will be replaced with an empty string so that means this will get deleted let's restart the application and reload the page here now let's click on learn jdbc you can see that has been deleted and in the response we are not getting anything back if you go to elements and see in the first list there is only one L the second list item has been deleted now we if you if you see at the bottom we have only two completed item if we reload the page we have three completed items because this learn jdbc has is marked as completed but we did not tell front end to display that in completed list now let's see how to do that so now what do what we want is we want two responses with the single request so we want two views first view will delete the or origal item and the second view should add new item to the completed list now that is called Auto band SW so if you go to HTM X and look at Auto band SWS so we can have as many view as we want so let's do that so for that I will create a new template here new file and I will give it a name to Do complete respon of HTML first we want to return an empty view so for that we don't need to do anything and second I want to return a completed to list item so for that I can go to index.html and I can copy this one but copy and pasting is not a good practice what if in the future we modify this Li item in that case we need to look where we are using this one and we need to go and modify there as well so in order to prevent copy and pasting time Lea has one concept called fragments so we can make it a fragment so let's create a fragment here TS fragment so we can give this fragment any name so let's give to item completed so this is the name of the name this fragment now we can use this name and then this fragment will be inserted so let's go to this response and here let's get a du first so D and I will say HX so o now what will happen that if any element meets this criteria that will be swapped with the response which is inside this de so let's say I will say before and then column and then I will say dot too list completed now what will happen that it will search for an element with this criteria that means it will search for an element with this class twoo list completed and it will find this one I guess it will find this Todo list completed and the response which is inside this du will be put before ending of this element that means just before this tag the response will be put and here I will add that fragment so th block th insert equal to so this is just the syntax to insert the template and here we will first specify the file name where we will find the fragment the file name is index and fragment is twoo item completed now let's rerun the application and restart it so since we rerun the application so it deleted all the too items and it created new too items that's why we see two too items are not completed and two are completed now let's check learn jdbc so we don't see that here so there must be some problem go to network so still in the response we are not getting anything because we have created this file but we have not used it so go to too controller remove this response body from here and here write to Do complete response and also you can see we are using this fragment and this fragment needs one Todo so we need to provide the Todo as well so here let's inject the model here and we need to put one to inside this model so model dot add attribute the name is toodo and the value will be new too let's rerun the application reload the page here click on learn hmx and you can see learn hmx is visible inside completed items now similarly let's implement the functionality of unchecking as well so currently we uncheck it nothing happens so let's go to index.html and inside this check box we have these many things so I will just copy them and let's copy the whole input copy this input and I will paste that here home check input type check Bo and this should be already checked so I will just say checked this is these are the attributes SX4 so instead of complete now the request will go to uncomplete and point which will create right now it will replace the closest Al so it will remove this element if we return empty response back from the back end okay so let's do that so go to to controller. Java and let's copy this whole method and let un complete this sounds weird but this just means that we want to uncheck the two item so we could have named it uncheck but let's stick with uncomp PA variable ID model and instead of completed equal to two we want to change completed to false and to do new too now instead of too complete response let's say too uncomplete response and let's create a new file called voo uncomplete response HTML and here I will just copy paste this response and I will add it before ending of to list not to list completed to list and it will be too item not too item completed so let's go to index. HTML and we will return one to items but we need to create a segment here TS segment too item and we are using this fragment here to do item so not here here uncomplete response here we are using this fragment too item and it it will be appended before ending of Todo list class so this is the Todo list class okay so let's restart the application and reload the page here so vc4 let's click on learn jdbc so it is working let's uncheck learn J yeah it is working so learn htms so it is here and click on take above so it is here now let's reload the application whether the UI is constent with back end or not so we reload it now keep in mind that learn jdbc and take a work are not completed and learn zva and learn hmx are completed reload the page you can see learn jdbc and take a are not completed and learn hmx and learn Z are completed so that's it for this section so in this section we we have seen how to check too and how to unck the too now in the next section we will see how to add a new too item to the list welcome everyone to the fifth section of this video in this section we want to add the ability to add new too to the list so we will create a text box and a button so the text box will be used to enter the title of the too and whenever user clicks on that button that to do with the title should be created so first of all let's create the text box and that button so we can use this one we will create this one right here C and I will put that let's put that between these two lists typ will be text class is form control ID is input password to but here we will give ID like too new title so this will be the ID and we need to give a name so name will be let's say title and placeholder will be toodo title and label four will be toodo new title this will the class is V visually hidden so let's remove this class and let's restart the application reload the page here so we see this password and confirm identity let's remove this label from here we don't want the label here instead of confirm identity it will be head okay restart the application the P we see too title and add button now it is working so let's add some attributes related to htms to this button so what do we want to do is whenever we click on button we want to send a post to request so let's just say h x post equal to and we want to make a post to request to to point but we also need to send something so with this request we want to send the content of this input box so we can just say HX include and we give ID so ID is to new title and replace it reload the page and go to inspect Network and let's enter test here click on ADD now one request is being sent to to to do the endpoint it's a post request and we have this payload title test so we are able to send the request now let's handle the request in back end so go to too controller and create a post mapping here now the post mapping will be to toos end point only and we have already specified toos here so we don't need to specify any end point here so let's just create a method which will be add and it will get request perm and the name is title let's save save it in a variable called title so we have a title of the too and we want to create a new too in the database so let's just do that is that too too equal to this do repository dot save new too the ID will be null so the ID will be autogenerated by the database the title is the title which we got from the front end and it won't be completed so completed will be false and now we need to return this too so let's say we got a Todo from the backend so what do we want to do then so we want to add that too to this list this list of toos which are not completed I will just say HX Target will be this list too list so HX Target will be do too list and x s so how do we want to replace the target so we don't want to replace the target what do we want to do is we want to add that response at the before the end of this target so we can just say before end in order to create or in order to return that Todo item we can just use this fragment here but this fragment needs one to do so let's do that uh get a model here and set model you to do the value will be to and let's return index and the name of the fragment is too item too item to let's restart the application reload the page let's say test click on ADD let see test has been added here we go to network R end point and in the response we got this list item back and we have added it before ending of this list so go to elements and this is the list which has three Li items the third Li item is the one we just got back now now let's see whether the check box is working fine or not so we take this test so it has been added to the completed item reload the p and it's working but one thing to not is that let's say test two click on ADD what we want is this test to this check box uh should have been been empty after adding this to the list so let's fix that so what we can do is we can return a new empty text box here using Auto band SW so let's do that so for that as well we will create a new file called too response. HTML and here we need two things so first we need this fragment so this is the Syntax for fragment I will add that here and here we need to do item not completed to do item and the second thing is we need to send that box what we can do go to index.html and this is the sorry this is this is the input box so what we can do is here we can give it one ID so ID is already there new new title now let's say HX s out of band equal to 2 and let's return return this only and we need uh to make this fragment as well P fragment equal to to new title so now I will explain what I did here I will return this input as it is so for that I can just use this THS fragment so here I will use th block th insert equal to index to new title okay now since this block is empty so I can do this do this so what I did is I'm returning this input as well in the response so here I check swap o is true that means this will search for an element with this ID and it will find existing input there it will replace that input with the current one so let's run it reload the page now we have four items here let's add another here right so it's not working let's see why not okay because we have not used this Todo add response so go here and instead of too item let's go too add response reload the application reload the page t add and you can see we got the new text box and the new text box replace the old text box if we check this Tex test it it marked check reload the page it's working uncheck it to Lo the page it's working so we are able to add a new too to the list of existing Todo items in the next section we will see how to delete a to-do item welcome everyone to the sixth section where we will Implement delete functionality so let's do that so first of all whenever we go to this delete icon we want to make this cursor as pointer so let's change this style go to index.html and inside this I class let's say style cursor pointer I will add the same style to another I tag as well okay so if we refresh it and reload the page if you go here you can see the hand but nothing is happening so here we need to add some HX attribute so let's just add to the first one or the second one then we will just copy okay so let's do that here that's it HX we want to send a delete request to too the endpoint but we also want to send the ID of the too so we want to create an attribute with Dynamic content so we will use this syntax here I will copy this syntax I will paste it here instead of hx4 the request HX delete the attribute name is HX delete because we want to send a delete request K end point we don't want anything else here and we want the ID of the too and we will get the response back and what do we want to Target with that response so with that response we want to Target the current Ali element let's do that th Target will be closest Ali so the closest Al element it will search in its parent and it will find the closest element closest element and it will replace that with whatever response we get with by default it doesn't replace the entire element it just replace the inner content but we want to replace the entire element for that we will use th s not s so not th Target is it is HX Target and it is HX s = to Outer h ml now it will SW the whole Ali element with the rest so now let's copy it copy it to here it and paste it now we need to handle this delete request so let's go to to-do controller and create a delete maping and we will return return an string and this string will be response body so we will return an empty string if we don't specify response body here the Ely will start looking for a template with the empty name which it won't find so stream delete it will get a request it will get path variable so just get to do the ID you need an ID here so ID path variable the name of the path variable will be ID and it type will be integer and I want to call it ID in my Java code so I want to remove that to so this do repositor do delete by ID the ID is I so now this two item will be deleted and let's WR empty string here restart the application and then reload the pH here now we have four things here so we don't have that delete icon here what just happened index. HTML okay I think we have some syntax error here this okay it was class so should be because without class you won't able to see any icon restart the application reload the page okay we can see the delete icon so let's delete it click on delete and it has been deleted now reload the page and you can see it has deleted from the database so let's go test one test 2 test three test two now let's delete tick item as well click here deleted deleted refresh and you can see it is consistent with the back end we have implemented the delete functionality as well so at this point everything is working the delete functionality is working the check and uncheck functionality is working and adding a new too item is also working so that's it for this video I will upload this code in GitHub and I will share the link in the description thank you for watching the video I will meet you in the next video Until then keep learning bye

Channel: Java Rush

Views: 498

Keywords: spring boot, htmx, thymeleaf, bootstrap, mysql, todo app, hx-get, hx-post, hx-delete, oob-swap, out of band swap

Id: YvtgC4rZkV4

Length: 57min 33sec (3453 seconds)

Published: Mon Jan 22 2024