Hi readers my name is Leandro Manuel Guevara, this is my first post about AngularJS CRUD with PHP MySQLi.This post is about CREATE READ UPDATE DELETE and SEARCH in the database using PHP MySQLi. First you need to create database name it "angulardoy" then create a table like this.
CREATE TABLE IF NOT EXISTS `pages` (
`id` int(255) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;
INSERT INTO `pages` (`id`, `name`) VALUES
(3, 'name3 is lean'),
(10, 'be successful'),
(5, 'hello my dear'),
(6, 'hello day'),
(11, 'once i was 11 years old'),
(12, 'doy guevara'),
(13, 'emmanuel'),
(14, 'doyax manuel'),
(15, 'my name is allans'),
(17, 'leandro manuel guevara the hero');
the next thing to do is to create the html and this is how it looks like.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dirPagination.js"></script>
<script src="doyax/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<style type="text/css">
.ul1{
height: 100px ;
list-style-type: none ;
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px ;
}
.li1 {
float: left ;
margin-right: 10px ;
overflow: hidden ;
text-align: center ;
}
</style>
<body >
<div ng-app="MyTutorialApp" ng-controller="CartForm" >
add here:
<form class="form-horizontal" class="blogForm" ng-submit="pushData(frm)">
<div class="form-group">
<label for="first_name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" ng-model="frm.name" class="searcht">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" value="submit" class="btn btn-primary">Insert</button>
</div>
</div>
</form><br>
edit here:
<form class="form-horizontal" class="editForm" ng-submit="editData(currentUser)">
<div class="form-group">
<label for="first_name" class="col-sm-2 control-label">id</label>
<div class="col-sm-10">
<input type="hidden" value="{{currentUser.id}}" ng-model="currentUser.id" class="searcht">{{currentUser.id}}
</div>
</div>
<div class="form-group">
<p id="demo"></p>
<label for="first_name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" ng-model="currentUser.name" value="{{currentUser.name}}" class="searcht">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" value="submit" class="btn btn-primary">edit</button>
</div>
</div>
</form>
<div class="form-group">
<label >Search</label>
<input type="text" ng-model="searcht" class="searcht" placeholder="Search">
</div>
<table border="2">
<tr>
<th ng-click="sort('id')">Id
<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th>Name</th>
<th>Remove</th>
</tr>
<tr dir-paginate="peoples in people|orderBy:sortKey:reverse|filter:searcht|itemsPerPage:5">
<td>{{peoples.id}}</td>
<td>{{peoples.name}}</td>
<td>
<button class="btn btn-danger" ng-click="removeData(peoples.id)">remove</button>
<button class="btn btn-success" ng-click="editsData(peoples)">edit</button>
</td>
</tr>
</table>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
<br>
</div>
</body>
</html>
then you need to create a folder named "doyax" then create a file named "app.js" where you put these codes.
var app = angular.module('MyTutorialApps',['angularUtils.directives.dirPagination']);
app.controller("CartForms", function($scope,$http){
$scope.inputValue = "";
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
$scope.people = []; //declare an empty array
$http.get("datas/popdata.php").success(function(data){
$scope.people = data; //ajax request to fetch data into $scope.data
});
$scope.pushData = function($params) {
$http.post('datas/pushdata.php',{'name':$params.name})
.success(function(response) {
$scope.people = response;
})
.error(function(err) {
$log.error(err);
})
}
$scope.removeData = function($params) {
var cnfrm = confirm("Are you sure to delete?");
if(cnfrm) {
$http.post('datas/removedata.php', {'id':$params})
.success(function(response) {
$scope.people = response;
})
.error(function(err) {
alert(err);
})
} else {
//
}
}
$scope.editData = function($params) {
$http.post('datas/updatedata.php', {'id':$params.id, 'name':$params.name})
.success(function(response) {
$scope.people = response;
})
.error(function(err) {
alert(err);
})
}
$scope.currentUser = {};
$scope.editsData = function(info){
$scope.currentUser = info;
}
});
here is the PHP and MySQLi codes:
datas/popdata.php
<?php
define("__HOST__", "localhost");
define("__USER__", "root");
define("__PASS__", "");
define("__BASE__", "angulardoy");
$con = mysqli_connect(__HOST__, __USER__, __PASS__, __BASE__);
$data = array();
$query = "SELECT * FROM pages ORDER BY id DESC";
$result = mysqli_query($con, $query);
$row = mysqli_num_rows($result);
if($row > 0 )
{
while($row1 = mysqli_fetch_assoc($result))
{
$data[] = $row1;
}
}
echo json_encode($data);
?>
datas/pushdata.php
<?php
$data = json_decode(file_get_contents("php://input"));
define("__HOST__", "localhost");
define("__USER__", "root");
define("__PASS__", "");
define("__BASE__", "angulardoy");
$con = mysqli_connect(__HOST__, __USER__, __PASS__, __BASE__);
$sql = "INSERT INTO `pages`(name)VALUES('$data->name')";
$result = mysqli_query($con, $sql);
$data = array();
$query = "SELECT * FROM pages ORDER BY id DESC";
$result = mysqli_query($con, $query);
$row = mysqli_num_rows($result);
if($row > 0 )
{
while($row1 = mysqli_fetch_assoc($result))
{
$data[] = $row1;
}
}
echo json_encode($data);
?>
datas/removedata.php
<?php
$data = json_decode(file_get_contents("php://input"));
define("__HOST__", "localhost");
define("__USER__", "root");
define("__PASS__", "");
define("__BASE__", "angulardoy");
$con = mysqli_connect(__HOST__, __USER__, __PASS__, __BASE__);
$sql = "DELETE FROM `pages` WHERE `id` = $data->id";
$result = mysqli_query($con, $sql);
$data = array();
$query = "SELECT * FROM pages ORDER BY id DESC";
$result = mysqli_query($con, $query);
$row = mysqli_num_rows($result);
if($row > 0 )
{
while($row1 = mysqli_fetch_assoc($result))
{
$data[] = $row1;
}
}
echo json_encode($data);
?>
datas/updatedata.php
<?php
$data = json_decode(file_get_contents("php://input"));
define("__HOST__", "localhost");
define("__USER__", "root");
define("__PASS__", "");
define("__BASE__", "angulardoy");
$con = mysqli_connect(__HOST__, __USER__, __PASS__, __BASE__);
$query = "UPDATE pages SET name = '$data->name' WHERE id = '$data->id'";
$res = mysqli_query($con, $query);
$data = array();
$query = "SELECT * FROM pages ORDER BY id DESC";
$result = mysqli_query($con, $query);
$row = mysqli_num_rows($result);
if($row > 0 )
{
while($row1 = mysqli_fetch_assoc($result))
{
$data[] = $row1;
}
}
echo json_encode($data);
?>
and now try to run it in your browser.
