57
Cimande 2.0 Quick Start Guide BAB I CIMANDE 2.0 TOOLS created by Meruvian Developer (Eng.version) 1

Cimande 2.0 Quick Start english version

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Cimande 2.0 Quick Start   english version

Cimande 2.0 Quick Start Guide

BAB I

CIMANDE 2.0 TOOLS

created by Meruvian Developer (Eng.version) 1

Page 2: Cimande 2.0 Quick Start   english version

To Ro

The Purpose

1. Know and understand the tools are needed to run Cimande 2.0 such as Eclipse IDE,

M2Eclipse, Subclipse, Apache Tomcat, MySQL Query Browser

Learning Material

1.1 Eclipse IDE

Eclipse is an IDE (Integrated Development Software) to develop the software and can

run on all platform (platform independent). The following is characters of Eclipse :

• Multi Platform

Supports development and execution on all the major desktop platforms (Windows,

Mac OS X, Linux, QNX Photon, Pocket PC, HP-UX, AIX, Solaris)

• Multi Language

Eclipse written mostly in Java and can be used to develop applications in Java, but

Eclipse also support with various programming language like C/C++, Cobol, Phyton,

Perl and PHP

• Multi Role

Besides as an IDE for application development, Eclipse can be used for activities in the

software development cycle such as documentation, test software, and web

development

Eclipse is one of the favorite IDE due to free and open source. It means that anyone

can view the programming code of this software. Besides, the advantages that make it

populer is the ability to be developed by users with component named plugin. Kinds of plugin

that available in Eclipse :

– Subversion

– m2eclipse

created by Meruvian Developer (Eng.version) 2

Page 3: Cimande 2.0 Quick Start   english version

To Ro

– Glassfish Integration

– Jboss Tools

– STS (SpringSource Tool Suite)

– EGIT (Git Eclipse Plugin)

– Mercurial Eclipse (Mercurial Eclipse Plugin)

– Windows Builder

1.2 m2eclipse

m2eclipse is a plugin that used if we use Maven as the project management. Maven is

a build tool like Ant but more complex and bigger than Ant. Maven is very good if we build

software that is done by several people

1.3 Subclipse

Subclipse is a plugin that is used for Eclipse integration and Subversion Client.

Subversion (SVN) is an opensource software that useful as version control. Basically, there

are two important parts of SVN. They are SVN Client and SVN Repository. SVN Client is a

software used to access user repository. SVN Repository is a server which contain datas on

the management. Any changes to the data recorded by the SVN repository.

Using this SVN the data in the repository can be copied to the client so that users can

process local data that often called the "Checkout". Then the data at the local when

processed, can be sent back to the repository for version control, and accessible to our

colleagues that usually called "Commit"

created by Meruvian Developer (Eng.version) 3

Page 4: Cimande 2.0 Quick Start   english version

To Ro

1.4 Apache Tomcat

Apache Tomcat is a web server that can run on many operating system (Unix, BSD,

Linux, Microsoft Windows) and useful to serve or enable website. Apache has advance

features like error message that can be configured and based authentication database.

Apache also supported by many Graphic User Interface (GUI) that allow easy server handling

1.5 MySQL Query Browser

A database is a collection of information that is organized so that it can easily be

accessed, managed, and updated. The MySQL Query Browser is a graphical tool provided by

MySQL AB for creating, executing, and optimizing queries in a graphical environment. Where

the http://www.mysql.com/products/administrator/ is designed to administer a MySQL server,

the MySQL Query Browser is designed to help you query and analyze data stored within your

MySQL database

created by Meruvian Developer (Eng.version) 4

Page 5: Cimande 2.0 Quick Start   english version

To Ro

Cimande 2.0 Quick Start Guide

BAB II

TOOLS INSTALLATION

created by Meruvian Developer (Eng.version) 5

Page 6: Cimande 2.0 Quick Start   english version

To Ro

The Purpose

1. Know and understand how to install the tools are needed to run Cimande 2.0 like how

to install Eclipse Indigo 3.7, m2eclipse, Subclipse and Apache Tomcat 7.0.16

2. Know and understand how to make a database on MySQL Query Browser

Learning Material

2.1 Eclipse Indigo 3.7 Installation

Eclipse Indigo 3.7 is the latest version that just release last June 2011. Follow the

instruction below to install Eclipse Indigo :

2.1.1 Download Eclipse Indigo from http://www.eclipse.org/downloads/, choose

Eclipse Indigo for Linux 32 bit

