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.
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
- 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
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
Geek Detected 