Learn Liferay DXP(Liferay 7 Tutorials): CRUD In Liferay DXP Using Ajax jQuery [CRUD in Liferay DXP ]

Hi All,

Greetings of the day!

Today we will see how we can perform CRUD operation in Liferay DXP with help of AJAX.

Below will be our output after complete development

So let's start.

Step 1)First of all we need to create an MVC module portlet.

So go to File-New-Liferay Module Project & select project template name as MVC-portlet and give project name as sports-management

Then click on next and provide component name and package name then click on finish.

If you are unable to create a portlet visit my below post which will provide complete steps for creating a portlet.

How To Create MVC Portlet

Step 2)Now we will create a service builder project which will be used for the service and repository layer of our project.

So go to File -New-Liferay Module Project & select project template name as service builder and add project name as sports-service

Then click on next & provide package name and then click on finish

Step 3)Define database table structure and other useful methods for CRUD operation in service.xml

So go to service.xml in sports-service and add the below code in service.xml

Here we have to define a sports table with 3 columns.

package com.demo.student.mgt.model; <?xml version="1.0"?> <!DOCTYPE service-builder PUBLIC "-//Liferay//DTD Service Builder 7.3.0//EN" "http://www.liferay.com/dtd/liferay-service-builder_7_3_0.dtd"> <service-builder dependency-injector="ds" package-path="com.sports.mgt"> <namespace>test</namespace> <entity local-service="true" table="sports" cache-enabled="false" dynamic-update-enabled="true" name="Sport" uuid="true">  <column name="id" primary="true" type="long" id-type="increment"/> <column name="name" type="String" /> <column name="description" type="String" /> <order by="asc"> <order-column name="id" /> </order>  <reference entity="AssetEntry" package-path="com.liferay.portlet.asset" /> <reference entity="AssetTag" package-path="com.liferay.portlet.asset" /> </entity> </service-builder>

Step 4)Now we will execute the following command in sequence

For sports-service

build-service
build
deploy

For sports-API

build
deploy

If you don't know how to perform the above steps visit my below post for detailed steps for deploying the module project to tomcat.

Deploy Modules To Tomcat

Step 5)Now we will add service layer methods in sports-service

So first right-click on sport-service and go to Gradle then click on refresh-gradle-project

Then you will find multiple classes are autogenerated, we will be using SportLocalServiceImpl.java class and we will add methods for CRUD operation which we will be using in our portlet module through sport-API.

Add or Update Sport

	
	public void addOrUpdateSport(String name,String description,Long id) {
		Sport sport=new SportImpl();
		sport.setName(name);
		sport.setDescription(description);
		if(id!=null && id >0) {
			sport.setId(id);
			updateSport(sport);
		}else {
			addSport(sport);
		}
	}

View Sport

	public Sport viewSport(Long id) throws PortalException {
		return getSport(id);
	}

List Sport

	public List<Sport> listSports(){
		return getSports(0,getSportsCount());
	}

Delete Sport

	public void delete(Long id) throws PortalException {
		deleteSport(id);
	}

Now again repeat the below step

For sports-service

build-service
build
deploy

For sports-API

build
deploy

Once you build and deploy a sports service module using the above steps, the methods you have added will be available in SportLocalServiceUtil which we will be using in our portlet.

Note- We should not use SportLocalServiceImpl directly we should use methods of SportLocalServiceImpl through SportLocalServiceUtil which will be in our sports-API module

Step 6)Now we will give sports-service-api dependency in the sports-management portlet so we can use service layer methods in our controller.

So open build.xml and add the below dependency

compileOnly project(":modules:sports-service:sports-service-api")

Our service layer coding is done, now we will focus on the portlet module.

Step 7)So Open SportsManagementPortlet.java and add the below property in @Component

"com.liferay.portlet.requires-namespaced-parameters=false".

Now we will override the server resource method as we are performing crud operation using AJAX. We will retrieve the flag which we will pass from JSP page using jquery, and based on the flag we will call different service layer methods using SportLocalServiceUtil.

package com.sports.mgt.portlet;

import com.sports.mgt.constants.SportsManagementPortletKeys;
import com.sports.mgt.model.Sport;
import com.sports.mgt.service.SportLocalServiceUtil;

import java.io.IOException;
import java.util.List;

import com.liferay.portal.kernel.exception.PortalException;
import com.liferay.portal.kernel.json.JSONArray;
import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet;
import com.liferay.portal.kernel.util.ParamUtil;
import com.liferay.portal.kernel.util.StringUtil;

import javax.portlet.Portlet;
import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

import org.osgi.service.component.annotations.Component;

/**
 * @author vader
 */
@Component(
	immediate = true,
	property = {
		"com.liferay.portlet.display-category=category.sample",
		"com.liferay.portlet.header-portlet-css=/css/main.css",
		"com.liferay.portlet.instanceable=true",
		"javax.portlet.display-name=SportsManagement",
		"javax.portlet.init-param.template-path=/",
		"javax.portlet.init-param.view-template=/view.jsp",
		"javax.portlet.name=" + SportsManagementPortletKeys.SPORTSMANAGEMENT,
		"javax.portlet.resource-bundle=content.Language",
		"javax.portlet.security-role-ref=power-user,user",
		"com.liferay.portlet.requires-namespaced-parameters=false"
	},
	service = Portlet.class
)
public class SportsManagementPortlet extends MVCPortlet {
	
	@Override
	public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
			throws IOException, PortletException {

		String flag = ParamUtil.getString(resourceRequest, "flag");
		if (StringUtil.equalsIgnoreCase(flag, "add-update-sport")) {
			addOrUpdateSport(resourceRequest,resourceResponse);
		}else if(StringUtil.equals(flag,"list-sport")) {
			listSports(resourceRequest,resourceResponse);
		}else if(StringUtil.equals(flag,"delete-sport")) {
			try {
				deleteSport(resourceRequest,resourceResponse);
			} catch (PortalException e) {
				System.out.println(e);
			}
		}else {
			System.out.println("Invalid flag");
		}
		
		super.serveResource(resourceRequest, resourceResponse);
	}


	private void deleteSport(ResourceRequest resourceRequest,ResourceResponse resourceResponse) 
	throws PortalException {
		Long id=ParamUtil.getLong(resourceRequest,"id");
		SportLocalServiceUtil.delete(id);
		JSONObject jsonObject=JSONFactoryUtil.createJSONObject();
		jsonObject.put("msg","Sport deleted successfully.");
		try {
			resourceResponse.getWriter().print(jsonObject.toJSONString());
		} catch (IOException e) {
			System.out.println(e);
		}
	}

	private void listSports(ResourceRequest resourceRequest, ResourceResponse resourceResponse) 
	throws IOException {
		List<Sport> sports=SportLocalServiceUtil.listSports();
		JSONArray jsonArray=new JSONFactoryUtil().createJSONArray();
		for(Sport sport:sports) {
			JSONObject jsonObject=JSONFactoryUtil.createJSONObject();
			jsonObject.put("name",sport.getName());
			jsonObject.put("description",sport.getDescription());
			jsonObject.put("id",sport.getId());
			jsonArray.put(jsonObject);
		}
		resourceResponse.getWriter().print(jsonArray.toJSONString());
	}

	private void addOrUpdateSport(ResourceRequest resourceRequest,ResourceResponse resourceResponse) {
		String name = ParamUtil.getString(resourceRequest, "name");
		String description = ParamUtil.getString(resourceRequest, "description");
		Long id=ParamUtil.getLong(resourceRequest,"id");
		SportLocalServiceUtil.addOrUpdateSport(name, description, id);
		JSONObject jsonObject=JSONFactoryUtil.createJSONObject();
		jsonObject.put("msg","Sport added successfully.");
		try {
			resourceResponse.getWriter().print(jsonObject.toJSONString());
		} catch (IOException e) {
			System.out.println(e);
		}
	}	
}

Step 8)Now let's add code for the JSP page, we will be using a single JSP file and we will be using jquery to send flags to our server resource method, along with form data.

First, let's add body parts for our JSP where we will add a basic form for adding/updating sports and a table structure for listing sports.

We will show and hide add sport form using jquery with the click of add sport and cancel button.

<body>
    <div style="display: none;" id="addSportForm">
    <input type="hidden" name="sportId" id="sportId" value="0">
	      <input type="text" name="name" id="name">
	      <input type="text" name="description" id="description">
	      <input type="button" name="addUpdateSport" 
	             id="addUpdateSport" value="Submit">
	      <input type="button" name="cancel" 
	             id="cancel" value="Cancel">
    </div>	
<button id="addSportButton">Add Sport</button>

<br>
<table id="sportTable">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Desription</th>
    <th>Delete</th>
    <th>Edit</th>
  </tr>
</table>

</body>

So now we will add jquery code for different event

On click of add sport button, we will show add sport form and on click of cancel, we will clear data filled in the form. So let's add the jquery function

$.fn.clear = function (){
 	$("#addSportForm").hide();
	$("#addSportButton").show();
 	$("#name").val('');
 	$("#description").val('');
 	$("#sportId").val('');
}

$("#addSportButton").click(function(){
	  $("#addSportForm").show();
	  $("#addSportButton").hide();
	  
});

$("#cancel").click(function(){
	$.fn.clear();
});

On clicking of submit button of add/update sport form, we will call the server resource method with the flag add-update-sport and the data user has filled in the form. So let's define the jquery function for the same.

$("#addUpdateSport").submit(function(e){
    e.preventDefault();
});

$("#addUpdateSport").click(function(e){ 
	var name=$("#name").val();
	var description=$("#description").val();
	var id=$("#sportId").val();
	var flag='add-update-sport';
	
$.ajax({
      type: "POST",
      url: "${sportResourceURL}",
      data:{
      	name:name,
      	description:description,
      	flag:flag,
      	id:id,
      },
      dataType: "json",
      success: function(data) {
      	$.fn.loadSports();
      	$.fn.clear();
      },
      
      //If there was no resonse from the server
      error: function(jqXHR, textStatus, errorThrown){
           console.log("Something thing went wrong please try again " + textStatus);
      }
      
      
    });
});

Now we will add the jquery function to display a list of the sport we have added so far, here we will create a dynamic row and add those rows to the table we have added in the body, this function will be called on page load, on add-sport, on-update sport and on delete sport. So after each event, our table gets refreshed with fresh data

    $.fn.loadSports = function (){
	   var flag='list-sport';
	   var id=2;
	   $.ajax({
	       type: "POST",
	       url: "${sportResourceURL}",
	       data:{
	       	flag:flag,
	       	id:id
	       },
	       dataType: "json",
	       success: function(data) {
	       	
	        $("#sportTable").find("tr:gt(0)").remove();
	       	for (var i = 0, len = data.length; i < len; i++) {
	       		
	    var newRowContent ="<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].description + "</td><td><button name='deleteButton' id="+data[i].id+">Delete</button></td><td><button name='editButton' id="+data[i].id+">Edit</button></td></tr>";
	  		   $('#sportTable tbody:last-child').append(newRowContent);
	  	    }
	       },
	       //If there was no resonse from the server
	       error: function(jqXHR, textStatus, errorThrown){
	            console.log("Something thing went wrong please try again " + textStatus);
	       }
	     });
	}

We can call above function using $.fn.loadSports();

Now we will add a jquery function which will be called with the click of the delete button to delete a record, this function will also call the server resource method with flag value as delete-sport.

 $(document).on('click', "button[name='deleteButton']", function()
		 {
		var id=this.id;
   	 var flag='delete-sport';
   	 $.ajax({
   	       type: "POST",
   	       url: "${sportResourceURL}",
   	       data:{
   	    	id:id,
   	       	flag:flag,
   	       },
   	       dataType: "json",
   	       success: function(data) {
		   	     $.fn.loadSports();
   	      },
   	       //If there was no resonse from the server
   	       error: function(jqXHR, textStatus, errorThrown){
   	            console.log("Something thing went wrong please try again " + textStatus);
   	       }
   	       
   	     });	 
		 });

Now with the click of the edit button, we will populate add/update sport form with values of the row on which the user has clicked on edit. Note- here we are using the same form for add and update and based on id backend logic will decide to add a new sport or update the existing sport.

  $(document).on('click', "button[name='editButton']", function(){
		 	$("#name").val($(this).closest("tr").find('td:eq(1)').text());
		 	$("#description").val($(this).closest("tr").find('td:eq(2)').text());
		 	$("#sportId").val($(this).closest("tr").find('td:eq(0)').text());
	 	 $("#addSportForm").show();
		 $("#addSportButton").hide();
   	});

Below is the complete code of the view.jsp with all CSS & jquery for your reference.

<%@ include file="init.jsp" %>

<portlet:resourceURL var="sportResourceURL"></portlet:resourceURL>