created by Meruvian Developer (Eng.version) 6

Page 7: Cimande 2.0 Quick Start   english version

To Ro

2.1.2 Download that link at Eclipse downloads – mirror selection

2.1.3 Save file in any directory

2.1.4 If the downloaded file is complete, extract the file and run the Eclipse by double

clicking on the Eclipse icon

created by Meruvian Developer (Eng.version) 7

Page 8: Cimande 2.0 Quick Start   english version

To Ro

2.1.5 Eclipse Indigo will appear and select where you put Eclipse metadata by double

clicking the button Browse

created by Meruvian Developer (Eng.version) 8

Page 9: Cimande 2.0 Quick Start   english version

To Ro

2.1.6 Eclipse Indigo ready to use

created by Meruvian Developer (Eng.version) 9

Page 10: Cimande 2.0 Quick Start   english version

To Ro

2.2 M2Eclipse Installation

If previous Cimande we use Ant as the Build Tool, but in Cimande 2.0 we use Maven.

To run this Maven, the Eclipse must be intalled m2eclipse plugin. Follow the instruction below

to install m2eclipse :

2.2.1 To add the m2eclipse update site to the Eclipse site list, choose the menu item

Help → Install New Software

created by Meruvian Developer (Eng.version) 10

Page 11: Cimande 2.0 Quick Start   english version

To Ro

2.2.2 Click Available Sotware Sites link

2.2.3 Click the Add button to display the Add Site dialog

created by Meruvian Developer (Eng.version) 11

Page 12: Cimande 2.0 Quick Start   english version

To Ro

2.2.4 Insert the Name field with m2e updates , insert the Location field with the URL

http://download.eclipse.org/technology/m2e/releases , and then click OK, so the new

update site will be added to the list

2.2.5 Check Maven Integration for Eclipse (you can click the disclosure triangle to

see what exactly is included in this feature), then click Next

created by Meruvian Developer (Eng.version) 12

Page 13: Cimande 2.0 Quick Start   english version

To Ro

2.2.6 View the Install Details, then click Next

2.2.7 Accept the Lisence Agreement and click on the Finish button to download and

install m2eclipse

2.2.8 Restart Eclipse

created by Meruvian Developer (Eng.version) 13

Page 14: Cimande 2.0 Quick Start   english version

To Ro

2.3 Subclipse Installation

Subclipse installation is needed when we want to check out or commit code to SVN.

Follow the instruction below to install subclipse :

2.3.1 To add the Subclipse update site to the Eclipse site list, choose the menu item

Help → Install New Software

2.3.2 Click Available Software Site link

created by Meruvian Developer (Eng.version) 14

Page 15: Cimande 2.0 Quick Start   english version

To Ro

2.3.3 Click the Add button to display the Add Site dialog

2.3.4 Insert the Field Name with subclipse, insert the Field Location with the URL for

subclipse update site http://subclipse.tigris.org/update_1.6.x, and then click OK, so the

new update site will be added to the list

2.3.5 Check Subclipse (you can click the disclosure triangle to see what exactly is

included in this feature), then click Next

created by Meruvian Developer (Eng.version) 15

Page 16: Cimande 2.0 Quick Start   english version

To Ro

2.3.6 View Install Details, then click Next

created by Meruvian Developer (Eng.version) 16

Page 17: Cimande 2.0 Quick Start   english version

To Ro

2.3.7 Accept Lisence Agreement and click on the Finish button to download and

install subclispe

2.3.8 Restart Eclipse

created by Meruvian Developer (Eng.version) 17

Page 18: Cimande 2.0 Quick Start   english version

To Ro

2.4 Apache Tomcat 7.0.16 Installation

To run Cimande 2.0 we need a server. Follow the instruction below to install Apache

Tomcat 7.0.16 :

2.4.1 Download the Apache Tomcat 7.0.16 (last version) at http://tomcat.apache.org/

2.4.2 Download the Apache Tomcat file .zip

created by Meruvian Developer (Eng.version) 18

Page 19: Cimande 2.0 Quick Start   english version

To Ro

2.4.3 Extract the Apache Tomcat 7.0.16 source file to any directory, for example in

home/netoya

2.4.4 Open Eclipse to make a server by clicking File → New → Other → Server →

Next menu item

2.4.5 Select Tomcat v7.0 Server, then click Next

created by Meruvian Developer (Eng.version) 19

Page 20: Cimande 2.0 Quick Start   english version

To Ro

2.4.6 Find the location of Apache Tomcat that has been extracted by clicking Browse,

