How To Show Data From Database Using PHP CodeIgniter + AngularJS

Hi.. this time I created simple web to show some data from database using PHP CodeIgniter and angularJS. Here is the screenshot of the result page:

page-result

I use MySQL as my db. Here is the table that I’ll use for sample:

books-tbl

First of all, I added some angular javascript files to my js folder. Since I use bootstrap for my csss,I added some bootstrap css too to my css folder. Now we ready for codes 🙂

Model
For books_model, I created function to get all books in getAllBooks() function. Continue reading “How To Show Data From Database Using PHP CodeIgniter + AngularJS”

Advertisements

How To Show Data From Database Using SpringMVC + Hibernate + AngularJS

Hi.. in this article I will create simple web app using SpringMVC + Hibernate + AngularJS to show data from database. Some environment that I need are:

  1. SpringMVC libs.
  2. Hibernate libs.
  3. AngularJS.
  4. Another required libs like database connector, aopalliance, apache common.
  5. IDE. This time, I use netbeans.

I use mySQL as my database. The data that I want to show is from User table and has some data like this:

db

After create project that use SpringMVC and Hibernate framework, I setup application context, dispatcher servlet, and web.xml Continue reading “How To Show Data From Database Using SpringMVC + Hibernate + AngularJS”

How To Create CheckedAll Function Based On AngularJS Model

In this case I want to create select all method using angular model. I have list of object and show it on my jsp on table. Here is snap of my jsp code.

<div ng-controller="historyController">
	<div style="margin-bottom: 10px;vertical-align: middle">
		<input ng-click="selectAllAct()" type="checkbox" /> &nbsp;Select All Transactions
	</div>
	<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="exampleone">
		<thead>
			<tr>
				<th width="10%">Transaction Time</th>
				<th width="10%">Debit</th>
				<th width="10%">Credit</th>
				<th width="10%">Description</th>
				<th width="5%">Action</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="trx in $parent.trxListFilter = (hisTrxList|filter:trxFilter) | startFrom:$parent.currentPage * $parent.dataPerPage | limitTo:$parent.dataPerPage | orderBy: trxTime" repeat-done="numberOfPages()">
				<td width="10%">{{trx.trxTime| date: "dd MMMM yyyy HH:mm:ss"}}</td>
				<td width="10%">{{trx.dbAmount| currency:"Rp "}}</td>
				<td width="10%">{{trx.crAmount| currency:"Rp "}}</td>
				<td width="10%">{{trx.txDesc}}</td>
				<td width="5%"><input type="checkbox" class="checkbox" ng-model="trx.isProcess" ng-true-value="T" ng-false-value="F"/></td>
			</tr>
		</tbody>
	</table>
</div>

Here is my javascript code.

showApp.controller('historyController', ['$scope', '$http', 'localStorageService', function($scope, $http, localStorageService) {
        $scope.hisTrxList = null;
        $scope.selectAll = false;

        $scope.getHistoryList = function() {
            //some method to get list of history trx
        };

        $scope.selectAllAct = function() {
            $scope.selectAll = !$scope.selectAll;
            console.log($scope.selectAll);
            if ($scope.hisTrxList != null && $scope.hisTrxList.length > 0) {                
                angular.forEach($scope.hisTrxList, function(trx, Key) {
                    trx.isProcess = $scope.selectAll?"T":"F";  
                });
            }
        };
        
        $scope.getHistoryList();

    }]);

Hope this simple article can help 🙂