CODE IGNITER + STARUML

(http://www.dijexi.com/2009/07/codeigniter-tutorial-creating-accounting-application-part-1-setting-up-the-
environment/)

[Creating Accounting Application]

Part 1 Setting Up the Environment

This tutorial series explain how to develop a web based application using CodeIgniter, the PHP
application framework. As you might already know, CodeIgniter is a powerful PHP framework with a
very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-
featured web applications.

In this tutorial, we took the case of developing a basic web based accounting application that can
input cash book and bank book data transaction and journal entry.

The tutorial series will cover:

• Part 1 Setting Up the Environment: XAMPP (apache, mysql, and PHP) and CodeIgniter
• Part 2 The application specification, analysis and design using UML use case and class
diagram using free UML diagram tool StarUML.. (download here if you have not install it in
your computer) . We also need to install StarUML PHP 5 Code Generator Template to
automatically generate the class files from class diagram created
• Part 3 ER Diagram and Creating Database using MySQL workbench, formerly fabForce ERD
tools for MySQL
• Part 4, preparing to code in CodeIgniter, exporting class diagram to PHP scripts
• Part 5 Coding, the Cashbook Module explain the application coding using CodeIgniter
• Part 6 Coding, the Mainpage and COA Module explain the application coding using
CodeIgniter
• Part 7 Coding, the Bankbook Module explain the application coding using CodeIgniter
• Part 8 Coding, the Journal Module explain the application coding using CodeIgniter
• Part 9 Coding, the Reporting Module explain the application coding using CodeIgniter
• Part 10 Conslusion and Further Development: AJAX, Facebook Application

Part 1 Setting Up The Environment

Installing XAMPP
Click here for detailed instruction on how to install XAMPP. Make sure that you can access the web
server installed in XAMPP by entering the URL http://localhost. If you did, a page will appear
showing that the XAMPP was installed successfully. Try clicking on the phpinfo() link to make sure
that PHP installation was also successful. Try also the CD Collection Demos to make sure that MySQL
installed correctly. If something was not right, go back to the installation article and make sure that
the server configuration was correct.
Installing CodeIgniter
Installing CodeIgniter Framework is simply easy. After you downloaded the last version package from
CodeIgniter website, extract the package file to your XAMPP document root, defaulted in
c:\xampp\htdocs. It’s better that you rename the folder CodeIgniter_1.7.1 to reflect our application
name, for example: acct.

After extracting the file and renaming the folder to acct, your folder structure will look like this:

You could test the CodeIgniter framework now to make sure that it’s already up. Enter the URL
http://localhost/acct at your browser, then you should see something like this:

Congratulation! You have done the first step of creating our web based Accounting Application. You
could now continue to the next step about the application specification we are going to develop,
and the design and analysis using UML diagram.
But, before continuing to the next step, I suggest you to check out the CodeIgniter User Manual
which is already located on your server at http://<yourserver>/acct/user_guide.

[Creating Accounting Application]

Part 2 The Application Specification and UML Diagrams

In this part of the tutorial series we will discuss about the application specification. After defining
the user requirements we will do the analysis and designing the using UML use cases and class
diagram. We are going to use a free UML diagramming tool called StarUML. You can download the
program here if you have not installed it in your computer.

User Requirements
Listed here is our web based accounting application user requirement and specification:
• application must be web based, accessible anywhere from the internet
• multi-users, with data entry, supervisor, manager, and administrator user group
• user must provide their correct user id and password to access the system
• data-entry user group can input cashbook and bankbook transaction as well as any journal
entry transaction beside the cash and bank book transaction
• supervisor user group can manage the transaction, for example to correct, edit, and delete
transaction previously entered by the data entry user
• data entry user group can do a posting process in order that the system can generate balance
sheet, profit and loss report automatically
• data entry, supervisor and manager user group can view the daily, monthly, and yearly
transaction report, as well as balance sheet, profit and loss report
• administrator user group can manage user data (add, delete, and modify), and reset it’s
password

Use Case
Based on the user requirement, we draw a use case diagram as follow:

As you can see on the Use Case diagram here is the actor and use case matrix table:
Actor Data Entry Supervisor Manager Administrator
Use Case
Manage Cashbook Transaction - o - -
Manage Bankbook Transaction - o - -
Manage Journal Transaction - o - -
Manage Chart of Account - o - -
View Cashbook Transaction Report o o o -
View Bankbook Transaction Report o o o -
View Journal Transaction Report o o o -
Enter Cashbook Transaction o - - -
Enter Bankbook Transaction o - - -
Enter Journal Transaction o - - -
Posting o - - -
Manage Users - - o

You may download the StarUML diagram file here.

Model Class Diagram

Based on the user requirement and use case diagram above, we then draw a class diagram. We split
the class diagram into Model Class Diagram and Controller Class Diagram as we are going to use MVC
(model-view-controller) design pattern for the application.

The Model Class Diagram is as follow:

Bankbook_model
This model class represents the database access and data processing of the bankbook document
data to be used by it’s controller class.

Method Description
get() Get one record of Bankbook document
getAll() Get all record of Bankbook document
addNew() Add one new record
addDetails() Add one new detail record
getDetails() Get all details record of a Bankbook document
sumTotal() Summarize total amount based on the details record
getNewNumber() Get a new document number after the last document number
delete() Delete one record of Bankbook document
posting() Do the posting process to generate accounting journal entry of
Bankbook document
update() Update one record of Bankbook document
deleteDetails() Delete detail record of a Bankbook document
updateDetails() Update detail record of Bankbook document

Cashbook_model
This model class represents the database access and data processing of the cashbook document data
to be used by it’s controller class.

Method Description
get() Get one record of Journal document
getAll() Get all record of Journal document
addNew() Add one new record
addDetails() Add one new detail record
getDetails() Get all details record of a Journal document
sumTotal() Summarize total amount based on the details record
getNewNumber() Get a new document number after the last document number
delete() Delete one record of Journal document
posting() Do the posting process to generate accounting journal entry of Journal
document
update() Update one record of Journal document
deleteDetails() Delete detail record of a Journal document
updateDetails() Update detail record of Journal document

Journal_model
This model class represents the database access and data processing of the journal document data
to be used by it’s controller class

Method Description
get() Get one record of Cashbook document
getAll() Get all record of Cashbook document
addNew() Add one new record
addDetails() Add one new detail record
getDetails() Get all details record of a Cashbook document
sumTotal() Summarize total amount based on the details record
getNewNumber() Get a new document number after the last document number
delete() Delete one record of Cashbook document
posting() Do the posting process to generate accounting journal entry of
Cashbook document
update() Update one record of Cashbook document
deleteDetails() Delete detail record of a Cashbook document
updateDetails() Update detail record of Cashbook document

Coa_model
This model class represents the database access and data processing of the chart of account data to
be used by it’s controller class.

Method Description
addNew() Add one new record
addChild() Add one new child record of a COA record
get() Get one record of COA record
getAll() Get all record
findByNameOrCode() Find COAs based on keyword of code or name
getByCode() Find COA based on it’s code
getTrialBalance() Returns records of trial balance report
getBalanceSheet() Returns records of balance sheet
getProfilLoss() Returns records of profit and loss statement
delete() Delete one record of COA
update() Update one record of COA

Controller Class Diagram

And here is the Controller Class Diagram:

Bankbook
This class represents the controller of bankbook document. It’s the class that users will access
directly through browser user interface.

Method Description
Bankbook() The class constructor where the class initialization will be put
index() The index page of the controller class
addNew() Add new bankbook record interface, will call addNew() method on it’s
model class
editForm() Show an edit form for user to edit the data
save() Save data from the edit form, will call update() method on it’s model class
delete() Delete data, will call delete() method on it’s model class
viewReport() Show the list of currently available bankbook documents
addDetail() Add new detail record to the currently edited bankbook document, will call
addDetails() method on it’s model class