then click Next → Finish

2.4.7 Server has been made

created by Meruvian Developer (Eng.version) 20

Page 21: Cimande 2.0 Quick Start   english version

To Ro

2.5 Creating Database

There are several ways to create MySQL database. We can use the command line,

PHP MyAdmin, or use MySQL Query Browser. If we use command line, you must memorize

the syntax to makeaa database. The Syntax is quite simple, CREATE DATABASE

database_name and ends with a semicolon. If you want to use MySQL Query Browser, follow

the instruction how to install and make a database below :

2.5.1 Select System → Administration → Synaptic Package → Manager

2.5.2 Install and download MySQL Query Browser

created by Meruvian Developer (Eng.version) 21

Page 22: Cimande 2.0 Quick Start   english version

To Ro

2.5.3 To start creating a database, select Application → Programming → MySQL

Query Browser

created by Meruvian Developer (Eng.version) 22

Page 23: Cimande 2.0 Quick Start   english version

To Ro

2.5.4 Default username : root, password : tulalit

2.5.5 Create database by right click → create schema

created by Meruvian Developer (Eng.version) 23

Page 24: Cimande 2.0 Quick Start   english version

To Ro

Cimande 2.0 Quick Start Guide

BAB III

Running Cimande Project

created by Meruvian Developer (Eng.version) 24

Page 25: Cimande 2.0 Quick Start   english version

To Ro

The Purpose

1. Know and understand how to create Cimande project from Maven Archetype

2. Know and understand how to generate schema use Maven Build

Learning Material

3.1 Running Cimande Project

For beginning, we will create Cimande project to display Cimande Admin form. Follow

the instruction below :

3.1.1 Open Eclipse Indigo, change the choice of Java EE to Java

3.1.2 Select File → New → Other → Maven → Project to create Maven project

created by Meruvian Developer (Eng.version) 25

Page 26: Cimande 2.0 Quick Start   english version

To Ro

3.1.3 Put the cimande project that you will create in any directory, for example in

home/netoya/workspace by clicking Browse → Next

3.1.4 At the field Filter, type org.blueoxygen and automatically cimande-archetype-

blank will appear. Archetype is a template to create applications using Cimande.

created by Meruvian Developer (Eng.version) 26

Page 27: Cimande 2.0 Quick Start   english version

To Ro

3.1.5 Insert field Group Id and Artifact Id. Field Group Id for the name of package, and

field Artifact Id for the name of project.

3.1.6 We need database configuration in the package src/main/resource →

Hibernate.properties, change the database with the database that you created.

created by Meruvian Developer (Eng.version) 27

Page 28: Cimande 2.0 Quick Start   english version

To Ro

3.1.7 Right click Project → Run As → Maven Build to generate table schema. Insert

field Goals with command hibernate3:hbm2ddl

created by Meruvian Developer (Eng.version) 28

Page 29: Cimande 2.0 Quick Start   english version

To Ro

3.1.8 To import data into database, use command initialize dbunit:operation

3.1.9 Start Server

3.1.10 Open web browser then type URL localhost:8080/cimande. Login as admin

with the username : admin, password : blueoxygen

created by Meruvian Developer (Eng.version) 29

Page 30: Cimande 2.0 Quick Start   english version

To Ro

Cimande 2.0 Quick Start Guide

BAB IV

CIMANDE 2.0 CRUD

created by Meruvian Developer (Eng.version) 30

Page 31: Cimande 2.0 Quick Start   english version

To Ro

The Purpose

1. Know and understand how to create Cimande project

2. Implement CRUD in Cimande project

Learning Material

4.1 CRUD Overview

This module will explain how to make an application with CRUD implementation (Create,

Read, Update, Delete) such as how to create new content, updating, deleting and searching

data. The standard mapping of each C, R, U and D is to perform data flow mapping from the

database to the Velocity like the following image:

4.2 Creating Package

We will create simple Cimande project to display someone's profile form. So we need

packages to save the java class. Create four packages in the package org.blueoxygen. They

are entity, dao, service dan controller.

• Package org.blueoxygen.entity

This package contains the entity class that serves as a link between framework with

the database. Creating table and all the variables that will be displayed in the database

declared here

created by Meruvian Developer (Eng.version) 31

Page 32: Cimande 2.0 Quick Start   english version

To Ro

• Package org.blueoxygen.dao

Data Access Object (DAO) is an object that provides an abstract interface to a

database or persistence mechanisms and certain operations without showing details of

