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:


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


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 🙂

For books_model, I created function to get all books in getAllBooks() function.

class Books_model extends CI_Model{

	public function __construct()

        function getAllBooks(){
		return $this->db->query('select * from books');		


For the controller, I created 2 functions. First function to show the page. Another one to get all books on JSON format.

class Books extends CI_Controller {

    public function index()
        echo 'Hello World!';

    function showbooks(){
    	$html['title'] = 'List of Our Books';
	$this->load->view('show_book', $html);

    function getAllBooks(){
	$books = $this->booksModel->getAllBooks();
	$result = $books->result_array();


<!DOCTYPE html>
         echo '<script type="text/javascript" src="'.base_url().'js/angular.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/angular-local-storage.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/angular-strap.min.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/angular-strap.tpl.min.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/transition.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/modal.js"></script>';
         echo '<script type="text/javascript" src="'.base_url().'js/ariestaniablog.js"></script>';
         echo '<link href="'.base_url().'css/bootstrap.css" rel="stylesheet"/>';
         echo '<link href="'.base_url().'css/font-awesome.css" rel="stylesheet"/>';
         echo '<link href="'.base_url().'css/custom.css" rel="stylesheet"/>';
         echo '<link href="'.base_url().'css/bootstrap.css" rel="stylesheet">';
         echo '<link href="'.base_url().'css/dataTables.bootstrap.css" rel="stylesheet"/>';
      <link href='' rel='stylesheet' type='text/css' />
      <title>Ariestania's Blog</title>
      <div id="page-inner" ng-app="mainApp" >
         <div class="row">
            <div class="col-md-12">
               <h5>Love to see you back 🙂 </h5>
         <hr class="col-md-9">
         <div class="row">
            <div class="col-md-9">
               <!--    Context Classes  -->
               <div class="panel panel-default">
                  <div class="panel-heading">
                  <div class="panel-body" ng-controller="toShowBooks">
                     <div class="table-responsive">
                        <table class="table">
                                 <th>Book ID</th>
                              <tr ng-repeat="book in bookList" ng-class="$index%2==0?'success':'danger'">
               <!--  end  Context Classes  -->
         <!-- /. ROW  -->

Javascript for Angular controller

var showApp = angular.module('mainApp', ['ui.bootstrap.modal', 'ui.bootstrap.transition', 'mgcrea.ngStrap.datepicker', 'mgcrea.ngStrap.timepicker', 'LocalStorageModule']);

showApp.config(function($httpProvider) {

showApp.controller('toShowBooks', ['$scope', '$http', function($scope, $http) {

	$scope.showBooks = function(){

        $scope.bookList = null;

        var urlGET = "getAllBooks";
        var config = {headers: {
            'Content-Type': 'application/json'

        var resUrlGet = $http.get(urlGET, {cache: false, transformResponse: function(data, headersGetter) {
                    try {
                        var jsonObject = JSON.parse(data);
                        keepGoing = true;
                        return jsonObject;
                    catch (e) {
                        $scope.$parent.ResponseMessage = "Error. Cannot Retrieve Data";
                    return {};
                }});//end ajax 

            resUrlGet.success(function(booksData, status, headers, config) {
                $scope.bookList = booksData;




Hope this simple article can help 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s