Basic CRUD operations using Jaggery


Screenshot from 2014-01-18 13:10:58WSO2 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 serverScreenshot 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":"DB", 
 "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 , Next post will be about, how to deal with POJO using jaggery.js till then , Happy coding 🙂

References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s