Well I’m sorry, it’s been so long for this part to come.. I had been working very hard on some clients and don’t have enough time to write. Here’s what I had been done if you’re curious :) : http://maps.GpsTrackingIndonesia.com, www.SunberryCorp.com, www.mypushme.com, www.kulacak.com, www.web2trace.com, www.pushmeportal.com, … The fun is almost all of them was written with CodeIgniter :).

Ok, let’s start with the easiest one first. We will create a simple menu page that contains links to other modules on the system. We put it on the Mainpage controller class.

Look at the Mainpage.php controller file. There is a function on it named exactly the same with the filename: Mainpage(). This should be exactly the same including the case. This is the constructor or initialization function of the class. Each time the class is called or instantiate, this function is called automatically. We put some initialization lines inside it:

The line parent::Controller() calls the constructor function of this class’s parent constructor which is the CodeIgniter’s Controller class so that it has all the properties and method of it’s parent.

Then, we load a helper library that contains helper functions related to URL handling such as site_url() to return the site’s URL that we are working on. Other functions on this helper are: anchor(), base_url(), uri_string(), etc. You can check it all on the user guide http://localhost/user_guide/helpers/url_helper.html.

Again, look at the Mainpage.php file. We added a new function called index(). This function is analogous to the index.html file in static web page. It’s called by default when we point our browser to the Mainpage controller, ie: http://localhost/index.php/Mainpage.

On the function, we load view files. Here we divide the view into 3 pieces: header, main_menu, and footer. They are basically just regular PHP files dealing with display templates. This will make us easier to manage the look of our application later.

All of the view files should be located under system/application/views folder on CodeIgniter file structure. So we need to create all of them:

The header.php view file, contains the opening HTML tags, HEAD, TITLE and start of BODY. Later we can add CSS link definition here:

The footer.php view file, just a closing BODY and HTML tag, but you can later add your copyright notice, timestamps, etc:  

</body>
</html>

And the main_menu.php view file. Here we write a list of links to modules that we are going to develop later:

As we can see above, we call a helper function anchor(). This function will create a standard HTML anchor link based on your local site URL. So for example, if we call it achor(“Mainpage/trialBalance”, “Trial Balance”) then it will return this string:

<a href=”http://localhost/Mainpage/trialBalance”> Trial Balance </a>

assumed that you have configured your site URL as http://localhost/ on the config.php file.

Now we can run our application by pointing the browser to http://localhost and it should return something like the following:

Congratulation!

Next we will begin to code the COA module.

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.

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:

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.

Table cashbook_detail

This is the detail records of table cashbook.

Table bankbook

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

Table bankbook_detail

This is the detail records of table bankbook.

Table coa

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

Table coatype

This table store the COA type

Table journal

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

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.

The Finished ER Diagram

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.

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:

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.

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.

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.

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.

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.

Cashbook

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

Journal

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

Coa

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

Mainpage

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

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.

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 Mainpage
• Part 6 Coding, the and COA Module explain the application coding using CodeIgniter
• Part 8 Coding, the Cashbook 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.