<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"
	type="text/javascript"></script>
	

 <script type="text/javascript">
 
  $(document).ready(function() {
  
 $("#addUpdateSport").submit(function(e){
     e.preventDefault();
});
 
$.fn.clear = function (){
 	$("#addSportForm").hide();
	$("#addSportButton").show();
 	$("#name").val('');
 	$("#description").val('');
 	$("#sportId").val('');
}

$("#addUpdateSport").click(function(e){ 
	var name=$("#name").val();
	var description=$("#description").val();
	var id=$("#sportId").val();
	var flag='add-update-sport';
	
$.ajax({
      type: "POST",
      url: "${sportResourceURL}",
      data:{
      	name:name,
      	description:description,
      	flag:flag,
      	id:id,
      },
      dataType: "json",
      success: function(data) {
      	$.fn.loadSports();
      	$.fn.clear();
      },
      
      //If there was no resonse from the server
      error: function(jqXHR, textStatus, errorThrown){
           console.log("Something thing went wrong please try again " + textStatus);
      }
      
      
    });
}); 	

 
$("#addSportButton").click(function(){
	  $("#addSportForm").show();
	  $("#addSportButton").hide();
	  
});
$("#cancel").click(function(){
	$.fn.clear();
});

$.fn.loadSports = function (){

	   var flag='list-sport';
	   var id=2;
	   $.ajax({
	       type: "POST",
	       url: "${sportResourceURL}",
	       data:{
	       	flag:flag,
	       	id:id
	       },
	       dataType: "json",
	       success: function(data) {
	       	
	        $("#sportTable").find("tr:gt(0)").remove();
	       	for (var i = 0, len = data.length; i < len; i++) {
	       		
	    var newRowContent ="<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].description + 
		"</td><td><button name='deleteButton' id="+data[i].id+">Delete</button></td><td><button name='editButton' id="+
		data[i].id+">Edit</button></td></tr>";
	  		   $('#sportTable tbody:last-child').append(newRowContent);
	  	    }
	       },
	       //If there was no resonse from the server
	       error: function(jqXHR, textStatus, errorThrown){
	            console.log("Something thing went wrong please try again " + textStatus);
	       }
	       
	     });
	}
	
	$.fn.loadSports();

 });
 </script>

 <script>
 
 $(document).on('click', "button[name='editButton']", function(){
		 	$("#name").val($(this).closest("tr").find('td:eq(1)').text());
		 	$("#description").val($(this).closest("tr").find('td:eq(2)').text());
		 	$("#sportId").val($(this).closest("tr").find('td:eq(0)').text());
	 	 $("#addSportForm").show();
		 $("#addSportButton").hide();
   	});
 
</script>
<script type="text/javascript">
 $(document).on('click', "button[name='deleteButton']", function()
		 {
		var id=this.id;
   	 var flag='delete-sport';
   	 $.ajax({
   	       type: "POST",
   	       url: "${sportResourceURL}",
   	       data:{
   	    	id:id,
   	       	flag:flag,
   	       },
   	       dataType: "json",
   	       success: function(data) {
		   	     $.fn.loadSports();
   	      },
   	       //If there was no resonse from the server
   	       error: function(jqXHR, textStatus, errorThrown){
   	            console.log("Something thing went wrong please try again " + textStatus);
   	       }
   	       
   	     });	 
		 });
 </script>
 

<style>
#sportTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#sportTable td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#sportTable tr:nth-child(even){background-color: #f2f2f2;}

#sportTable tr:hover {background-color: #ddd;}

#sportTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>

<body>
	
    <div style="display: none;" id="addSportForm">
    <input type="hidden" name="sportId" id="sportId" value="0">
	      <input type="text" name="name" id="name">
	      <input type="text" name="description" id="description">
	      
	
	      <input type="button" name="addUpdateSport" 
	             id="addUpdateSport" value="Submit">
	            
	      <input type="button" name="cancel" 
	             id="cancel" value="Cancel">
    </div>	
<button id="addSportButton">Add Sport</button>

<br>
<table id="sportTable">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Desription</th>
    <th>Delete</th>
    <th>Edit</th>
  </tr>
</table>

</body>
</html>

Below is the final project structure for reference

Sport-management-mvc-portlet

Sport-management-service module

If you have any doubt let me know.

Happy Learning.

Learn Liferay DXP(Liferay 7 Tutorials)

Pages

Monday, 16 August 2021

CRUD In Liferay DXP Using Ajax jQuery [CRUD in Liferay DXP ]

1 comment:

Labels

Blog Archive