Cashbook
This class represents the controller of cashbook document. It’s the class that users will access
directly through browser user interface.
Method Description
Cashbook() The class constructor where the class initialization will be put
index() The index page of the controller class
addNew() Add new cashbook record interface, will call addNew() method on it’s
model class
editForm() Show an edit form for user to edit the data
save() Save data from the edit form, will call update() method on it’s model
class
delete() Delete data, will call delete() method on it’s model class
viewReport() Show the list of currently available cashbook documents
addDetail() Add new detail record to the currently edited cashbook document, will
call addDetails() method on it’s model class

Journal
This class represents the controller of journal document. It’s the class that users will access directly
through browser user interface.

Method Description
Journal() The class constructor where the class initialization will be put
index() The index page of the controller class
addNew() Add new journal record interface, will call addNew() method on it’s
model class
editForm() Show an edit form for user to edit the data
save() Save data from the edit form, will call update() method on it’s model
class
delete() Delete data, will call delete() method on it’s model class
viewReport() Show the list of currently available journal documents
addDetail() Add new detail record to the currently edited journal document, will call
addDetails() method on it’s model class

Coa
This class represents the controller of bankbook document. It’s the class that users will access
directly through browser user interface.

Method Description
Coa() The class constructor where the class initialization will be put
index() The index page of the controller class
addNew() Add new COA record interface, will call addNew() method on it’s model
class
editForm() Show an edit form for user to edit the data
save() Save data from the edit form, will call update() method on it’s model
class
delete() Delete data, will call delete() method on it’s model class
listCoa() Show the list of currently available COA
Mainpage
This class represents the controller of bankbook document. It’s the class that users will access
directly through browser user interface.

Method Description
Mainpage() The class constructor where the class initialization will be put
index() The index page of the controller class
doPosting() Do the posting process for bankbook, cashbook, and journal
balanceSheet() Show balance sheet report, calling the getBalanceSheet() method from
Coa_model class
profitLoss() Show profit and loss report, calling the getProfitLoss() method from
Coa_model class
trialBalance() Show trial balance report, calling the getTrialBalance() method from
Coa_model class

You may download the StarUML diagram file here.

In the next part of the article we are going to discuss the Entity Relationship Diagram (ERD) to
design the database structure that will hold the data for our application.

[Creating Accounting Application]

Part 3 ER Diagram and Creating Database

In the previous parts of this tutorial series we have discussed how to setup the application
environment using XAMPP and CodeIgniter, and the application specification. We have done the
analysis and design using UML use case and class diagram with free UML diagram tool StarUML.
In this part, we will discuss the database design for our application. This database is needed to hold
the data for our application.

We are going to draw the entity relationship diagram (ERD) using a free tool called MySQL
workbench, formerly fabForce ERD tools for MySQL. Before continuing, please download the
program here and install it to your computer.

At the end of the designing process, we will create our database structure directly to a MySQL
server that can be used by our application.

The Tables
For the purpose of our application requirements and based on UML use case we defined before, here
is a list of mandatory tables that we must create on the application’s database.

Table name Purpose

coatype store chart of account type data like assets, liability, equity, income,
and cost
coa store the actual chart of account data, should be multi level depth
cashbook store the master cashbook document data
cashbook_detail store the details cashbook document data
bankbook store the master bankbook document data
bankbook_detail store the details bankbook document data
journal store the posted and unposted journal data for the purpose of
accounting report generating process like balance sheet, income
statement, and trial balance

Creating Tables in MySQL Workbench

Installing MySQL Workbench should not be a problem. I assumed that you already have done that.
Now, run the program and you will see a blank workspace of MySQL model like this:

Click on Add Diagram icon to create our first diagram. You will see a blank page for drawing our
diagram like this:

Creating A New Table and Adding Fields

Next, we need to draw a table. Click on the “Place a New

Table” located on the left side of the blank diagram. Then
place it on the middle of the blank page. After placing the
table, you may resize it’s size so that we can see a tall
rectangular like this:
Double click on the table to add it’s columns. You will see a new pane at the bottom of the page
consisting the table properties like this:

On the pane, there’s a lot of tab on it’s bottom part. Click the “Table” where we can give our new
table a name. Create our first table called “cashbook”.

