CHAPTER I CIMANDE 2.0 TOOLS

  Cimande 2.0 Quick Start Guide

  

CHAPTER I

CIMANDE 2.0 TOOLS

  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 Environment) to develop the software and can run on all platform (platform independent). There are several 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
• – 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 Build but more complex. 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.

  If using SVN the data in the repository can be copied to the client, so the user can

process the data locally that often called the "Checkout". Then after the local data is

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

our colleagues that usually called “Commit”

  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

  Cimande 2.0 Quick Start Guide

CHAPTER II TOOLS INSTALLATION

  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 , choose

   Eclipse Indigo for Linux 32 bit

  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 click on the Eclipse icon

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

  clicking the button Browse

2.1.6 Eclipse Indigo ready to use

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

  2.2.2 Click Available Sotware Sites link

  2.2.3 Click the Add button to display the Add Site dialog

  2.2.4 Insert the Name field with m2e updates , insert the Location field with the URL 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

  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

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

  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 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

2.3.6 View Install Details, then click Next

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

  2.3.8 Restart Eclipse

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

  2.4.2 Download the Apache Tomcat file .zip

  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

  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

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

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

  2.5.4 Default username : root, password : tulalit

  2.5.5 Create database by right click → create schema

  Cimande 2.0 Quick Start Guide

CHAPTER III Running Cimande Project

  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

  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 Catalog, select All Catalog and at the field Filter, type org.blueoxygen and automatically GroupId, ArtifactId and Version will appear → Next

3.1.5 Create a project package by filling Group Id and Artifact Id . Group Id to fill the

  There are two ways to generate Maven Archetype,using Eclipse or using Console. If using Console, open Console then go to the directory where you put Cimande project and type the code below mvn archetype:generate

  

package name and the Artifact Id to fill the project name. For example :

Group Id : org.blueoxygen Artifact Id : person

• DarchetypeGroupId=org.blueoxygen.cimande
• DarchetypeArtifactId=cimande-archetype-blank
• DarchetypeVersion=2.0
• DgroupId=org.mycompany
• DartifactId=myproject

  GroupId to give a package name (e.g : org.blueoxygen) and ArtifactId to give a project name (e.g : person)

  3.1.6 We need database configuration in the package src/main/resource → Hibernate.properties, change the database with the database that you created

  3.1.7 Right click Project → Run As → Maven Build to generate table schema. Insert field Goals with command hibernate3:hbm2ddl

  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

  Cimande 2.0 Quick Start Guide

CHAPTER IV CIMANDE 2.0 CRUD

  The Purpose

  1. Know and understand how to create Cimande project

  2. Implement CRUD in Cimande project Learning Material

4.1 Cimande 2.0 Overview

  Cimande is an MVC based application that use Velocity as the View or presentation

layer, Struts as the Controller and Hibernate as the Model. Integration between Struts and

Hibernate using Spring. Integration between Struts and Velocity using XWork. There are

several advantages of Cimande 2.0 than the previous version, such as : a. Maven Build Tool

  If the previous version using Ant as the Build Tool, but now Cimande 2.0 using Maven. It also remove the impression that Cimande less friendly with another IDE except Eclipse

  IDE. So the developers who will develop application on Cimande can choose to use the

  IDE as desired

  b. Archetype

Archetype is a template to create Cimande project. The developers who will develop only

generate an Archetype to create a workspace that ready to use c. REST

  REST (Representational State Transfer) is an approach for getting information content from a Web site by reading a designated Web page that contains an XML (Extensible Markup Language) file that describes and includes the desired content. With the REST feature, Cimande 2.0 provide several layers of presentation (multiple presentation) that support output in addition to html, such as JSON and XML.

  d. Multiple Datasource Cimande 2.0 not only take datasource from database. For example Content Management with CMIS and Wrokflow with Joget e. Security Interceptor (Debus)

  Security Interceptor is a improvement of security gap from the previous version

  f. Social Networking Cimande 2.0 support connection to several social networking like Facebook and Twitter

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 contain the entity class that used as a link between framework with the database. Creating table and all the variables that will be displayed in the database declared here
• Package org.blueoxygen.dao Data Access Object (DAO) is an object that provide 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 used to simplify the large code like a library. We can use the Service to classify some of the DAO in a database transaction
• Package org.blueoxygen.controller Controller is a layer that works to set the "inter-layer" . This Layer is responsible for application execution

