0% found this document useful (0 votes)
47 views

TCB - RESTFul CRUD With A Pinch of AJAX and Hibernate

The document discusses building RESTful APIs for CRUD (create, read, update, delete) operations using HTTP methods (POST, GET, PUT, DELETE), AJAX calls from JSPs, and Hibernate with a MySQL database. It recommends having a local MySQL database schema and table ready to interact with. The full code is available on GitHub and the author offers to discuss implementation further.

Uploaded by

namit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views

TCB - RESTFul CRUD With A Pinch of AJAX and Hibernate

The document discusses building RESTful APIs for CRUD (create, read, update, delete) operations using HTTP methods (POST, GET, PUT, DELETE), AJAX calls from JSPs, and Hibernate with a MySQL database. It recommends having a local MySQL database schema and table ready to interact with. The full code is available on GitHub and the author offers to discuss implementation further.

Uploaded by

namit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

More vats.namit@gmail.

com

TCB
RESTFul CRUD with a pinch of AJAX and Hibernate thecodebu

TCB

About Me

thecode
View my co

Hello Buddies...
FB Page

Let's try something bigger this time.

Find me o

A commonly known task developers generally come across for sure, in their coding tenure, is working with the REST APIs.

Get code o

While consuming these can be easy, thanks to various tools like POSTMAN and SOAPUI, what can be challenging is writing
Follow
these APIs. We can go through so many online materials available these days that can share ins and outs of the REST
architecture, but what we want is to save time and get the code working. So here we set the stage for this discussion.
html-css-b

What I am going to follow is an approach that will pick 4 commonly asked-for HTTP methods - POST, GET, PUT, DELETE
(for Create, Read, Update and Delete respectively), with a few bonus code snippets for you - using AJAX for making calls
from the JSPs and our very own Mr. Popular - Hibernate. This will make you get your hands dirty, over the journey, with
database related tasks using Hibernate and MySQL workbench.
Exam 48
Issuer: M
Provided
The above plan is not going to cost you anything, but it demands satisfactory code writing and mind-boggling for behind Acclaim
the scenes' theory.

The working code is available @

Contact fo

https://github.com/namitsharma99/restHibernateCRUD Name
Email *
You are welcome if you still wish to have a discussion. Let's start.

Message *

1. Do we have DB ready?

Send

Make good use of MySQL workbench and have a local schema up and available with your table that you wish to use further.

Here, we have 'myEmployees' under 'namit_schema' and the table records will be impacted by the CRUD UI operations.