Next we need to define the table columns. Click on the “Columns” tab. You will see the following:
As you can see, the program automatically add a column called “idcashbook” which you can rename
it. This column should be the table’s primary key, so we check on the NN (means not null), AI (auto
increment), and Flags PRIMARY KEY. When we set it up, then the icon left to the column name will
change to a yellow key icon.

Next, we need to add more column. To do that, double click the empty row below the first column.
Enter “trxdate” as the column name and DATETIME as the type. Your table property should be like
the following:

Repeat the step of adding new field for the following new fields:

Field Name Type

vounumber VARCHAR(45)
doctype VARCHAR(45)
amount DECIMAL(20,2)
notes VARCHAR(100)
posted INT

Creating Other Tables

Here is a list of tables with it’s description that we need to create for our application. Repeat the
above steps to create every table listed below.

Table cashbook (should have been created before)

This is the master table of cashbook document. It has it’s detail records in cashbook_details table.

Field Name Type Description

idcashbook INT (NOT NULL AI PK) the table’s primary key, not null auto
increment integer value
vounumber VARCHAR(45) the cashbook document number
doctype VARCHAR(45) the document type (cash out or receive)
amount DECIMAL(20,2) the document amount
notes VARCHAR(100) additional notes
posted INT whether this document is posted (1) or not (0)

Table cashbook_detail
This is the detail records of table cashbook.

Field Name Type Description

idcashbookdetail INT (NOT NULL AI PK) the table’s primary key, not null, auto
increment integer value
description VARCHAR(100) transaction description
amount DECIMAL(20,2) transaction amount
cashbook_idcashbook INT NOT NULL (FK) foreign key to cashbook table

Table bankbook
This is the master table of bankbook document. It has it’s detail records in bankbook_details table.

Field Name Type Description

idbankbook INT (NOT NULL AI PK) the table’s primary key, not null auto
increment integer value
vounumber VARCHAR(45) the bankbook document number
doctype VARCHAR(45) the document type (bank out or receive)
amount DECIMAL(20,2) the document amount
notes VARCHAR(100) additional notes
posted INT whether this document is posted (1) or not (0)
coa_idcoa INT NOT NULL (FK) foreign key to coa table

Table bankbook_detail
This is the detail records of table bankbook.

Field Name Type Description

idcashbookdetail INT (NOT NULL AI PK) the table’s primary key, not null, auto
increment integer value
description VARCHAR(100) transaction description
amount DECIMAL(20,2) transaction amount
cashbook_idcashbook INT (FK) foreign key to cashbook table
coa_idcoa INT NOT NULL (FK) foreign key to coa table

Table coa
This table store the chart of account data. It will be referenced by cashbook_detail,
bankbook_detail, and journal table.

Field Name Type Description

idcoa INT (NOT NULL AI PK) the table’s primary key, not null, auto
increment integer value
description VARCHAR(100) the account description
code VARCHAR(45) the account code
begin_balance DECIMAL(20,2) beginning balance of the account
isheader INT whether this account is a header account(1) or
a detail account(0)
idparent INT link to other account to identify it’s parent in
chart of account structure
link VARCHAR(45) link to usage information of this account, for
example “cash” or “bank” account
coatype_idcoatype INT NOT NULL (FK) foreign key to coatype table to identify what
kind of account is this
Table coatype
This table store the COA type

Name Type Description

idcoatype INT (NOT NULL AI PK) the table’s primary key, not null, auto
increment integer value
code VARCHAR(45) the account type code
description VARCHAR(100) the account type description

Table journal
This table store journal transactions generated by cashbook and bankbook transaction after being
posted and manual journal transaction entered manually.

Name Type Description

idjournal INT (NOT NULL AI PK) the table’s primary key, not null, auto
increment integer value
trxdate DATETIME transaction date
vounumber VARCHAR(45) the transaction document number
amount_db DECIMAL(20,2) debit amount
amount_cr DECIMAL(20,2) credit amount
description VARCHAR(100) transaction description
posted INT whether this transaction is posted (1) or not
(0)