the database. The Implementation of this concept called separation of concern, where

each code is separated by the function so the code on it only needs to know abstractly

how to access data without knowing how access to data sources are implemented

• Package org.blueoxygen.service

Service is an object that serves to simplify the large code like a library. In the case of a

database we can use the Service to classify some of the DAO in a transaction

• Package org.blueoxygen.controller

Controller is a layer that works to set the "inter-layer" . This Layer is responsible for

application execution

created by Meruvian Developer (Eng.version) 32

Page 33: Cimande 2.0 Quick Start   english version

To Ro

4.3 Creating Java Class

Create and save class in the package src/main/java

4.3.1 Create class Person.java in the package org.blueoxygen.entity

package org.blueoxygen.entity;

import java.util.Date;import javax.persistence.Entity;import javax.persistence.Inheritance;import javax.persistence.InheritanceType;import javax.persistence.Table;import org.blueoxygen.cimande.commons.DefaultPersistence;

/** * @author Nety Herawaty *  */

@Entity@Table(name = "module_person")@Inheritance(strategy = InheritanceType.SINGLE_TABLE)public class Person extends DefaultPersistence {

private String fname;private String lname;private String sex;private Date birthdate;private String address;private String city;private String country;private String email;private String phone;

public String getFname() {return fname;

}

public void setFname(String fname) {this.fname = fname;

}

public String getLname() {return lname;

}

public void setLname(String lname) {this.lname = lname;

}

public String getSex() {return sex;

}

public void setSex(String sex) {this.sex = sex;

}

public Date getBirthdate() {return birthdate;

}

public void setBirthdate(Date birthdate) {

created by Meruvian Developer (Eng.version) 33

Page 34: Cimande 2.0 Quick Start   english version

To Ro

this.birthdate = birthdate;}

public String getAddress() {return address;

}

public void setAddress(String address) {this.address = address;

}

public String getCity() {return city;

}

public void setCity(String city) {this.city = city;

}

public String getCountry() {return country;

}

public void setCountry(String country) {this.country = country;

}

public String getEmail() {return email;

}

public void setEmail(String email) {this.email = email;

}

public String getPhone() {return phone;

}

public void setPhone(String phone) {this.phone = phone;

}

}

4.3.2 Create class PersonDao.java in the package org.blueoxygen.dao

package org.blueoxygen.dao;

import java.util.List;import org.blueoxygen.cimande.commons.LogInformation;import org.blueoxygen.cimande.persistence.hibernate.dao.HibernatePersistenceDaoManager;import org.blueoxygen.cimande.security.User;import org.blueoxygen.entity.Person;import org.hibernate.Criteria;import org.hibernate.criterion.MatchMode;import org.hibernate.criterion.Projections;import org.hibernate.criterion.Restrictions;import org.springframework.stereotype.Repository;

/** * @author Nety Herawaty * 

created by Meruvian Developer (Eng.version) 34

Page 35: Cimande 2.0 Quick Start   english version

To Ro

 */

@Repositorypublic class PersonDao extends HibernatePersistenceDaoManager<Person> {

public void savePerson(Person person) {if (person == null)

return;

if (person.getId() == null) {createPerson(person);

} else if (person.getId().trim().equalsIgnoreCase("")) {createPerson(person);

} else {person.getLogInformation()

.setLastUpdateBy(getCurrentUser().getId());person.getLogInformation().setLastUpdateDate(getCurretTime());

merge(person);}

}

public long getPersonCountByCriteria(String fname, String lname) {Criteria criteria = getPersonCriteria(fname, lname);criteria.setProjection(Projections.rowCount());

return new Long(criteria.uniqueResult() + "");}

@SuppressWarnings("unchecked")public List<Person> getPersonByCriteria(String fname, String lname,

int limit, int page) {

return getPersonCriteria(fname, lname).setMaxResults(limit).setFirstResult((page ­ 1) * limit).list();

}

private Criteria getPersonCriteria(String fname, String lname) {Criteria criteria = sessionFactory.getCurrentSession().createCriteria(

Person.class);

criteria.add(Restrictions.like("fname", fname, MatchMode.ANYWHERE));criteria.add(Restrictions.like("lname", lname, MatchMode.ANYWHERE));

return criteria;}

private void createPerson(Person person) {User user = getCurrentUser();LogInformation logInformation = new LogInformation();logInformation.setCreateBy(user.getId());logInformation.setCreateDate(getCurretTime());logInformation.setLastUpdateBy(user.getId());logInformation.setLastUpdateDate(getCurretTime());

person.setId(null);person.setLogInformation(logInformation);

persist(person);}

}

created by Meruvian Developer (Eng.version) 35

Page 36: Cimande 2.0 Quick Start   english version

To Ro

4.3.3 Create class PersonService.java in the package org.blueoxygen.service

package org.blueoxygen.service;

import java.util.List;

import org.blueoxygen.entity.Person;

/** * @author Nety Herawaty *  */

public interface PersonService {void savePerson(Person person);

void deletePerson(Person person);

Person getPersonById(String id);

long getPersonCount(String fname, String lname);

List<Person> getPersonList(String fname, String lname, int limit, int page);}

4.3.4 Create class PersonServiceImpl.java in the package org.blueoxygen.service.impl

package org.blueoxygen.service.impl;

import java.util.List;import org.blueoxygen.dao.PersonDao;import org.blueoxygen.entity.Person;import org.blueoxygen.service.PersonService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;

/** * @author Nety Herawaty *  */

@Service@Transactional(readOnly = true)public class PersonServiceImpl implements PersonService {

@Autowiredprivate PersonDao personDao;

@Transactionalpublic void savePerson(Person person) {

personDao.savePerson(person);}

@Transactionalpublic void deletePerson(Person person) {

personDao.remove(person);}

public Person getPersonById(String id) {return personDao.getById(Person.class, id);

}

created by Meruvian Developer (Eng.version) 36

Page 37: Cimande 2.0 Quick Start   english version

To Ro

public long getPersonCount(String fname, String lname) {return personDao.getPersonCountByCriteria(fname, lname);

}

@Overridepublic List<Person> getPersonList(String fname, String lname, int limit,

int page) {

return personDao.getPersonByCriteria(fname, lname, limit, page);}

}

4.3.5 Create class PersonController.java in the package org.blueoxygen.controller

package org.blueoxygen.controller;

import java.text.ParseException;import java.text.SimpleDateFormat;import javax.swing.JOptionPane;import org.blueoxygen.cimande.commons.CimandeModuleAction;import org.blueoxygen.entity.Person;import org.blueoxygen.service.PersonService;import org.springframework.beans.factory.annotation.Autowired;import com.opensymphony.xwork2.validator.annotations.RequiredStringValidator;import com.opensymphony.xwork2.validator.annotations.Validations;

public class PersonController extends CimandeModuleAction {@Autowiredprivate PersonService personService;

private Person person = new Person();private int limit = 0;private int page = 0;

SimpleDateFormat df = new SimpleDateFormat("dd­MM­yy");

public PersonController() {model.put("person", person);

}

// POST /module/person/create// POST /module/person/create/{id}@Validations(requiredStrings = {@RequiredStringValidator(fieldName = "person.fname", message = "First Name cannot be empty", 

trim = true),@RequiredStringValidator(fieldName = "person.lname", message = "Last Name cannot be empty", 

trim = true) })

public String personPost() {

try {person.setBirthdate(df.parse(model.get("birthdate").toString()));

} catch (ParseException e) {// TODO Auto­generated catch blocke.printStackTrace();

}personService.savePerson(person);

return SUCCESS;}

// GET /module/person/create// GET /module/person/edit/{id}

created by Meruvian Developer (Eng.version) 37

Page 38: Cimande 2.0 Quick Start   english version

To Ro

public String personGet() {model.put("person", personService.getPersonById(person.getId() + ""));

// model.put("itemCategorys", itemCategoryService.getAllItemCategory());return INPUT;

}

// DELETE /module/person/edit/{id}public String personDelete() {

personService.deletePerson(personService.getPersonById(person.getId()));

return SUCCESS;}

// POST/GET /module/person/filterpublic String filter() {

try {limit = model.get("rows") == null ? 0 : new Integer(model.get(

"rows").toString());page = model.get("page") == null ? 0 : new Integer(model

.get("page").toString());} catch (NumberFormatException e) {

e.printStackTrace();}

if (limit == 0 && page == 0) {limit = 10;page = 1;

}

model.put("rows", limit);model.put("page", page);

int count = (int) personService.getPersonCount("", "");int total = count / limit;if (total % limit > 0)

total++;

System.out.println();model.put("persons", personService.getPersonList("", "", limit, page));

if (total == 0)total++;

model.put("total", total);model.put("records", total);

return SUCCESS;}

}

created by Meruvian Developer (Eng.version) 38

Page 39: Cimande 2.0 Quick Start   english version

To Ro

4.4 Creating View

