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”

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 🙂

How To Change Action of Form Based on Selection Using JavaScript

In this case, I want to change the action URL of a form. The url will change dynamically depend on the selected item that user choosed. My form looks like this :

<form action="${baseURL}/sample/uploadfiletoday" method="POST" enctype="multipart/form-data" name="uploadfile" id="uploadfile">
    <div class="form-group">
        <label>File Type : </label>
        <select name="filetype" id="filetype" onchange="filetypechange()">
            <optgroup label="Bank BOHAY">
                <option value="CSV_TODAY">Today Transaction (CSV)</option>
                <option value="CSV_HISTORY">History Transaction (CSV)</option>
                <option value="XLS_LOG">Log Transaction (XLS)</option>
            </optgroup>
            <optgroup label="Bank OKEH">
                <option value="MANDIRI_TODAY">Today Account Report (CSV)</option>
            </optgroup>                                                                
        </select>
    </div>
    <div class="form-group">
        <label>File input</label>
        <input type="file" name="file" onchange="checkfile(this);"/>
        <div id="msgerror" class="msg" style="float: left"></div>
    </div>
    <br/>
    <div class="form-group">
        <button type="submit" id="upload" class="btn btn-primary" >Upload</button>                        
    </div>
</form>

The script will be:

<script>
function filetypechange(){
    var form = document.uploadfile;
        switch (form.filetype.selectedIndex) {                    
        case 0:
                form.action = "${baseURL}/sample/uploadfiletoday";
                break;
        case 1:
                form.action = "${baseURL}/sample/uploadfilehis";
                break;
        case 2:
                form.action = "${baseURL}/sample/uploadfilelog"
                break;
        case 3:
               form.action = "${baseURL}/sample/uploadaccstt"
                break;
        }
     }
</script>

Hope this simple article can help 🙂

How To Fix Error 405 (Request method ‘POST’ not supported) On SpringMVC + SpringSecurity

I am new with springMVC technology. When I create my first form with post method, I got Error 405 (Request method ‘POST’ not supported).

error post method

After some googling, I found that the error was because I use csrf on my web application. I should add some code for token on my action form like “${_csrf.parameterName}=${_csrf.token}”. So, here are my code became: Continue reading “How To Fix Error 405 (Request method ‘POST’ not supported) On SpringMVC + SpringSecurity”

Validate Multiple Checkbox Using Javascript

Case: User should choose at least one option on the checkbox.

Here is the code:

<form role="form" action="/admin/save" method="POST" onsubmit="return Validate()" id="edituser">
    <div class="form-group">
        <label>Role</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="errorMsg" class="msg"></span>
        <div class="checkbox" >
            <label>
                <input name="userRoles" type="checkbox" value="ROLE_ADMIN" >Admin
            </label>
        </div>
        <div class="checkbox" >
            <label>
                <input name="userRoles" type="checkbox" value="ROLE_USER"/>User
            </label>
        </div>
        <div class="checkbox" >
            <label>
                <input name="userRoles" type="checkbox" value="ROLE_VERIFICATOR" />Verificator
            </label>
        </div>
    </div>
</form>

<!-- js -->
<script>
    function check_checkboxes()
    {
        var c = document.getElementsByName('userRoles');
        for (var i = 0; i < c.length; i++)
        {
            if (c[i].checked) {
                return true;
            }
        }
        return false;
    }

    function Validate()
    {
        if (!check_checkboxes())
        {
            document.getElementById("errorMsg").innerText = "*Please choose at least one role";
            return false;
        }
        document.getElementById("errorMsg").innerText = "";
        return true;
    }

</script>