Setup Eclipse IDE and Create Spring Boot Applications using Spring MVC and Thymeleaf

in this video I will show you how to create your first spring boot application using Eclipse IDE so first let's download and install Eclipse so we can type Eclipse IDE let's go to the first link at eclipse.org then here let's click on download so we can download the installer but I prefer to install the IDE using the zip file so I will click on download packages then here we need to download and install Eclipse IDE for Enterprise Java and web developer so because I have Windows let's click on this link then download then we need to save this ZIP file but in my case I already downloaded it so I will cancel this download so this is the zip file that I have downloaded and we need to extract it so we can make a right click then zip then extract files I will extract it on the folder of the user of this computer so let's delete all of this part from the path then okay so now the file is extracted correctly let's go to the folder where it has been extracted so we can click on document then let's open any folder so let's open this folder for example then let's put the cursor here and let's delete the last two folders from the path so this is the folder of eclipse so we can rename it and here we have the file that that allows us to run the IDE we can create a shortcut of this file on the desktop so we can make a right click then send to then desktop so we can use this shortcut to start the IDE and here we need to select a folder as a workspace we can accept this default folder let's check this box then launch so now eclipse is installed correctly let's close the welcome page then let's create a new spring boot project so let's go to the browser and we can use spring initializer so here let's type spring initializer let's go to the first link at start. spring.io so we will create a project using Maven so here let's select Maven we will use the Java language let's select the latest stable version of spring boot then here let's provide the group ID which is the name of the owner of the application then let's provide the name of the application so here we can write first app for example then let's add the dependencies to this application so first we need spring web this dependency allows us to create web applications restful applications and spring MVC applications it has an embedded server so we don't need to install any additional server then we need th Leaf let's select this dependency then let's download the application so we can click on generate let's save the file I will save it on the desktop then let's extract it so I will extract it in the documents folder so this is documents then in documents I already created a folder called Spring projects so I will select this folder then okay then let's open the project using eclipse so here we can click on file then open projects from file system so let's select documents then spring projects then first up then finish so this is our application let's expand it but it is not ready yet because Maven is downloading the required files so we have to to wait a few seconds and now the project is ready so let's expand this folder and here we have this package that contains this file which is the main Java class so this file contains the main method that allows us to run the application so we can make a right click then run as then Java application so now the application is running correctly and here we can see that it is available at this por number so let's go to the browser then here let's type Local Host then colon then the PO number which is 8080 but here we have this error because we did not create a controller that will respond to this route we can start stop the application using this button then let's create the first controller so we can make a right click on this package then new then class and let's create the controller in the controllers package so here in the package just here let's add dot controllers so this package will be created now let's provide a name to the controller we can call it home controller then finish then let's annotate this class with the controller annotation let's import this annotation so we can click here then import controller then let's create a method in this controller that will respond to the root URL so we can call the method show homepage and it returns a string which is the name of the file that will be served and it will be accessible using the HTTP get method so let's import this annotation then let's create this file so we need to create it in the resources folder in the templates folder so here let's make a right click then new then file and let's call it home.html then here let's write some HTML code so we can use bootstrap for example so to use bootstrap let's go to the browser and here let's type bootstrap let's go to the first link then docs and let's copy this source code that includes bootstrap CSS and JavaScript from the CD again let's paste it here let's save the different files so we can use this button then let's run the application so now the application is running correctly so let's refresh this page and here we can see that we have this message now I will show you how to pass some data from the controller to the page so first we need to add a parameter to this method that allows us to pass some data to the page so we need to add a parameter of type model now let's import this class and let's add some data to this model so we can call model. add attribute then here we have the name of the parameter and then we have the value so here we added two two parameters to the model we added the title and about and these are the values now let's update the homepage to display the values of these two parameters so after the H1 element let's add NH H2 element for example then let's add a time Leaf attribute that allows us to display the value of the title so just here in the open tag we can add th colum then text and it is equal to the value of the title attribute that we defined just here now let's add a paragraph to display the value of this attribute so we can add this time Leaf attribute and this is the name of the variable but here we can see that we have some warning this is because the time Lea attributes that we are using are not recognized by the editor to fix this we can just here in the HTML tag we can add an attribute so here we can see that we don't have the warnings anymore of course this is optional and we can delete it but we can add it to get rid of the warnings then I will show you how to increase the font size of the editor so let's click on window then press references then let's expand General then appearance and let's select colors and fonts then let's expand basic and let's select text font then edit and here we can increase the font size so let's select this value for example then okay then apply and close so here we can see that the font size increased now let's save the different files let's stop the application and let's run it again let's go to the browser and let's refresh the page and here we have the data that we passed from the controller to the page

Channel: BoostMyTool

Views: 920

Keywords:

Id: Eq4Cwy7j5Zg

Length: 11min 18sec (678 seconds)

Published: Sun Mar 24 2024