Over a million developers have joined DZone.

Basic CRUD operations using Jaggery

· Java Zone

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

 
Screenshot from 2014-01-18 13:10:58

WSO2 has released Jaggery.js, a framework to compose web apps and HTTP-focused web services in pure JavaScript for all aspects of the application: front-end, communication, server-side logic and persistence. The framework will reduce the gap between writing client-side web application pages and back-end web services.

In this series of Jaggery.js tutorials, I’m going to talk about how to perform basic CRUD operations using Jaggery.js.Jaggeryjs

Note
If you want to know what and how Jaggery.js works, please refer my previous post for further clarifications.

Technologies and Tools used in this article:

1. Setting up  

I hope you have downloaded all the necessary tools which are mentioned above.

Download and unzip jaggary then go to {Jaggery_home}/bin and execute following commands on the terminal. If you are a Linux user sh server.sh or windows user server.bat to start the server
  • Screenshot from 2014-01-18 13:07:32
  • Create a folder called crud inside {Jaggery_home}/apps/ folder path
  • Make sure your MySQL up and running, create a DB called tasks
  • Copy MySQL connector jar file ( mysql-connector-java-5.*-bin.jar ) in to {Jaggery_home}/carbon/repository/components/lib

2. Standard web project 

follow the instruction as it is.

  • Create a Jaggery configuration file called jaggery.conf which specifies the application specific configurations.for this example it contains application URL mappings. application context as follows.
{
"displayName":"TaskScheduler",
"urlMappings":[
     {
         "url":"/welcome/*",
     "path":"/modules/serverReq.jag"
     }]
}

  • Now we are going to create our first jaggery file. In-order to isolate the server-side logic create serverReq.jag jaggery file inside modules directory.
  • Basic CRUD operations as follows.
<%
 var query1 ="CREATE TABLE example(
             id INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(id), val VARCHAR(200));";
 var query3 ="SELECT * FROM example;";
 var query4 ="SHOW TABLES LIKE 'example';";
 config = {};
 var dataSource = new Database("
             jdbc:mysql://localhost:3306/tasks", "root", "root", config);
 result=dataSource.query(query1); 
 %>
  • Let’s move on to client side logic. for that create a javascript file called crud.js

CRUD = new function() {
   console.log("CRUD operations protocol has been initiated ");
   this.getValues = function(){
   var id = Math.floor(Math.random()*100000);
   var d = new Date().toString();
   var dateStr = d.substring(0, d.indexOf(":",20));

   var textFName = document.task.fName.value;
   var textLName = document.task.lName.value;
   var textConNo = document.task.conNo.value;

 $.post("welcome/", 
 { 
   first: textFName, 
   last: textLName, 
   contact: textConNo, 
   time: dateStr, 
   action: "add", 
   id:id 
 },
 function(data){
  $(data).hide().prependTo(".val").fadeIn("slow");
  console.log("fadein executed");
  $("#message").hide();
  $("#fName").val("");
  $("#lName").val("");
  $("#conNo").val("");
 } ); 
} 
}
  • Create your index.jag file and paste the following code

<html>
<body>
  <div class="row">
   <div class="col-lg-4">
   <form id="task" name="task">
     <div class="input-group">
     <span class="input-group-addon">First Name</span>
     <input type="text" class="form-control" id="fName" placeholder="Employee First Name">
     </div></br>
     <div class="input-group">
     <span class="input-group-addon">Last Name</span>
     <input type="text" class="form-control" id="lName" placeholder="Employee Last Name">
     </div></br>
     <div class="input-group">
     <span class="input-group-addon">Contact No</span>
     <input type="text" class="form-control" id="conNo" placeholder="Employee Contact #">
     </div></br>
     <button class="btn btn-default " onclick="CRUD.getValues();">Save changes</button>
     </form> 
  </div>
 </div>
</body>
</html>
  • So that’s all folks, then after you execute the code correctly you will be getting inputs as follows

Screenshot from 2014-01-18 13:10:47

Download the source files and try it out, Happy coding :)

References


Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Pubudu Dissanayake. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}