4.4.1 Create view person-create.vm

<html><head><meta http­equiv="content­type" content="text/html; charset=utf­8" /><title>Kalender</title><link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" /><link rel="stylesheet" type="text/css" href="css/demos.css" /><link rel="stylesheet" type="text/css" href="css/jquery.ui.datepicker.css" />

<script type="text/javascript" src="js/jquery­1.4.4.js"></script><script type="text/javascript" src="js/ui/jquery.ui.core.js"></script><script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script><script type="text/javascript" src="js/ui/i18n/jquery.ui.datepicker­id.js"></script>

<script type="text/javascript">$(document).ready(function(){$("#tanggal").datepicker({showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true, nextText: "", 

prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd­mm­yy"});

});</script>

#sjhead("ajaxcache=true" "jquerytheme=smoothness" "loadFromGoogle=false""jqueryui=true") #shead

</head><body><form action="#surl(" value=$request.servletPath ")" method="post"><table style="border: 1px black solid;">

<tr>#stextfield("name=person.fname" "size=25" "label=First Name")

            </tr>

<tr>#stextfield("name=person.lname" "size=25" "label=Last Name")

</tr>

<tr><td> Sex </td><td><input type="radio" name="person.sex" value="Male" checked="checked" /> Male 

<input type="radio" name="person.sex" value="Female" /> Female</td> 

</tr>

<tr><td>BirthDate</td><td><input id="tanggal" type="text" name="birthdate"></td>

</tr>

<tr><td><label for="person.address" class="label">Address </label></td><td><textarea rows="3" cols="25" name="person.address">$!person.address</textarea></td>

</tr>

<tr>

created by Meruvian Developer (Eng.version) 39

Page 40: Cimande 2.0 Quick Start   english version

To Ro

#stextfield("name=person.city" "size=25" "label=City")</tr>

<tr>#stextfield("name=person.country" "size=25" "label=Country")

</tr>

<tr>#stextfield("name=person.email" "size=25" "label=Email")

</tr>

<tr>#stextfield("name=person.phone" "size=25" "label=Phone")

</tr>

<tr><td colspan="2" align="right">

 <input type="submit" value="Save"> <input type="hidden" name="person.id" value="$!person.id" />

 </td></tr>

</table></form></body></html>

4.4.2 Create view person-grid-list.vm

<html><head><meta http­equiv="content­type" content="text/html; charset=utf­8" /><title>Kalender</title><link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" /><link rel="stylesheet" type="text/css" href="css/demos.css" /><link rel="stylesheet" type="text/css" href="css/jquery.ui.datepicker.css" />

<script type="text/javascript" src="js/jquery­1.4.4.js"></script><script type="text/javascript" src="js/ui/jquery.ui.core.js"></script><script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script><script type="text/javascript" src="js/ui/i18n/jquery.ui.datepicker­id.js"></script>

<script type="text/javascript">$(document).ready(function(){$("#tanggal").datepicker({showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true, nextText: "", prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd­mm­yy"});});</script>

#sjhead("ajaxcache=true" "jquerytheme=smoothness" "loadFromGoogle=false""jqueryui=true") #shead

</head><body><form action="#surl(" value=$request.servletPath ")" method="post"><table style="border: 1px black solid;">

<tr>#stextfield("name=person.fname" "size=25" "label=First Name")

</tr>

<tr>#stextfield("name=person.lname" "size=25" "label=Last Name")

created by Meruvian Developer (Eng.version) 40

Page 41: Cimande 2.0 Quick Start   english version

To Ro

</tr>

<tr><td> Sex </td><td>    <input type="radio" name="person.sex" value="Male" checked="checked" /> Male     <input type="radio" name="person.sex" value="Female" /> Female</td> 

</tr>

<tr><td>BirthDate</td><td><input id="tanggal" type="text" name="birthdate"></td>

</tr>

<tr><td><label for="person.address" class="label">Address </label></td><td><textarea rows="3" cols="25" name="person.address">$!person.address</textarea></td>

</tr>

<tr>#stextfield("name=person.city" "size=25" "label=City")

</tr>

<tr>#stextfield("name=person.country" "size=25" "label=Country")

</tr>

<tr>#stextfield("name=person.email" "size=25" "label=Email")

</tr>

<tr>#stextfield("name=person.phone" "size=25" "label=Phone")

</tr>

<tr><td colspan="2" align="right">

 <input type="submit" value="Save"> <input type="hidden" name="person.id" value="$!person.id" />

 </td></tr>

</table></form></body></html>

4.4.3 Create view person-list.vm

<html><head>#sjhead("ajaxcache=true" "jquerytheme=smoothness" "loadFromGoogle=false" "jqueryui=true")#shead</head><body>

<table border="1"><tr><td style="width: 20px;font­weight: bold;text­align: center;">No</td><td style="width: 50px;font­weight: bold;text­align: center;">First Name</td>

       <td style="width: 50px;font­weight: bold;text­align: center;">Last Name</td><td style="width: 50px;font­weight: bold;text­align: center;">Sex</td>

       <td style="width: 50px;font­weight: bold;text­align: center;">BirthDate</td><td style="width: 50px;font­weight: bold;text­align: center;">Address</td>

created by Meruvian Developer (Eng.version) 41

Page 42: Cimande 2.0 Quick Start   english version

To Ro

<td style="width: 50px;font­weight: bold;text­align: center;">City</td><td style="width: 50px;font­weight: bold;text­align: center;">Country</td><td style="width: 50px;font­weight: bold;text­align: center;">Email</td><td style="width: 50px;font­weight: bold;text­align: center;">Phone</td><td style="width: 20px;font­weight: bold;text­align: center;" colspan="2">Action</td></tr>

#set($no=0)#foreach($i in $persons)#set($no=$no+1)<tr>

<td>$no</td><td>$!i.fname</td><td>$!i.lname</td><td>$!i.sex</td><td>$!i.birthdate</td><td>$!i.address</td><td>$!i.city</td><td>$!i.country</td><td>$!i.email</td><td>$!i.phone</td><td>

<a href="#surl("value=/module/person/edit/$!i.id")">Edit</a></td><td>

<a class="delete" href="$!i.id">Delete</a></td>

</tr>#end<tr>

<td colspan="7" align="right">#set($Integer = 0)#set($total = $Integer.parseInt($total))#set($limit = $Integer.parseInt($limit))#set($page = $Integer.parseInt($page))#set($totalpage = $total / $limit)#if($total % 10 > 0) 

#set($totalpage = $totalpage + 1) #end

#if($page != 1)#set($page = $page ­ 1)<a href="$!page">Previous</a>#end#if($page != $totalpage)#set($page = $page + 1)<a href="$!page">Next</a>#end

</td></tr>

</table><script type="text/javascript">

$(function() {$('a.delete').click(function() {

jQuery.ajax({type : 'DELETE',url : '#surl("value=/module/person/edit/")' + $

(this).attr('href'),success : function(data) {

window.location.reload(true);},error : function() {

alert('error');}

});

return false;

created by Meruvian Developer (Eng.version) 42

Page 43: Cimande 2.0 Quick Start   english version

To Ro

});});

</script></body>

</html>

4.5 Creating Data Flow Application

4.5.1 Mapping Entity in the packe src/main/resources/

cimande-hibernate-sample.xml

<?xml version='1.0' encoding='utf­8'?><!DOCTYPE hibernate­configuration PUBLIC"­//Hibernate/Hibernate Configuration DTD 3.0//EN""http://hibernate.sourceforge.net/hibernate­configuration­3.0.dtd">

<hibernate­configuration><session­factory>

<mapping class="org.blueoxygen.entity.Person"/></session­factory>

</hibernate­configuration>

4.5.2 Create data flow in the package src/main/resources/

cimande-struts-example.xml

<?xml version="1.0" encoding="UTF­8" ?>

<!DOCTYPE struts PUBLIC    "­//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts­2.0.dtd"><struts>

<package name="person" extends="cimande­default" namespace="/module/person"><action name="create" class="org.blueoxygen.controller.PersonController" method="person">

<result name="input" type="velocity">/module/template/person/person­create.vm

</result>

<result name="success" type="velocity">/module/template/person/person­grid­list.vm

</result></action>

<action name="filter/*" class="org.blueoxygen.controller.PersonController" method="filter"><result name="input" type="redirect">

filter/${limit}/${page}</result>

<result name="success" type="velocity">/module/template/person/person­grid­list.vm

</result></action>

created by Meruvian Developer (Eng.version) 43

Page 44: Cimande 2.0 Quick Start   english version

To Ro

<action name="edit/*" class="org.blueoxygen.controller.PersonController" method="person"><param name="person.id">{1}</param><result name="input" type="velocity">

/module/template/person/person­create.vm</result>

<result name="success" type="redirect">/module/person/filter

</result></action></package>

</struts>

4.5.3 Start Server

4.6 Cimande BackEnd

Open web browser and enter the URL http://localhost:8181/person/ . Then login as

username : admin and password : blueoxygen to create module, menu, user manager and

others.

created by Meruvian Developer (Eng.version) 44

Page 45: Cimande 2.0 Quick Start   english version

To Ro

There are several things to know in the BackEnd Cimande, such as :

• Site Manager

- Descriptor Manager : Descriptor

- Module Manager : Module Function

Role Manager

Role Privilage

Role Site Privilage

- Multi Site : Site

- User Management : Company

Job Position

User Manager

- Workflow Role : WF Role

created by Meruvian Developer (Eng.version) 45

Page 46: Cimande 2.0 Quick Start   english version

To Ro

4.6.1 Descriptor Manager

Descriptor is used to automation of new and search action, that will be executed

based on the namespace declared in the struts-example.xml

Creating Descriptor:

1. Name : person

2. Description : Person

4.6.2 Module Function

Descriptor is used to create dynamic menu. The main menu use the thread

master id “master”, and submenu using the main menu / menu above as the

thread master id. If you want a menu to execute a new / search action, then add

the descriptor based on the descriptor that was made

created by Meruvian Developer (Eng.version) 46

Page 47: Cimande 2.0 Quick Start   english version

To Ro

Creating Module Function :

1. Name : md_person

2. Description : Person

3. Thread Master Id : Master

4. Descriptor : person

4.6.3 Site

Site is used to create a site with the function to separate sites with each role that

has made

Creating Site :

1. Name : person_site

2. Description : Person Site

3. Workspace Type : tree

created by Meruvian Developer (Eng.version) 47

Page 48: Cimande 2.0 Quick Start   english version

To Ro

4.6.4 WF Role

WF Role is used to create a role with the function to differentiate the access

rights of each user who has been registered within the Cimande Framework

Creating Role Person :

1. Name : person

2. Description : Person

3. Workspace Type : tree

created by Meruvian Developer (Eng.version) 48

Page 49: Cimande 2.0 Quick Start   english version

To Ro

4.6.5 Role Manager

Role Manager is used to determine the site of the roles that has been made to

separate and sort out the menu are available for each different role

Creating Role Manager :

Log into the person module function that the located in the role manager, then

add the site with person_site by pressing view site → submit

created by Meruvian Developer (Eng.version) 49

Page 50: Cimande 2.0 Quick Start   english version

To Ro

created by Meruvian Developer (Eng.version) 50

Page 51: Cimande 2.0 Quick Start   english version

To Ro

4.6.6 Role Privilage

Role Manager is used to determined the menu provided for the role selected by

the module function that has been made

Creating Role Privilage :

Log into the person module function that the located in the role privilage, then add

md_person in the field module function by pressing view site → submit

created by Meruvian Developer (Eng.version) 51

Page 52: Cimande 2.0 Quick Start   english version

To Ro

4.6.7 Role Site Privilage

Role Site Privilage is used to determine or adding menu (Module Function) based

on the Role Privilage that has been made refer to the Site and appropriate with

the role

Creating Role Site Privilage :

Log into the person module function that the located in the role site privilage, then

add md_person in the field module function by pressing view site → submit

created by Meruvian Developer (Eng.version) 52

Page 53: Cimande 2.0 Quick Start   english version

To Ro

created by Meruvian Developer (Eng.version) 53

Page 54: Cimande 2.0 Quick Start   english version

To Ro

4.6.8 User Manager

User Manager is used to create user registration into Cimande Workspace

Creating User Manager :

1. Login : person

2. Password : person

3. Confirm Password : person

4. First Name : Person

5. Company : Blueoxygen Tech

6. Position : Manager

7. Workspace Type : tree

created by Meruvian Developer (Eng.version) 54

Page 55: Cimande 2.0 Quick Start   english version

To Ro

4.7 Result

Log out from the admin form, then login with the username : person, password : person

created by Meruvian Developer (Eng.version) 55

Page 56: Cimande 2.0 Quick Start   english version

To Ro

4.7.1 CREATE

Select the new menu to display someone's profile form

4.7.2 READ

If the save button is pressed, then the data already entered will be displayed

created by Meruvian Developer (Eng.version) 56

Page 57: Cimande 2.0 Quick Start   english version

To Ro

4.7.3 UPDATE

Select the search menu to display all the data ever entered. If you want to update

the data, click one of the data to be edited and automatically form will be moved to

create form

created by Meruvian Developer (Eng.version) 57