Prerequisites
- Jaggery server or WSO2 Application server should be available on the disk
- Basic HTML knowledge
Getting to Code
Create a directory on your disk with name as Employee. Create a file with following content and name it as something like employee.jag
<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<h2>Add New Employee</h2>
<form id="frmNewEmp" method="POST">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" name="age" /></td>
</tr>
</table>
</br>
<input type="submit" value="Add">
</form>
<h2>Current Employees</h2>
</body>
</html>
<%
var fileName = "employees.json";
var file = new File(fileName);
if(!file.isExists()){
file.open("w");
file.write('{"employees":[]}');
file.close();
}
/*Load JSON object from the require function*/
//var employeeJson = require(fileName);
// Read the file and parse string as JSON object
file.open("r");
var employeeJson = parse(file.readAll());
file.close();
function printEmployees(){
//Iterate through the each element in the Employees array and print them
for(var i in employeeJson.employees){
print(employeeJson.employees[i].fname + " " + employeeJson.employees[i].lname + ", " + employeeJson.employees[i].age);
print("</br>");
}
}
// This section will get called when user press the Add button.
// Read the POST data and add new employee to the JSOPN array
// Save the JSOn object in the file
if(request.getMethod() == "POST"){
employeeJson.employees.push({"fname":request.getParameter("fname"), "lname":request.getParameter("lname"), "age":request.getParameter("age")});
file.open("w");
file.write(employeeJson);
file.close();
}
// Print existing Employees
printEmployees();
%>
Deploy
Copy your Employee directory (Directory that contains the employee.jag file) to the apps directory in the Jaggery extract path.
Note
Read on Hello Jaggery post to understand how to deploy files, if you are not sure.
If you are using WSO2 Application Server, you must copy the directory to
repository/deployment/server/jaggeryapps
Run
Open your web browser and go to the URL
http://localhost:9763/Employee/employee.jag
When you load the page for the first time it will look like
After you added few employees it will look like
