This tutorial can concentrate on creating, reading, updating, deleting and searching database records. we'll make out using a Google’s AngularJS, Struts2 and MySQL.
As for the user interface, rather than Bootstrap, we'll use materialize CSS – a modern responsive front-end framework based mostly additionally on Google’s Material design.
FILE STRUCTURE
Knowing the file structure can offer us an outline of what Struts2 files can we need to create and wherever the assets should be placed.
DATABASE STRUCTURE AND CONNECTION
We have to make a database, then a table with the subsequent table structure, and a Struts2 file that we'll use for database connection.
Struts2 AngularJS CRUD Example - Read Operation
1.1 create the database table
Run the subsequent SQL code on your PhpMyAdmin or any Database you want. this can be to create our database table. By the way, the database name we used in this tutorial was named “strutsangularcrud”.
Now dive to some coding part in file structure you can see i made three package(com.blogspot.geekonjava.db, com.blogspot.geekonjava.gs, com.blogspot.geekonjava.json) as per name convention you can understand easily that what purpose of which package.
com.blogspot.geekonjava.db
This package for all database connectivity part and in this example i made two java file first for database configuration and other for product database part.
Note : So put the mysql-connector.jar in you WEB-INF/lib
Info : Don't panic to find extra libraries download the project and you'll get everything.
ConnectionConfiguration.java
com.blogspot.geekonjava.gs
It is for all getter setter object will be here like in this project i made:
Product.java
MAKE USE OF YOUR HTML CODING SKILLS
1.1 Create basic HTML code structure for index.jsp
Create the index.jsp file. This is the only page the user has to interact with. Make it ready for AngularJS, Material Design and jQuery by including the necessary library sources.
1.2 Put the most important DIV tag
Inside this “div” tag is where every main content of the page will be loaded. Add the following code after the opeing “body” tag.
1.3 HTML code of “create product form”
Put the following code under the “h4” tag in section 1.2. It is a form shown via modal or pop up. We will also use the same HTML form for updating a record later.
1.4 HTML button to show the “create product HTML form”
Put the following code under the code in section 1.3, it will make a floating red button located at the lower right corner of the page.
1.5 AngularJS Basic Code
Put the following AngularJS code inside the “script” tag of section 1.1 above.
1.6 AngularJS “showCreateForm” function to show “create product form”
Put the following code inside the app.controller curly braces in section 1.5 above.
1.7 AngularJS “clearForm” function to remove any form values that exists
Put the following code under the “showCreateForm” function code in section 1.6 above.
1.8 AngularJS “createProduct” function
The following code is triggered when the “Create Product” button on the modal or pop up form was clicked. Put it under the code in section 1.8.
1.9 jQuery script to initialize modal
This small jQuery script will initialize our modal or pop up. This modal is used for “create product” and “update product” pop up forms.
AngularJS deals with JSON . So firstly need some change in struts.xml
struts.xml
Put below code under the <Struts> tag
And now this time to add third and last package
com.blogspot.geekonjava.json
In this package all the JSON part which AngularJS will be dealing
Note : So put the json-simple.jar in you WEB-INF/lib
Info : Don't panic to find extra libraries download the project and you'll get everything.
ProductDB.java
ProductJSONAction.java
Output should look like this
This section is for insert module of Struts2 with AngularJS and hope you enjoy this tutorial. And if you want source code of this section. Please send me your request then i'll send that on your email id and contact us.
Please feel free to suggest and comment.