Indoor, Outdoor & Kids' Trampolines

Spring Boot, MVC, Data and MongoDB CRUD Java Web Application


Welcome back to Java Web Tutorial. Today, We’ll show you the practical step-by-step tutorial on how to create Java and MongoDB create, read, update, and delete (CRUD) web app using Spring Boot, Spring MVC, and Spring Data. In this tutorial, we will use Gradle based projects for compile, build, and run the Java web app. The projects will be generated using spring initializer on- line Java project generator. For the deve- lopment process we use the NetBeans IDE to make development easier and faster. This tutorial divided into several steps: Step #1: Generate Spring Boot Gradle Java Web App. Step #2: Create Java model and entity class. Step # 3: Create Java Repository Interface. Step #4: Create Spring MVC Controller. Step #5: Create Spring MVC Views. Step #6: Run The Spring Boot MongoDB Java Web App. This time, we will show you how to create a Java web app that can display the list of products, show, create, edit, update and delete it using Spring MVC. The data GET, POST, PUT and DELETE from MongoDB using Spring Data. We’re using the following tools, frameworks, and libraries: Java development kit (JDK) 8, Gradle, spring boot, spring MVC, spring data, MongoDB, Thymeleaf, Webjars Bootstrap, Spring initializer, NetBeans or eclipse and terminal or CMD. Step #1: Generate Spring Boot Gradle Java Web App. We assumes that you have installed JDK 8, Gradle and IDE (NetBeans or eclipse). Next, we will create a new Spring Boot Gradle project using spring initializer. Spring initializer provides an extensible API to generate quickstart projects and to inspect the metadata used to generates projects, for instance to list the available dependencies and versions. Just go to Spring Initializer web-based spring projects generator then fill the required frameworks and libraries. This is the spring initializer dashboard. For projects type we will use gradle project, the language use Java, Spring boot version use this stable 2 .2.5, project metadata fill the group with your package name. For artifact name we are using spring- mongo. Now, we will choose the required dependencies. First, we need spring web and then spring data MongoDB and then Thymeleaf. This is the initial required dependencies for now, we will added the additional dependencies in the Gradle file later. After filling all these fields click the generate project button. So, it will download it automatically the zipped project. Next, extract the zipped projects to your Java projects folder. Next, start the NetBeans IDE, click open project button in the toolbar. Choose the previously extracted springmongo project. You will see these notification to install the latest Gradle version that match this project. As you can see they are the progress bar at the bottom of the NetBeans IDE that shows these projects automatically download all dependencies that exist in the build.gradle. Next, add this line to the dependencies to install additional Twitter bootstrap front UI/UX. Then right-click a project name and click build. To configure spring data with MongoDB simply open and edit the Resources/ application.properties file then add these lines of strings. Step #2: Create Java Model or Entity Class. Part of the MVC concept is model/entity/domain. For that, we will create a new model or entity class. The entity is a lightweight Java class whose state is typically persisted to a table or collections in a relational or document database. Using IDE like Net- beans right-click on the project name in the project panel and choose new then choose Java class. Give the class name “Product” and the package name “com.djamware. springmongo.models” then click the finish button. That new Java class file created with a name “Product” and this file automatically open in the NetBeans IDE. Fill this Java class by the Java POJO, Spring Data MongoDB annotation that points to a collections, fields with their types, constructor and getter/setter methods. This product class mapping to the collections with the name products which has five fields there is ID, prod Name, prodDesc, prodPrice and prodImage. Its fields has their own getter and setter. Step #3: Create Java Repository interface. Now, we need to create an interface for connecting the product models and controllers. On NetBeans, right clicks project name on the Left panel then choose the new then choose Java interface. Give the name of interface “ProductRepository” and new package name “com.djam- ware.springmongo. repositories” then click the finish button. It will automatically open the “product Repository” Java interface file on the NetBeans then replace all codes with this codes of ProductRepository that extends the Spring Data Crud- Repository that returned products and string object. Don’t forget to press Shift + Command + I key to import all required libraries. In this product repository, we only add “delete” method to the interface because the rest of method already handled by the CrudRepository of Spring data MongoDB. Step #4: Create Spring MVC Controller. Now, it’s time for `C` terms of MVC that means Controller. To create it on Netbeans just right click on the project name from the project Left panel then click new then choose new Java class. Give the name of controller class “ProductController”, the package name “com.djamware.springmongo. controllers” then click the finish button. It will open “Product Controller.java” file automatically on the NetBeans main panel after created. Replace all codes with these codes of the implementation of ProductRepository, Spring Framework models, request, response, and params. Don’t forget to press Shift + Command + I key to imports required libraries. In this controller class, we put all CRUD functions that interact between view and model. Step #5: Create Spring MVC Views. Now, it’s time of `V` for the View of MVC patterns. Since we are using the Thymeleaf library for the view template, so, we can create the same layout for all HTML pages. Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web server based and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of MVC-based web applications, but it can process an XML file even in offline environments. Before start creating templates for the views, we need to add or install I Thymeleaf Dialect libraries that required by the latest Thyme- leaf version. Back to the build.gradle and add this dependency. Build again these Gradle projects to download and install the new dependency. To create the layout, first create “default. html” file on the resources/templates folder and add or replace it with this lines of codes. All CSS and JavaScript files put on that file and called once for all pages that use “default.html” as layout holder. Also, they call Bootstrap and jQuery on that file. Next, we create a view for the products list with the name “product .html” then replace all codes to that file with this. Next, create a view for creating a product form with the name “create.html” on “Resources/templates” folder then replace all codes with this. Next, create a view for show product detail with the name “show.html” on the “Resources/ templates” folder then replace all codes with this. Next, create a view for edit product with the name “edit.html” on “Resources/templates” folder then replace all codes with this. Finally, add a new Java class and package with the name “com.djamware.spring mongo.configs .WebConfig.java” then click the finish button. Replace all Java codes with this. That configurations we set the default or root URL to the products URL. Step #6: Run The Spring Boot MongoDB Java web app. Using Spring Boot, already define the main class for running the application. To run this web app in the NetBeans simply click the play button in the NetBeans toolbar then open the browser and go to this address and you will get the homepage like this. That it’s, we are creating this tutorial especially for Java web beginner, for the master or experts of Java we need any suggestion and critics in the comments below. You can find the article and full source code link in the description below. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *