Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Basic CRUD operations using Jaggery

DZone's Guide to

Basic CRUD operations using Jaggery

· Java Zone
Free Resource

Try Okta to add social login, MFA, and OpenID Connect support to your Java app in minutes. Create a free developer account today and never build auth again.

 
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


Build and launch faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}