Creating Relationships
To create a relationship between two table in MySQL Workbench, simply click on the “Place a
Relationship Using Existing Column” icon on the left side of the diagram. Then:
1. set the FOREIGN KEY column on the referencing table, and
2. set the PRIMARY KEY column on the referenced table

For example, to create a relationship between cashbook (the referenced table) and cashbook_detail
(the referencing table):
1. Click “Place a Relationship Using Existing Column” icon

2. click cashbook_idcashbook column on the cashbook_detail table and click “Pick Referenced
Column” button
3. click idcashbook column on the cashbook table

A relationship line will be drawn between those two tables.

After you have created all the tables and relations as specified above, here is the completed ER
diagram will looks like:

And here is the diagram MWB file for you to download.

Creating the Database into MySQL Server

After finishing the design of the ERD we need to create the database structure directly into MySQL
server. To do this first we need to define the database server connection. Click on the menu
Database – Manage Connections… You will see a dialog like this:
Click on New button and enter the Connection Name for example localhost, the Database System of
MySQL, and the Driver of MySQL Native Driver. On the Parameters pane, enter your hostname or IP
address on the Hostname field, Port number which is default to 3306, the Username and Password
which match to your MySQL server configuration.

You may optionally click on Test Connection to make sure that the connection to the database
server was successful. Click Close button.

To generate the database structure first we need to define the database name to be created. Click
on the MySQL Model tab on the main page of MySQL Workbench. Then double click on mydb tab
under Physical Schemata section. Look under the mydb property pane. Change the Name to the
database name to be created, for example acctdb.
Don’t forget to click on Save Current Model icon to save our diagram.

Next, click on the menu Database – Forward Engineer.. to begin creating the database structure. A
dialog box will appear:
Click Run Validations to make sure that the table definitions and relationship in our diagram was all
correct. Then click on Next button. The next dialog box will appear:

On that dialog, you specify the options for creating the database. The first options is to drop
objects before each CREATE Object, and the second is to generate separate CREATE INDEX
statements. Then click on Next button. The next dialog box will appear:
This time we select which objects in our diagram that will be generated on the MySQL database.
Select all tables. Then click on Next button. The next dialog box will appear:

Here we can review the SQL statements to be executed to the MySQL Server. As you can see, the
SQL statement was generated based on the diagram that was created before in the design. This
including the database, tables, fields, index, and the relations between the tables. Then click on
Next button. The next dialog box will appear:
Here we must choose the database connection that we have defined before. If there’s a change on
the hostname, username and password, you still can do it here by modifying it on the appropriate
field. Then click on Execute button to execute the SQL statement on the server. The next dialog box
will appear:

The execution is now complete. It means that the database is created on the server with the tables
and relations as defined in our diagram. You may check that on any MySQL front end program like
phpMyAdmin, Navicat MySQL, and any other programs. Here is the snapshot of the database
structure as viewed with Navicat MySQL program:
In this part, we have discussed the database design for our application. We have drawn the entity
relationship diagram (ERD) using a free tool called MySQL workbench. Also we have created our
database structure directly to a MySQL server that can be used by our application. You may
download the diagram MWB file here.
In the next article, we are ready to begin the coding of the application.

CodeIgniter Tutorial: [Creating Accounting Application] Part 4 Preparing to Code

Generate PHP Code

After installing StarUML PHP 5 Code Generator Template , StarUML will have a capability to generate
PHP template code based on the models we have defined before. But there’s a little hack to be
done so that the naming of the file generated complies with CodeIgniter.

These PHP template code files can be used to simplify our jobs by not typing all class’ attributes
and methods that we have done in the UML design and analysis phase.

Now open and edit the template file for PHP 5 code generation, located at “C:\Program
Files\StarUML\modules\staruml-generator\templates\PHP 5 Code Generator\template.cot”. Locate
at around line 327:
fileBegin(getTarget()+"\\"+current().Name+".class.php");

remove the .class extension and change it to

fileBegin(getTarget()+"\\"+current().Name+".php");

Save the file. After editing the above line, PHP template file generated will have .php extension and
not .class.php extension which is not suitable to be copied to CodeIgniter file structure.

