Fetch data from database with codeigniter and angularjs

Hello World, Today we are going to fetch data from database with codeigniter and angularjs. In this tutorial we will learn that how we can fetch data from mysql database with codeigniter and show that data with angularjs. We will also learn that how we can implement search with angularjs. I have divided this tutorial in following parts.

Introduction of codeigniter and angularjs
Setup Project.
Setup Database and add some values.
Fetch data with codeigniter and angularjs
Implement search with angularjs model on data.
Test the whole concept.

Introduction of Codeigniter and AngularJs

Codeigniter

According to their official website

CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.

Angularjs

According to their official website

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

Setup project on local machine

Download Xamp Server.
Download Codeigniter and extract in Server.
Rename Extracted Folder to Blog.
Set Project Path in application/config/config.php
Download Angularjs from this link.
Download Bootstrap 3.

We have prepared our all assets that we need to create the tutorial. Now we will create the code.

Create Blog.php file in application/controllers folder with following code.

<?php
class Blog extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->helper('url');
		$this->load->model('Blog_Model');
	}

	function index(){
		$this->load->view('blog/index');
	}

	function get_posts(){
		echo json_encode($this->Blog_Model->get_all_data());
	}
}
?>

Create Blog folder in application/views folder. In this newly created folder create index.php file with following code.

<!DOCTYPE html>
<html>
<head>
	<title>::Data List::</title>
	<!-- Include AngularJs -->
	<script type="text/javascript" src="<?php echo base_url('assets/angular.min.js'); ?>"></script>
	<!-- Add Boostrap -->
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap.min.css'); ?>">
</head>
<body>
	<div class="container">
		<h1 class="page-header">Fetch Data From MySQL Database</h1>
	</div>
</body>
</html>

Create assets folder at root with angular.min.js and bootstrap.min.css files.
Open this project in browser with http://localhost/blog/index.php/blog.

By default index.php has added by the codeigniter.

You will see the following screen in browser.

Here we have settled up our project with all assets.

Setup Database and add some values

Create blog database with posts table with following fields.
- post_id
- post_title
- post_desc
- add_time

Add Some value in this table like following

Fetch data with codeigniter and angularjs

Open application/config/database.php file and add the database credentials.
Create Blog_Model.php in application/models folder with following code.

<?php
class Blog_Model extends CI_Model{
	function __construct(){
		parent::__construct();
		$this->load->database();
	}
	function get_all_data(){
		$res=array();
		$query=$this->db->get('posts');
		if($query->num_rows()>0){
			$res['bool']=true;
			$res['postData']=$query->result_array();
		}else{
			$res['bool']=false;
		}
		return $res;
	}
}
?>

Now when you will open the http://localhost/blog/index.php/blog/get_posts then you will see the table data like following.

It means we have fetched the data. Now we will show with AngularJs.
Create script.js file with following code in assets folder.

var blog=angular.module('blog',[]);
blog.controller('postCtrl',function($scope,$http){
	$scope.posts=[
		{
			post_title:"First Title",
			post_desc:"First Description",
			add_time:new Date()
		},
		{
			post_title:"Second Title",
			post_desc:"Second Description",
			add_time:new Date()
		}
	];
});

Replace the index view file with following code.

<!DOCTYPE html>
<html ng-app="blog">
<head>
	<title>::Data List::</title>
	<!-- Include AngularJs -->
	<script type="text/javascript" src="<?php echo base_url('assets/angular.min.js'); ?>"></script>
	<!-- Add Boostrap -->
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap.min.css'); ?>">
	<script type="text/javascript" src="<?php echo base_url('assets'); ?>/script.js"></script>
</head>
<body>
	<div class="container" ng-controller="postCtrl">
		<h1 class="page-header">Fetch Data From MySQL Database</h1>
		<table class="table table-bordered">
			<tr>
				<th>Post Title</th>
				<th>Post Desc</th>
				<th>Add Time</th>
			</tr>
			<tr ng-repeat="post in posts">
				<td>{{post.post_title}}</td>
				<td>{{post.post_desc}}</td>
				<td>{{post.add_time}}</td>
			</tr>
		</table>
	</div>
</body>
</html>

Open this link in your browser http://localhost/blog/index.php/blog.

Here we have got the static data. Now the next step to get data from database and show with angularjs.
Replace the script.js file with following code.

var blog=angular.module('blog',[]);
blog.controller('postCtrl',function($scope,$http){
	$scope.posts=[
		{
			post_title:"Loading...",
			post_desc:"Loading...",
			add_time:"Loading..."
		}
	];
	$http({
        method : "GET",
        url : "/blog/index.php/blog/get_posts"
    }).then(function(response){
        $scope.posts = response.data.postData;
    },function(response) {
        console.error("Error getting articles.");
    });
});

Load http://localhost/blog/index.php/blog in browser and now you see the data which is coming from the database.

Implement search with angularjs model on data

We have successfully fetch data from database with codeigniter and angularjs. Next we will implement search with angularjs.

Replace the index view file with following code.

<!DOCTYPE html>
<html ng-app="blog">
<head>
	<title>::Data List::</title>
	<!-- Include AngularJs -->
	<script type="text/javascript" src="<?php echo base_url('assets/angular.min.js'); ?>"></script>
	<!-- Add Boostrap -->
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap.min.css'); ?>">
	<script type="text/javascript" src="<?php echo base_url('assets'); ?>/script.js"></script>
</head>
<body>
	<div class="container">
		<h1 class="page-header">Fetch Data From MySQL Database</h1>
		<table class="table table-bordered" ng-controller="postCtrl">
			<tr>
				<th colspan="1">Search Post</th>
				<th colspan="3"><input class="form-control" type="text" ng-model="searchPost" /></th>
			</tr>
			<tr>
				<th>Post Title</th>
				<th>Post Desc</th>
				<th>Add Time</th>
			</tr>
			<tr ng-repeat="post in posts | filter:searchPost">
				<td>{{post.post_title}}</td>
				<td>{{post.post_desc}}</td>
				<td>{{post.add_time}}</td>
			</tr>
		</table>
	</div>
</body>
</html>

In the above code, we have implement angularjs filter with ng-model.

ProjectsPlaza

Php Projects, Django Projects, Laravel Projects, Codeigniter Projects