CHAPTER I CIMANDE 2.0 TOOLS

(1)

Cimande 2.0 Quick Start Guide

CHAPTER I

(2)

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 :

(3)

– 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

(4)

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

(5)

Cimande 2.0 Quick Start Guide

CHAPTER II

(6)

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

(7)

2.1.2 Download that link at Eclipse downloads – mirror selection

2.1.3 Save file in any directory

(8)

2.1.5 Eclipse Indigo will appear and select where you put Eclipse metadata by double clicking the button Browse

(9)

(10)

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

(11)

2.2.2 Click Available Sotware Sites link

(12)

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

(13)

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

(14)

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

(15)

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

(16)

2.3.6 View Install Details, then click Next

(17)

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

(18)

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

(19)

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

(20)

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

(21)

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

(22)

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

(23)

2.5.4 Default username : root, password : tulalit

(24)

Cimande 2.0 Quick Start Guide

CHAPTER III

Running Cimande Project

(25)

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

(26)

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

(27)

3.1.5 Create a project package by filling Group Id and Artifact Id . Group Id to fill the package name and the Artifact Id to fill the project name. For example :

Group Id : org.blueoxygen Artifact Id : person

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

-DarchetypeGroupId=org.blueoxygen.cimande

-DarchetypeArtifactId=cimande-archetype-blank

-DarchetypeVersion=2.0

-DgroupId=org.mycompany

-DartifactId=myproject

(28)

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

(29)

(30)

3.1.10 Open web browser then type URL localhost:8080/cimande. Login as admin with the username : admin, password : blueoxygen

(31)

Cimande 2.0 Quick Start Guide

CHAPTER IV

(32)

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.

(33)

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

(34)

• 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

(35)

4.3 Creating Java Class

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

package org.blueoxygen.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() {

(36)

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;

(37)

@Repository

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

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

(38)

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

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;

@Transactional(readOnly = true)

public class PersonServiceImpl implements 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); }

(39)

public long getPersonCount(String fname, String lname) {

return personDao.getPersonCountByCriteria(fname, lname); }

@Override

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

public class PersonController extends CimandeModuleAction {

@Autowired

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

e.printStackTrace(); }

(40)

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 {

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

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

}

(41)

4.4 Creating View

4.4.1 Create view person-create.vm

showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true, nextText: "", prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy"

});

<tr>

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

<tr>

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

<tr>

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

<tr>

<td><label for="person.address" class="label">Address </label></td>

(42)

<tr>

4.4.2 Create view person-grid-list.vm

$("#tanggal").datepicker({showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true, nextText: "", prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy"});

});

<tr>

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

<tr>

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

<tr>

(43)

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

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

4.4.3 Create view person-list.vm

<html>

<head>

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

</head> <body>

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

(44)

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

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

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

type : 'DELETE',

url : '#surl("value=/module/person/edit/")' + $ (this).attr('href'),

success : function(data) {

window.location.reload(true);

(45)

4.5 Creating Data Flow Application

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

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

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

/module/template/person/person-grid-list.vm </result>

</action>

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

(46)

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

(47)

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

(48)

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

(49)

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

(50)

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

(51)

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 :

(52)

(53)

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 :

(54)

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_personin the field module function by pressing view site → submit

(55)

(56)

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

(57)

4.7 Cimande CRUD

(58)

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

(59)

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

4.8 Social Network Connection

(60)

4.8.1 Facebook Connection

When Facebook icon is clicked, you will be connected with Facebook that ask for

Request for Permission. And the Request Success form will appear when you

press the Allow button

(61)

(62)

4.8.2 Twitter Connection

When Twitter icon is clicked, you will be connected with Twitter that ask for

Request for Permission. And the Request Success form will appear when you

press the Authorize app button