Next we will generate the PHP template code. Open the UML diagram file. Click on “Tools – StarUML
Generator..” menu.
A new dialog will be shown where we can choose a template for code generation.

On the dialog, choose PHP 5 Code Generator. Click Next. A new dialog will be shown where we can
choose the destination folder to save the generated files.
On the dialog, choose any folder you wish. Then click Next. A new dialog will be shown showing that
the generation process is ready to run.

Click on Generate button to start the generation process. Wait a moment until the process is
finished. When it was finished, we will have some PHP files that each related to our model and
controller class diagram before.

After generating both model and controller template files, we can see them on the destination
folder specified before, for example, mine is on “c:\temp” folder.

Next, we need to move or copy all model files to CodeIgniter “models” folder and all controller
classes to CodeIgniter “controllers” folder. If you followed the instruction exactly as in this tutorial,
the it would be at “C:\xampp\htdocs\acct\system\application” folder where you could find “models”
and “controllers” folder inside.

Let’s take a look for the generated PHP template file for a model, for example
Bankbook_model.php file:
<?php
class Bankbook_model extends Model {

public $idbankbook;

public function get() {

return;
}

public function getAll() {

return;
}

public function addNew() {

return;
 }

public function addDetails() {

return;
}

public function getDetails() {

return;
}

public function sumTotal() {

return;
}

public function getNewNumber() {

return;
}

public function delete() {

return;
}

public function posting() {

return;
}

public function update() {

return;
}

public function deleteDetails() {

return;
}

public function updateDetails() {

return;
}
}
?>

As you can see, we already have a template for our CodeIgniter model that’s ready for us to code
the scripts logic inside. It has all the attributes and methods exactly the same as we designed in the
UML diagram.
As in the model class’ template, we could also see the controller class’ template. Let’s take a look
at the Bankbook.php file for example which is for Bankbook controller class.
<?php

class Bankbook extends Controller {

public function Bankbook() {

return;
}

public function index() {

return;
}

public function addNew() {

return;
}

public function editForm() {

return;
}

public function save() {

return;
}

public function delete() {

return;
}

public function viewReport() {

return;
}

public function addDetail() {

return;
}
}
?>

Again we can see that we already have all attributes and methods exactly the same as defined in
the UML diagram.}

Edit config.php
Next, we need to edit our CodeIgniter configuration file to suit our application environment. Open
and edit the file “system/application/config/config.php” and locate the line of:
$config[‘base_url’] = "http://example.com/";

Change and modify the content of base_url configuration to your own server name, for example
http://localhost/ . Don’t forget to put a trailing forward slash (/) on it. This will be the reference
of other CodeIgniter’s class for your server base URL, ie. for calling other web resources on your
application like other controller, images, JavaScript files, CSS, etc.

Edit database.php

Next, we need to configure our database connectivity parameters to be used by the application.
Open and edit the file “system/application/config/database.php” and locate these lines and adjust
the parameters to suit your own MySQL database settings:
$db[‘default’][‘hostname’] = "localhost";
$db[‘default’][‘username’] = "root";
$db[‘default’][‘password’] = "";
$db[‘default’][‘database’] = "acctdb";
$db[‘default’][‘dbdriver’] = "mysql";

Edit routes.php

Next, we need to configure the default controller for our application. By default, this controller is
called “welcome” and we can find the corresponding controller class file in
“system/application/controller/welcome.php”. We need to change it to our main page called
“Mainpage.php”.

Open and edit the file “system/application/config/routes.php” and change the default_controller
parameter like this.
$route[‘default_controller’] = "Mainpage";

At this point you should be able to access your controller class from browser even though it still do
nothing but a blank page.
In this case, a blank page is all right, because we have not defined anything inside the controller
methods (index() method in this case). Compare this to access an undefined controller class, for
example ‘bank’ controller, that will result a Page not Found error message like this:

Try to access other controller classes like cashbook, coa, mainpage, etc. All of them should return a
blank page and not any error messages.

In the next step, we will start to code the logics inside each controller and model classes’ methods
based on the specification and user requirement.
Technorati Tags: CodeIgniter Tutorial,Accounting Application,Cashbook Module