4.3 Creating Java Class

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 extends

  Person 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) {

  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 *

• /

  @Repository public class extends

  PersonDao HibernatePersistenceDaoManager<Person> {

  public void

  savePerson(Person person) {

  if (person == null ) return

  ;

  if null

  (person.getId() == ) { 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 int

  limit, 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();

  new

  LogInformation logInformation = LogInformation(); logInformation.setCreateBy(user.getId()); logInformation.setCreateDate(getCurretTime()); logInformation.setLastUpdateBy(user.getId()); logInformation.setLastUpdateDate(getCurretTime()); person.setId( null ); person.setLogInformation(logInformation); persist(person);

  } }

  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);

  int int

  List<Person> getPersonList(String fname, String lname, limit, 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 true

  @Transactional (readOnly = ) public class implements

  PersonServiceImpl PersonService {

  @Autowired private

  PersonDao personDao ;

  @Transactional public void

  savePerson(Person person) {

  personDao .savePerson(person);

  }

  @Transactional public void

  deletePerson(Person person) {

  personDao .remove(person);

  }

  public

  Person getPersonById(String id) {

  return personDao .getById(Person. class , id);

  }

  public long

  getPersonCount(String fname, String lname) {

  return personDao .getPersonCountByCriteria(fname, lname);

  }

  @Override public int

  List<Person> getPersonList(String fname, String lname, 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 extends

  PersonController CimandeModuleAction {

  @Autowired private PersonService personService ; private new

  Person person = Person();

  private int limit = 0; private int page = 0; new

  SimpleDateFormat df = 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" , true

  trim = ),

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

  trim = ) })

  public String personPost() { try

  {

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

  } (ParseException e) {

  // TODO Auto-generated catch block

  e.printStackTrace(); }

  personService .savePerson( person ); return

  SUCCESS ;

  }

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

  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/filter public

  String filter() {

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

  "rows" ).toString()); null new page = model .get( "page" ) == ? 0 : 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 int

  count = ( ) 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 ;

  } }

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" > function

  $(document).ready( (){ $( "#tanggal" ).datepicker({

  true

  showOn: "both" , buttonImage: "images/calendar.png" , buttonImageOnly: , nextText: "" ,

  true true

  prevText: "" , changeMonth: , changeYear: , 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 >

  #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" > function

  $(document).ready( (){

  true

  $( "#tanggal" ).datepicker({showOn: "both" , buttonImage: "images/calendar.png" , buttonImageOnly: ,

  

true true

  nextText: "" , prevText: "" , changeMonth: , changeYear: , 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 colspan = "2" align = "right" > < input type = "submit" value = "Save" >

  

< 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 >

  < 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 >

  </ 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 >

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

  < html > < head >

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

  < input type = "hidden" name = "person.id" value = "$!person.id" /> </ td > </ tr > </ table >

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

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

  </ tr > < tr >

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

  </ tr > < tr >

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

  </ tr > < tr >

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

  </ tr > < tr >

  </ 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 >

4.4.3 Create view person-list.vm

  </ tr >

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

  }); });

  return false ;

  });

  () { alert( 'error' ); }

  function

  ); }, error :

  true

  (data) { window.location.reload(

  function

  ).attr( 'href' ), success :

  this

  (

  function

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

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

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

  #end

  < a href = "$!page" > Next </ a >

  #end #if($page != $totalpage) #set($page = $page + 1)

  

< a href = "$!page" > Previous </ a >

  #set($totalpage = $totalpage + 1) #end #if($page != 1) #set($page = $page - 1)

  #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)

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

  #end

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

  < 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 >

  </ script > </ body > </ html >

4.5 Creating Data Flow Application

4.5.1 Hibernate Mapping

  Hibernate is a device for easier access into database. Hibernate handles the database connection from Java application to the database server. Hibernate create an automatic table in the database, so all the existing Entity must be incorporated into the Hibernate configuration file Mapping Entity clas in the package 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