Blog archi
A snapshot of the table currently in my local - ► 2020 (6
► 2018 (7
▼ 2017 (3
► Nove
► Octo
► July
► June
► May
► April
▼ Marc
STRU
IMA
DO
SERV
CREATE TABLE `myEmployees` ( DA
UP
DO
`id` int(11) NOT NULL, Epic
one
com
`firstName` varchar(255) DEFAULT NULL,
Write
jav
`lastName` varchar(255) DEFAULT NULL, Writin
jav

PRIMARY KEY (`id`) JAVA


-A
FO
) ENGINE=InnoDB DEFAULT CHARSET=latin1; JAVA
-T
&D
JAVA
-H
JAVA
-S
SELECT `myEmployees`.`id`,
JAVA
-R
`myEmployees`.`firstName`, SIM
Dream

`myEmployees`.`lastName` Mesm
Read
jav
FROM `namit_schema`.`myEmployees`;
Read
jav
Binar
Imp
Jav
Linea
Don't mind the vague entries :P Imp
Jav
White
Please note - Keep the DB credentials handy. Un
ECST
MAG
WSO
2.  Are we ready to integrate our JAVA code with the DB? Pa
Me
JAVA
can
usi
For fun, we will be using Hibernate for this task. You are free to use other techniques like pure JDBC or JPA.
Javas
Ma
Op

Following some commonly available tutorials, I saved time and got the hibernate connection up and running. REST
pin
Hib

► Febr
Please note - Since consuming requisite jars can be a headache, hence it's always better to go for a maven project with the
dependencies listed in pom.xml. ► 2016 (3

POM.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"


xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>RestPathAnnotationExample</groupId>
<artifactId>RestPathAnnotationExample</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-server</artifactId>
<version>1.8</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>6.0.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
Total Page
<version>5.2.6.Final</version>
</dependency>
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
<dependency> Popular Po
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId> Mediator A
<artifactId>javax.servlet-api</artifactId> documenta
<version>4.0.0-b01</version> Mediator, it
</dependency>
<dependency> Reading Ex
<groupId>com.sun.jersey</groupId>
How to use
<artifactId>jersey-json</artifactId>
<version>1.17.1</version> excel cells?
</dependency> available @
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> harma99/fi
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.0</version>
</dependency>

</dependencies> Hello Budd


toe, but this
</project> paper. We
that allows

custom cla
on to cover
Create the backing bean

using mous
Complete c
package com.myBeans; https:/...

public class Employee {

code writte
private int id; very basic
complete c

private String firstName, lastName;

public int getId() {

time. A com
return id; developers

public void setId(int id) {


recently, an
developers
this.id = id; banging. A
w...

}
JAVA code
comparison
Hello Budd
public String getFirstName() {
useful piec
you in hand
comparison
return firstName;
O(n^2) vs O
the max co
numerical S
}
Hello Budd
question re
so thought
public void setFirstName(String firstName) {
Given a str
this.firstName = firstName;

Search Th
}

public String getLastName() {

Blog archi
return lastName;
► 2020 (6
► 2018 (7
}
▼ 2017 (3
► Nove
public void setLastName(String lastName) {
► Octo

this.lastName = lastName; ► July


► June

} ► May
► April
} ▼ Marc
STRU
IMA
DO
SERV
DA
Set up the 2 essential XMLs here - UP
DO
Epic
one
com
a. employee.hbm.xml
Write
jav
Writin
jav
<?xml version="1.0" encoding="UTF-8"?>
JAVA
-A
<!DOCTYPE hibernate-mapping PUBLIC FO
JAVA
-T
"-//Hibernate/Hibernate Mapping DTD 3.0//EN" &D
JAVA
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> -H
JAVA
-S
<hibernate-mapping>
JAVA
-R
<class name="com.myBeans.Employee" table="myEmployees"> SIM
Dream
<id name="id"> Mesm
Read
jav
<generator class="increment"></generator>
Read
jav
</id>
Binar
Imp
Jav
<property name="firstName"></property>
Linea
Imp
<property name="lastName"></property> Jav
White
</class>
Un
ECST

</hibernate-mapping> MAG
WSO
Pa
b. hibernate.cfg.xml Me
JAVA
can
usi
Javas
<?xml version="1.0" encoding="UTF-8"?>
Ma
Op
<!DOCTYPE hibernate-configuration PUBLIC REST
pin
Hib
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
► Febr

"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"> ► 2016 (3

<hibernate-configuration>
Newsletter

<session-factory> Email addr

<property name="hbm2ddl.auto">update</property>

<property name="dialect">org.hibernate.dialect.MySQLDialect</property>

<property name="connection.url">jdbc:mysql://localhost:XXXX/namit_schema</property>

<property name="connection.username">username</property>

<property name="connection.password">password</property>

<property name="connection.driver_class">com.mysql.jdbc.Driver</property>

<mapping resource="employee.hbm.xml"/>

</session-factory>

</hibernate-configuration>

3. Can we create layers of abstraction and logic segregation?

Why not. As a good practice, have atleast 3 layers (especially for enterprise app projects). Here we can have Service
Classes <-> Facade Layers <-> DAO Layers.

EmployeeService.java 

This class will provide you the API declarations and will help in providing endpoints per various http methods.

package com.myCode;
import java.util.HashMap;

import java.util.Map;

import javax.ws.rs.Consumes;

import javax.ws.rs.DELETE;

import javax.ws.rs.GET;

import javax.ws.rs.POST;

import javax.ws.rs.PUT;

import javax.ws.rs.Path;

import javax.ws.rs.Produces;

import javax.ws.rs.core.Response;

import org.json.simple.JSONObject;

import com.fasterxml.jackson.core.JsonProcessingException;

import com.myFacade.ServiceFacade; Ads

/**

 * @author namit

 *

Head First
 * */ A...
INR 870.0

@Path("/employees") Shop n

public class EmployeeService {

/* Landing page configured = http://localhost:XXXX/RestPathAnnotationExample/

* Can be changed in web.xml (welcome.jsp) */

/**

* This is a default message providing method

* Can be checked using - http://localhost:XXXX/RestPathAnnotationExample/rest/employees

*
* */

@GET

@Produces("text/html")

public Response testMethod() {

String output = "this is employee service test...";

return Response.status(200).entity(output).build();

/**

* This is a method to fetch the list of employees available

* Can be checked using - http://localhost:XXXX/RestPathAnnotationExample/rest/employees/list

* */

@GET

@Path("list")

@Produces("application/json")

public Response getEmployees() {

ServiceFacade serviceFacade = new ServiceFacade();

String output = null;

HashMap<String, String> errorMap = new HashMap<String, String>();

errorMap.put("Error", "No Record Found!");

JSONObject jsonError = new JSONObject(errorMap);

try {

output = serviceFacade.getEmployees();

if (null == output || output.isEmpty()) {

output = jsonError.toJSONString();

}
} catch (JsonProcessingException e) {

e.printStackTrace();

System.out.println("JSON list = " + output);

return Response.status(200).entity(output).build();

/**

* This is a method to persist new employee's details

* Can be checked using - http://localhost:XXXX/RestPathAnnotationExample/rest/employees/save

* */

@POST

@Path("/save")

@Consumes("application/json")

public Response saveEmployee(String str) {

String[] inputArray = str.split("&");

String fname = inputArray[0].split("=")[1];

String lname = inputArray[1].split("=")[1];

String result = "Record created : " + str;

Map<String, Object> map = new HashMap<String, Object>();

map.put("firstname", fname);

map.put("lastname", lname);

ServiceFacade serviceFacade = new ServiceFacade();

serviceFacade.saveEmployees(map);

return Response.status(201).entity(result).build();

}
/**

* This is a method to update an existing employee, identified using employee id

* Can be checked using - http://localhost:XXXX/RestPathAnnotationExample/rest/employees/update

* */

@PUT

@Path("/update")

@Consumes("application/json")

public Response updateEmployee(String str) {

String[] inputArray = str.split("&");

String id = inputArray[0].split("=")[1];

String fname = inputArray[1].split("=")[1];

String lname = inputArray[2].split("=")[1];

String result = "Record updated : " + str;

Map<String, Object> map = new HashMap<String, Object>();

map.put("id", id);

map.put("firstname", fname);

map.put("lastname", lname);

ServiceFacade serviceFacade = new ServiceFacade();

serviceFacade.updateEmployees(map);

return Response.status(201).entity(result).build();

/**

* This is a method to delete an employee, identified by employee id

* Can be checked using - http://localhost:XXXX/RestPathAnnotationExample/rest/employees/delete


*

* */

@DELETE

@Path("/delete")

@Consumes("application/json")

public Response deleteEmployee(String str) {

String result = "Record deleted : " + str;

int i = Integer.valueOf(str.split("=")[1]);

ServiceFacade serviceFacade = new ServiceFacade();

serviceFacade.deleteEmployee(i);

return Response.status(200).entity(result).build();

ServiceFacade.java - 

This class acts as an intermediate step while passing data from front end to the backend and vice versa. It can be
advantageous if we need to alter the request/ response as per destination methods.

package com.myFacade;

import java.util.List;

import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.myBeans.Employee;

import com.myDB.ServiceDAO;

/**

 * @author namit

 *

 * */
public class ServiceFacade {

public String getEmployees() throws JsonProcessingException {

ServiceDAO serviceDAO = new ServiceDAO();

List<Employee> ls = serviceDAO.getEmployees();

ObjectMapper objectMapper = new ObjectMapper();

String jsonStr = objectMapper.writeValueAsString(ls);

return jsonStr;

public void saveEmployees(Map<String, Object> map) {

ServiceDAO serviceDAO = new ServiceDAO();

serviceDAO.saveEmployees(map);

public void updateEmployees(Map<String, Object> map) {

ServiceDAO serviceDAO = new ServiceDAO();

serviceDAO.updateEmployees(map);

public void deleteEmployee(int i) {

ServiceDAO serviceDAO = new ServiceDAO();

serviceDAO.deleteEmployee(i);

ServiceDAO.java -

This class holds the important DB related code.

package com.myDB;

import java.util.List;

import java.util.Map;
import org.hibernate.Query;

import org.hibernate.Session;

import com.connectors.HibernateConnector;

import com.myBeans.Employee;

/**

 * @author namit

 *

 * */

@SuppressWarnings("deprecation")

public class ServiceDAO {

@SuppressWarnings({ "unchecked" })

public List<Employee> getEmployees() {

Session session = null;

session = HibernateConnector.getInstance().getSession();

Query<Employee> q = session.createQuery("from Employee emp");

List<Employee> qList = q.list();

if (qList != null && qList.isEmpty()) {

return null;

} else {

System.out.println("list " + qList);

return (List<Employee>) qList;

public void saveEmployees(Map<String, Object> map) {

Session session = HibernateConnector.getInstance().getSession();

session.beginTransaction();

String fname = (String) map.get("firstname");


String lname = (String) map.get("lastname");

Employee employee = new Employee();

employee.setFirstName(fname);

employee.setLastName(lname);

session.save(employee);

session.getTransaction().commit();

session.close();

public void updateEmployees(Map<String, Object> map) {

Session session = HibernateConnector.getInstance().getSession();

session.beginTransaction();

int id = Integer.valueOf((String) map.get("id"));

String fname = (String) map.get("firstname");

String lname = (String) map.get("lastname");

Employee employee = new Employee();

employee.setId(id);

employee.setFirstName(fname);

employee.setLastName(lname);

session.update(employee);

session.getTransaction().commit();

session.close();

public void deleteEmployee(int i) {

Session session = HibernateConnector.getInstance().getSession();

session.beginTransaction();

Object o = session.load(Employee.class, new Integer(i));

Employee e = (Employee) o;
session.delete(e);

session.getTransaction().commit();

session.close();

Since we are using Hibernate for DB access, I wanted to have a common place for Hibernate connection, hence following
class came into the picture.

HibernateConnector.java

package com.connectors;

import org.hibernate.HibernateException;

import org.hibernate.Session;

import org.hibernate.SessionFactory;

import org.hibernate.cfg.Configuration;

public class HibernateConnector {

private static HibernateConnector hibConn;

private Configuration cfg;

private SessionFactory sessionFactory;

private HibernateConnector() throws HibernateException {

cfg = new Configuration();

cfg.configure("hibernate.cfg.xml");

cfg.addResource("employee.hbm.xml");

sessionFactory = cfg.buildSessionFactory();

}
public static synchronized HibernateConnector getInstance() throws HibernateException {

if (hibConn == null) {

hibConn = new HibernateConnector();

return hibConn;

public Session getSession() throws HibernateException {

Session session = sessionFactory.openSession();

if (!session.isConnected()) {

this.reconnect();

return session;

private void reconnect() throws HibernateException {

this.sessionFactory = cfg.buildSessionFactory();

Once you have your code in place, your project folder structure may look somewhat like this -
Please ignore the com.ignore package, it was just for created to see some if-else flows, I came across in an interview for a
big investment firm. Have a look if that interests you, I will share more of such questions if someone needs.
Anyway, coming back to our quest, now we have the code ready, I mean from APIs perspective.

Have a look at the javadocs for service class, you will get an idea what API to hit, to check the response directly through
the browser.

Well that's said, now its time to try some UI related stuff to make you proficient at both backend as well as front end.

What I have came across so far is that majority of java developers are assigned evaluation projects during onboarding
times, to come up with APIs and UI to consume them.

So the below section of the discussion will help you to get a taste of such assignment.

Have a jsp as follows -

welcome.jsp

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Welcome Page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

function getList() {
$("#loaderDiv").attr("style", "display: block");

var request = $.ajax({

url: "rest/employees/list",

type: "GET"

});

request.done(function(msg) {

console.log("Request successful!");

$("#loaderDiv").attr("style", "display: none");

$("#selectionDiv").attr("style", "display: block");

$("#drop").empty();

$("#drop").append($("<option></option>").val(0).html("<i> -- Employee Names -- <i>")) for (i in msg) {

$("#drop").append($("<option></option>").val(msg[i].id).html(msg[i].firstName + " " + msg[i].lastName));

});

request.fail(function(jqXHR, textStatus) {

$("#loaderDiv").attr("style", "display: none");

console.log("Request failed: " + textStatus);

});

function prepareEdit() {

$("#editDiv").attr("style", "display: block");

console.log('The option with value ' + $("#drop").val() + ' and text ' + $("#drop option:selected").text() + ' was sele

$("#editId").val($("#drop").val());

var fullName = $("#drop option:selected").text();

var splittedSource = fullName.replace(/\s{2,}/g, ' ').split(' ');

$("#editFName").val(splittedSource[0]);

$("#editLName").val(splittedSource[1]);

$("#storageInput").val($("#editId").val() + ":" + $("#editFName").val() + ":" + $("#editLName").val());

console.log('value stored -- ' + $("#storageInput").val());

function updateName() {

var temp = $("#storageInput").val();


var request = $.ajax({

url: "rest/employees/update",

type: 'PUT',

contentType: 'application/json; charset=utf-8',

data: {

id: $("#editId").val(),

fname: $("#editFName").val(),

lname: $("#editLName").val()

});

request.done(function(msg) {

console.log("Request successful: " + msg);

getList();

$("#editDiv").attr("style", "display: none");

});

request.fail(function(jqXHR, textStatus) {

console.log("Request failed: " + textStatus);

});

function deleteName() {

var request = $.ajax({

url: "rest/employees/delete",

type: 'DELETE',

contentType: 'application/json; charset=utf-8',

data: {

id: $("#editId").val()

});

request.done(function(msg) {

console.log("Request successful: " + msg);

getList();

$("#editDiv").attr("style", "display: none");


});

request.fail(function(jqXHR, textStatus) {

console.log("Request failed: " + textStatus);

});

function addName() {

$("#addName").attr("style", "display: block");

function hide() {

$("#addName").attr("style", "display: none");

function hide2() {

$("#editDiv").attr("style", "display: none");

$("#selectionDiv").attr("style", "display: none");

function add() {

var request = $.ajax({

url: "rest/employees/save",

type: 'POST',

contentType: 'application/json; charset=utf-8',

data: {

fname: $("#addFName").val(),

lname: $("#addLName").val()

});

request.done(function(msg) {

console.log("Request successful: " + msg);

hide();

});

request.fail(function(jqXHR, textStatus) {

console.log("Request failed: " + textStatus);


});

</script>

</head>

<body>

<div class="container" style="background-image:url(green2.jpg); background-position: center center; background-repeat: no-repea

<div class="row" align="center" style="color:darkgreen">

<h3>Hello Buddies</h3>

</div>

<div class="row" align="center" style="color:gray">

<h4>Let's try some RESTFul CRUDs</h4>

</div>

<div class="row" align="center" style="display: none" id="loaderDiv"><img alt="loading" src="loadinfo.gif">

</div>

<hr>

<div class="row" align="center">

<input type="button" class="btn-success" value="Get List" onclick="getList()">

<input type="button" class="btn-success" value="Add Name" onclick="addName()"> </div>

<hr>

<div class="row" style="display: none" id="selectionDiv" align="center" class="btn-success">

<select name="Employee List" id="drop" onchange="prepareEdit()"></select>

<!-- <input type="button" class="btn-danger" onclick="hide2()" value="Click to Hide"><br> -->

<a href="#" onclick="hide2()" style="color: red; font-size: 18px"> <span class="glyphicon glyphicon-remove-sign"></span

<br> </div>

<hr>

<div class="row" style="display: none" id="editDiv" align="center">

<label>EmpID : </label>

<input id="editId" disabled="disabled">

<br>

<label>FNAME : </label>

<input id="editFName">

<br>
<label>LNAME : </label>

<input id="editLName">

<br>

<label>EDIT : </label>

<input type="button" class="btn-success" onclick="updateName()" value="Click to Save">

<br>

<label>DELETE : </label>

<input type="button" class="btn-success" onclick="deleteName()" value="Click to Delete">

<br>

<!-- option to use for using hidden variable as local storage -->

<input type="text" style="display: none" id="storageInput"> </div>

<hr>

<div class="row" style="display: none" id="addName" align="center">

<label>FNAME :</label>

<input id="addFName">

<br>

<label>LNAME :</label>

<input id="addLName">

<br>

<label>ADD : </label>

<input type="button" class="btn-success" onclick="add()" value="Click to Add">

<!-- <input type="button" class="btn-danger" onclick="hide()" value="Click to Hide"><br> -->

<a href="#" onclick="hide()" style="color: red; font-size: 18px"> <span class="glyphicon glyphicon-remove-sign"></span>

<br> </div>

</div>

</body>

</html>

And web.xml entries as follows -

<?xml version="1.0" encoding="UTF-8"?>


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>RestPathAnnotationExample</display-name>

<servlet>

<servlet-name>jersey-serlvet</servlet-name>

<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>

<init-param>

<param-name>com.sun.jersey.config.property.packages</param-name>

<param-value>com.myCode</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>jersey-serlvet</servlet-name>

<url-pattern>/rest/*</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>welcome.jsp</welcome-file>

</welcome-file-list>

</web-app>

This will give your application a nice UI for interacting with the APIs already created. Some of the screenshots I took while
going through this app are -
So buddies, go ahead and try this out. 

We will soon discuss about the UI components, why they are being used and how they are makig life easier.

Your suggestions and thoughts are always welcome, and will surely improve my knowledge as well. ;)

Happy Coding....

at March 07, 2017

Labels: AJAX, Bootstrap, eclipse, Hibernate, HTTP GET POST PUT DELETE, Java, JSP, MySQL, Path Annotations, REST, Workbench

No comments:

Post a comment

Enter your comment...

Comment as: thecodebuddy ( Sign out

Publish Preview Notify me

Newer Post Home Older Post

Subscribe to: Post Comments (Atom)

Featured post

How to take backup of MYSQL tables daily and remove the older backups
In day to day heavy transactions happening in our DB, we sometimes wish to retain the previous states of the tables. This not only prevents ...
WSO2 ESB - How to use PayloadFactory Mediator
How to use PayloadFactory Mediator As per the WSO2-ESB documentation of PayloadFactory Mediator, it is stated that this me...

Reading Excel file using java code


How to use JAVA code to read the excel cells? Here it goes - Full code is available @ https://github.com/namitsharma99/fileHandlingUs...

JAVASCRIPT SAMPLES - TIC TAC TOE GAME & DYNAMIC TABLE CREATION IN JSP
Hello Buddies. It's time to play tic-tac-toe, but this time, not with pen and paper. We will create our own page that allows us to ...

Labels

AJAX algo Amazon Web Services Android Angular 2 Angular Components Apache httpd apache poi API API GATEWAY APK Automate build AWS AWS and Gmail AWS Email AWS Lambda AWS Lambda No
SES backup binary search binary tree Bootstrap browser issue BST chat Cheat sheet chrome class mediator cloning code code-snippet Complexity Analysis concurrency consumer core java css CSV cu
structures Data Structures and Algorithms database management deep download DSA DTMF eclipse EDM Electronic Digital Music electronic music Electronics Enum epic violins ESB esb5 event

fedora file firefox foreach mediator game games Git Git Hub Git Lab Git Repo Go Go Tutorials GoLang hello world Hibernate hip hop html HTTP GET POST PUT DELETE J2EE Java JAVA.
Jenkins jquery jQuery in Angular 2 JS JSP kafka KEYGEN LAMBDA linear search mediation messaging microservices mozilla MSTSC multi threading MySQL NG-2 NODEJS NPM Path Annotations Payload
PUTTY quick reference read text file read write csv remote access REST S3 schedulers sequence Server shallow shooting game small programs snake game socket programming Speech to Text springboot S
questions tables text file writer thecodebuddy tic-tac-toe game time complexity topic Trance TUNNEL unix upload version-check white paper WINDOWS Workbench WSO2 WSO2 ESB XML JSON transformation
Awesome Inc. theme. Powered by Blogger.

You might also like