May 14, 2024
Category : PHP
jQuery
Angular
PHP AngularJS CRUD with Search and Pagination Tutorial
I would like to share this post with you. you can learn how to use AngularJS in native php. In this post you i did example with create, read, update, delete, search and pagination of items table. I use angularJS MVC with native PHP this way you can easily implement in your project. AngularJS is a awesome library of JS, Because that way you can make application without page load. I mean you have to just one time page load and then whole crud, search and pagination will work without page reload. I create this example that way you can undestand very well and it is very simple to integrate with your project.
So, you have to just follow few step for angularJS crud application. you can also REST API in AngularJS code, I build AngularJS with native PHP is very easily change and you can understandable script. I would like to show you preview of our PHP and AngularJS CRUD application layout demo.
Follow Only 4 step:
1.Create items table, DB Config file and index.php
2.Use AngularJS Code
3.Create Template files
4.Database Logic
Preview:
Step 1: Create items table, DB Config file and index.php
In first step we should create database and items table. so let's create database i did create "learn" database and "items" table inside that database. so you can create database as you want but you have to craete "items" table if you are doing from scratch. so create "items" table using following mysql query:
Items Table Query
CREATE TABLE IF NOT EXISTS `items` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=63 ;
Ok, let's proceed this way, we are doing from scratch so we require to create database configration file that way we can use that file in many other file. so let's craete db_config.php file in your root directory and put bellow code:
db_config.php
define (DB_USER, "root");
define (DB_PASSWORD, "");
define (DB_DATABASE, "learn");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
In Above file please make sure to check your batabase configration because could problem you find someware. that's way i tell you check it two times. It was just for your kind information.
Ok, now we also require to create index.php file in our root directory. so let's create index.php file and put bellow content in that file.
index.php
<html lang="en">
<head>
<title>PHP AngularJS CRUD</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<!-- MY App -->
<script src="app/packages/dirPagination.js"></script>
<script src="app/routes.js"></script>
<script src="app/services/myServices.js"></script>
<script src="app/helper/myHelper.js"></script>
<!-- App Controller -->
<script src="app/controllers/ItemController.js"></script>
</head>
<body ng-app="main-App">
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
Step 2: Use AngularJS Code
we will create angularJS code in this step, so first we have to create "app" folder in your root directory. we will do whole angular JS code in this folder that way we can eaily re-use this code.
Next create routes.js file inside app folder. we will create all angular js route in routes.js file. so create routes.js file and put bellow code in routes.js file.
app/routes.js
var app = angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/items.html',
controller: 'ItemController'
});
}]);
now we also require to create controller for angular route. so create another directory as controller(app/controller) in app folder and also create ItemController.js(app/controller/ItemController.js) for manage route request. So, let's put bellow code in that file.
app/controller/ItemController.js
var URL = "http://testcode.hd/angularjsCrud";
app.controller('ItemController', function(dataFactory,$scope,$http){
$scope.data = [];
$scope.libraryTemp = {};
$scope.totalItemsTemp = {};
$scope.totalItems = 0;
$scope.pageChanged = function(newPage) {
getResultsPage(newPage);
};
getResultsPage(1);
function getResultsPage(pageNumber) {
if(! $.isEmptyObject($scope.libraryTemp)){
dataFactory.httpRequest(URL + '/api/getData.php?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {
$scope.data = data.data;
$scope.totalItems = data.total;
});
}else{
dataFactory.httpRequest(URL + '/api/getData.php?page='+pageNumber).then(function(data) {
$scope.data = data.data;
$scope.totalItems = data.total;
});
}
}
$scope.searchDB = function(){
if($scope.searchText.length >= 3){
if($.isEmptyObject($scope.libraryTemp)){
$scope.libraryTemp = $scope.data;
$scope.totalItemsTemp = $scope.totalItems;
$scope.data = {};
}
getResultsPage(1);
}else{
if(! $.isEmptyObject($scope.libraryTemp)){
$scope.data = $scope.libraryTemp ;
$scope.totalItems = $scope.totalItemsTemp;
$scope.libraryTemp = {};
}
}
}
$scope.saveAdd = function(){
dataFactory.httpRequest(URL + '/api/add.php','POST',{},$scope.form).then(function(data) {
$scope.data.push(data);
$(".modal").modal("hide");
});
}
$scope.edit = function(id){
dataFactory.httpRequest(URL + '/api/edit.php?id='+id).then(function(data) {
console.log(data);
$scope.form = data;
});
}
$scope.saveEdit = function(){
dataFactory.httpRequest(URL + '/api/update.php?id='+$scope.form.id,'POST',{},$scope.form).then(function(data) {
$(".modal").modal("hide");
$scope.data = apiModifyTable($scope.data,data.id,data);
});
}
$scope.remove = function(item,index){
var result = confirm("Are you sure delete this item?");
if (result) {
dataFactory.httpRequest(URL + '/api/delete.php?id='+item.id,'DELETE').then(function(data) {
$scope.data.splice(index,1);
});
}
}
});
next we need to create helper(app/helper) folder in add directory. we are creating helper folder because we store all helper function we can manage in this folder. so let's create also myHelper.js(app/helper/myHelper.js) file in helper folder. now i did just one helper for modify table but you can add more helper function for your angulerJS application.
app/helper/myHelper.js
function apiModifyTable(originalData,id,response){
angular.forEach(originalData, function (item,key) {
if(item.id == id){
originalData[key] = response;
}
});
return originalData;
}
Now create another folder "services"(app/services) in your app directory. in this folder we will store our service file for example i did use app.factory of angularjs. that way we can manage it proper way. so let's create myServices.js(app/services/myServices.js) file and put bellow code in that file.
app/services/myServices.js
app.factory('dataFactory', function($http) {
var myService = {
httpRequest: function(url,method,params,dataPost,upload) {
var passParameters = {};
passParameters.url = url;
if (typeof method == 'undefined'){
passParameters.method = 'GET';
}else{
passParameters.method = method;
}
if (typeof params != 'undefined'){
passParameters.params = params;
}
if (typeof dataPost != 'undefined'){
passParameters.data = dataPost;
}
if (typeof upload != 'undefined'){
passParameters.upload = upload;
}
var promise = $http(passParameters).then(function (response) {
if(typeof response.data == 'string' && response.data != 1){
if(response.data.substr('loginMark')){
location.reload();
return;
}
$.gritter.add({
title: 'Application',
text: response.data
});
return false;
}
if(response.data.jsMessage){
$.gritter.add({
title: response.data.jsTitle,
text: response.data.jsMessage
});
}
return response.data;
},function(){
$.gritter.add({
title: 'Application',
text: 'An error occured while processing your request.'
});
});
return promise;
}
};
return myService;
});
Ok, now create one another folder "packages", we are creating packages folder because we can store all package file store in this folder. now i use package for pagination, so create file dirPagination.js(app/packages/dirPagination.js) and put code of following link:
Read Also: PHP MongoDB CRUD Operation Example
Step 3: Create Template files
In this step we will create template files. when we call angular js route then it will fetch one template file for layout so we have to create "templates" directory in your root file.
First craete itesms.html file for items module layout so carete items.html file and put bellow code.
templates/items.html
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h1 style="color:#3276B1"><strong>Manage Item</h1>
</div>
<div class="pull-right" style="padding-top:30px">
<div class="box-tools" style="display:inline-table">
<div class="input-group">
<input type="text" class="form-control input-sm ng-valid ng-dirty" placeholder="Search" ng-change="searchDB()" ng-model="searchText" name="table_search" title="" tooltip="" data-original-title="Min character length is 3">
<span class="input-group-addon">Search</span>
</div>
</div>
<button class="btn btn-success" data-toggle="modal" data-target="#create-user">Create New</button>
</div>
</div>
</div>
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="value in data | itemsPerPage:5" total-items="totalItems">
<td>{{ $index + 1 }}</td>
<td>{{ value.title }}</td>
<td>{{ value.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls class="pull-right" on-page-change="pageChanged(newPageNumber)" template-url="templates/dirPagination.html" ></dir-pagination-controls>
<!-- Create Modal -->
<div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Title : </strong>
<div class="form-group">
<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Description : </strong>
<div class="form-group" >
<textarea ng-model="form.description" class="form-control" required>
</textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editItem" role="form" ng-submit="saveEdit()">
<input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-control" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<textarea ng-model="form.description" class="form-control" required>
</textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Last craete dirPagination.html file for pagination layout and put following code in that file.
templates/dirPagination.html
<ul class="pagination pull-right" ng-if="1 < pages.length">
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
<a href="" ng-click="setCurrent(1)">«</a>
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
<a href="" ng-click="setCurrent(pagination.current - 1)">‹</a>
</li>
<li ng-repeat="pageNumber in pages track by $index" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
<a href="" ng-click="setCurrent(pagination.current + 1)">›</a>
</li>
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }">
<a href="" ng-click="setCurrent(pagination.last)">»</a>
</li>
</ul>
Step 4: Database Logic
this is a last step and you can skip this step if you have already made REST API method, if not then follow me. first create "api" folder in your root directory. first craete getData.php file that file will return all records from items table. we will also create new 4 files for add,edit,update and delete. so follow that file.
api/getData.php
require '../db_config.php';
$num_rec_per_page = 5;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $num_rec_per_page;
if (!empty($_GET["search"])){
$sqlTotal = "SELECT * FROM items
WHERE (title LIKE '%".$_GET["search"]."%'
OR description LIKE '%".$_GET["search"]."%')";
$sql = "SELECT * FROM items
WHERE (title LIKE '%".$_GET["search"]."%'
OR description LIKE '%".$_GET["search"]."%')
LIMIT $start_from, $num_rec_per_page";
}else{
$sqlTotal = "SELECT * FROM items";
$sql = "SELECT * FROM items LIMIT $start_from, $num_rec_per_page";
}
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
$json[] = $row;
}
$data['data'] = $json;
$result = mysqli_query($mysqli,$sqlTotal);
$data['total'] = mysqli_num_rows($result);
echo json_encode($data);
api/add.php
require '../db_config.php';
$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "INSERT INTO items (title,description)
VALUES ('".$post->title."','".$post->description."')";
$result = $mysqli->query($sql);
$sql = "SELECT * FROM items Order by id desc LIMIT 1";
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data);
api/edit.php
require '../db_config.php';
$id = $_GET["id"];
$sql = "SELECT * FROM items WHERE id = '".$id."'";
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data);
api/update.php
require '../db_config.php';
$id = $_GET["id"];
$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "UPDATE items SET title = '".$post->title."'
,description = '".$post->description."'
WHERE id = '".$id."'";
$result = $mysqli->query($sql);
$sql = "SELECT * FROM items WHERE id = '".$id."'";
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data);
api/delete.php
Read Also: Angular 15 CRUD Application Tutorial Example
require '../db_config.php';
$id = $_GET["id"];
$sql = "DELETE FROM items WHERE id = '".$id."'";
$result = $mysqli->query($sql);
echo json_encode([$id]);
Now we are ready to use try to run your projects.
IF you want to download this from git then you can download from here : GitHub
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- Laravel React JS CRUD Application Tutorial
- Laravel 9 React JS CRUD using Vite Example
- Laravel Ajax CRUD with Popup Modal Example
- Laravel 9 Ajax CRUD Tutorial Example
- Laravel 9 Livewire CRUD Application Example
- Angular 14 CRUD Example with Web API
- Laravel 9 CRUD with Image Upload Tutorial
- Laravel 9 Inertia JS CRUD with Jetstream & Tailwind CSS
- Laravel 9 Livewire CRUD using Jetstream & Tailwind CSS
- Laravel 9 CRUD Application Tutorial Example
- Node JS CRUD with MySQL Tutorial Example
- CRUD with Image Upload in Laravel 8 Example
- PHP MongoDB CRUD Operation Example
;void(0);){kind=link}